From e0f2c0445cbbab6ccc675c1aa6ccfbae4b6863cd Mon Sep 17 00:00:00 2001
From: yas-ako <105139975+yas-ako@users.noreply.github.com>
Date: Wed, 31 Dec 2025 22:00:09 +0900
Subject: [PATCH 01/19] =?UTF-8?q?refactor:=20useMessageScroller=20?=
 =?UTF-8?q?=E3=82=92=E4=BD=9C=E6=88=90=E3=81=97=E3=80=81=E3=83=A1=E3=83=83?=
 =?UTF-8?q?=E3=82=BB=E3=83=BC=E3=82=B8=E3=81=AE=E3=82=B9=E3=82=AF=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=83=AB=E3=81=AB=E9=96=A2=E3=81=99=E3=82=8B=E5=87=A6?=
 =?UTF-8?q?=E7=90=86=E3=82=92=E7=B5=B1=E5=90=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainView/MessageElement/ClipElement.vue   |   5 +-
 .../MessageElement/MessageElement.vue         |   5 +-
 .../MessagesScroller/MessagesScroller.vue     |  80 ++--------
 .../composables/useMessageScroller.ts         | 140 ++++++++++++++++++
 ...useMessageScrollerElementResizeObserver.ts |  68 ---------
 5 files changed, 157 insertions(+), 141 deletions(-)
 create mode 100644 src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
 delete mode 100644 src/components/Main/MainView/MessagesScroller/composables/useMessageScrollerElementResizeObserver.ts

diff --git a/src/components/Main/MainView/MessageElement/ClipElement.vue b/src/components/Main/MainView/MessageElement/ClipElement.vue
index 328825d9e9..6c3df45523 100644
--- a/src/components/Main/MainView/MessageElement/ClipElement.vue
+++ b/src/components/Main/MainView/MessageElement/ClipElement.vue
@@ -40,8 +40,9 @@ import type { MessageId } from '/@/types/entity-ids'
 import MessageQuoteListItemFooter from './Embeddings/MessageQuoteListItemFooter.vue'
 import MessageContents from './MessageContents.vue'
 import MessageTools, { useMessageToolsHover } from './MessageTools.vue'
-import type { ChangeHeightData } from './composables/useElementRenderObserver'
-import useElementRenderObserver from './composables/useElementRenderObserver'
+import useElementRenderObserver, {
+  type ChangeHeightData
+} from './composables/useElementRenderObserver'
 
 const props = defineProps<{
   messageId: MessageId
diff --git a/src/components/Main/MainView/MessageElement/MessageElement.vue b/src/components/Main/MainView/MessageElement/MessageElement.vue
index 266e052c85..f3b0fa9cb0 100644
--- a/src/components/Main/MainView/MessageElement/MessageElement.vue
+++ b/src/components/Main/MainView/MessageElement/MessageElement.vue
@@ -55,8 +55,9 @@ import type { MessageId, UserId } from '/@/types/entity-ids'
 import MessageContents from './MessageContents.vue'
 import MessagePinned from './MessagePinned.vue'
 import MessageStampList from './MessageStampList.vue'
-import type { ChangeHeightData } from './composables/useElementRenderObserver'
-import useElementRenderObserver from './composables/useElementRenderObserver'
+import useElementRenderObserver, {
+  type ChangeHeightData
+} from './composables/useElementRenderObserver'
 
 const props = withDefaults(
   defineProps<{
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index 00e21cb7e8..bb58394326 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -34,7 +34,7 @@
 
 <script lang="ts">
 import type { ComponentPublicInstance, Ref } from 'vue'
-import { nextTick, onMounted, reactive, shallowRef, watch } from 'vue'
+import { nextTick, onMounted, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useEventListener } from '@vueuse/core'
@@ -48,7 +48,7 @@ import { useStampsStore } from '/@/store/entities/stamps'
 import { useMainViewStore } from '/@/store/ui/mainView'
 import type { MessageId } from '/@/types/entity-ids'
 
-import useMessageScrollerElementResizeObserver from './composables/useMessageScrollerElementResizeObserver'
+import useMessageScroller from './composables/useMessageScroller'
 import type { LoadingDirection } from './composables/useMessagesFetcher'
 
 export interface MessageScrollerInstance extends ComponentPublicInstance {
@@ -162,15 +162,14 @@ const { lastScrollPosition } = useMainViewStore()
 const { stampsMapFetched } = useStampsStore()
 
 const rootRef = shallowRef<HTMLElement | null>(null)
-const state = reactive({
-  height: 0,
-  scrollTop: lastScrollPosition.value,
-  // 古いメッセージを読み込むとき、読み込み開始直後は高さの調整を無効化する
-  skipResizeAdjustment: false
-})
 
-const { onChangeHeight, onEntryMessageLoaded } =
-  useMessageScrollerElementResizeObserver(rootRef, props, state)
+const { onChangeHeight, onEntryMessageLoaded, state } = useMessageScroller(
+  rootRef,
+  props
+)
+
+// 初期スクロール位置を設定
+state.scrollTop = lastScrollPosition.value
 
 onMounted(() => {
   // 表示されている
@@ -196,65 +195,6 @@ watch(
   }
 )
 
-watch(
-  () => props.messageIds,
-  (ids, prevIds) => {
-    if (!rootRef.value) return
-    /* state.height の更新を忘れないようにすること */
-
-    const newHeight = rootRef.value.scrollHeight
-    if (
-      props.lastLoadingDirection === 'latest' ||
-      props.lastLoadingDirection === 'former'
-    ) {
-      if (ids.length - prevIds.length === -1) {
-        // 削除された場合は何もしない
-        state.height = newHeight
-        return
-      }
-      // XXX: 追加時にここは0になる
-      if (ids.length - prevIds.length === 0) {
-        const scrollBottom =
-          rootRef.value.scrollTop + rootRef.value.clientHeight
-
-        // 一番下のメッセージあたりを見ているときに、
-        // 新規に一つ追加された場合は一番下までスクロール
-        if (state.height - 50 <= scrollBottom) {
-          rootRef.value.scrollTo({
-            top: newHeight
-          })
-        }
-        state.height = newHeight
-        return
-      }
-      //上に追加された時はスクロール位置を変更する。
-      if (props.lastLoadingDirection === 'former') {
-        // onChangeHeight の調整を一時的に無効化
-        state.skipResizeAdjustment = true
-        rootRef.value.scrollTo({
-          top: newHeight - state.height
-        })
-        state.height = newHeight
-        // 十分に DOMが更新されたら無効化を解除
-        requestAnimationFrame(() => {
-          requestAnimationFrame(() => {
-            state.skipResizeAdjustment = false
-          })
-        })
-      }
-
-      if (props.lastLoadingDirection === 'latest') {
-        // チャンネルを移動したとき、
-        rootRef.value.scrollTo({
-          top: newHeight
-        })
-        state.height = newHeight
-      }
-    } else state.height = newHeight
-  },
-  { deep: true, flush: 'post' }
-)
-
 const requestLoadMessages = () => {
   if (!rootRef.value) return
   const { clientHeight, scrollHeight, scrollTop } = rootRef.value
@@ -299,6 +239,8 @@ useScrollRestoration(rootRef, state)
   overflow-anchor: none;
   // iOSで無限にロードが走るのを防止する
   -webkit-overflow-scrolling: auto;
+  // scroll-behavior: auto;
+  overscroll-behavior: none;
 }
 
 .viewport {
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
new file mode 100644
index 0000000000..242e9c1f08
--- /dev/null
+++ b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
@@ -0,0 +1,140 @@
+import type { Ref } from 'vue'
+import { reactive, watch } from 'vue'
+
+import type { ChangeHeightData } from '/@/components/Main/MainView/MessageElement/composables/useElementRenderObserver'
+import type { LoadingDirection } from '/@/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher'
+import type { MessageId } from '/@/types/entity-ids'
+
+const useMessageScroller = (
+  rootRef: Ref<HTMLElement | null>,
+  scrollerProps: {
+    messageIds: MessageId[]
+    lastLoadingDirection: LoadingDirection
+    entryMessageId?: MessageId
+  }
+) => {
+  const state = reactive({
+    height: 0,
+    scrollTop: 0,
+    skipResizeAdjustment: false
+  })
+
+  const onChangeHeight = (payload: ChangeHeightData) => {
+    if (!rootRef.value) {
+      return
+    }
+
+    if (
+      scrollerProps.lastLoadingDirection === 'around' &&
+      scrollerProps.entryMessageId
+    ) {
+      // エントリーメッセージがあり、かつ初回ロードの場合
+      // エントリーより上にあった場合はスクロール位置をずらす
+      let isBeforeEntryMessage = false
+      for (const messageId of scrollerProps.messageIds) {
+        if (messageId === scrollerProps.entryMessageId) break
+        if (messageId === payload.id) {
+          isBeforeEntryMessage = true
+          break
+        }
+      }
+
+      if (isBeforeEntryMessage) {
+        rootRef.value.scrollTo({
+          top: rootRef.value.scrollTop + payload.heightDiff
+        })
+        state.height = rootRef.value.scrollHeight
+      }
+    } else if (
+      scrollerProps.lastLoadingDirection === 'latest' ||
+      scrollerProps.lastLoadingDirection === 'former'
+    ) {
+      // 古いメッセージを読み込んですぐはここで高さの調整をしない
+      if (state.skipResizeAdjustment) {
+        return
+      }
+
+      const scrollerTop = rootRef.value.getBoundingClientRect().top
+      // 視界より上にある要素の高さが変わった場合のみ補正する
+      if (payload.top < scrollerTop) {
+        rootRef.value.scrollTo({
+          top: rootRef.value.scrollTop + payload.heightDiff
+        })
+      }
+      state.height = rootRef.value.scrollHeight
+    }
+  }
+
+  const onEntryMessageLoaded = (relativePos: number) => {
+    if (!rootRef.value) {
+      return
+    }
+    const rootHeight = rootRef.value.getBoundingClientRect().height
+    rootRef.value.scrollTo({ top: relativePos - rootHeight / 3 })
+  }
+
+  watch(
+    () => scrollerProps.messageIds,
+    (ids, prevIds) => {
+      if (!rootRef.value) return
+      /* state.height の更新を忘れないようにすること */
+
+      const newHeight = rootRef.value.scrollHeight
+      if (
+        scrollerProps.lastLoadingDirection === 'latest' ||
+        scrollerProps.lastLoadingDirection === 'former'
+      ) {
+        if (ids.length - prevIds.length === -1) {
+          // 削除された場合は何もしない
+          state.height = newHeight
+          return
+        }
+        // XXX: 追加時にここは0になる
+        if (ids.length - prevIds.length === 0) {
+          const scrollBottom =
+            rootRef.value.scrollTop + rootRef.value.clientHeight
+
+          // 一番下のメッセージあたりを見ているときに、
+          // 新規に一つ追加された場合は一番下までスクロール
+          if (state.height - 50 <= scrollBottom) {
+            rootRef.value.scrollTo({ top: newHeight })
+          }
+          state.height = newHeight
+          return
+        }
+        //上に追加された時はスクロール位置を変更する。
+        if (scrollerProps.lastLoadingDirection === 'former') {
+          // onChangeHeight の調整を一時的に無効化
+          state.skipResizeAdjustment = true
+          rootRef.value.scrollTo({
+            top: rootRef.value.scrollTop + (newHeight - state.height)
+          })
+          state.height = newHeight
+          // 十分に DOMが更新されたら無効化を解除
+          requestAnimationFrame(() => {
+            requestAnimationFrame(() => {
+              state.skipResizeAdjustment = false
+            })
+          })
+        }
+
+        if (scrollerProps.lastLoadingDirection === 'latest') {
+          // チャンネルを移動したとき、
+          rootRef.value.scrollTo({
+            top: newHeight
+          })
+          state.height = newHeight
+        }
+      } else state.height = newHeight
+    },
+    { deep: true, flush: 'post' }
+  )
+
+  return {
+    onChangeHeight,
+    onEntryMessageLoaded,
+    state
+  }
+}
+
+export default useMessageScroller
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessageScrollerElementResizeObserver.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessageScrollerElementResizeObserver.ts
deleted file mode 100644
index a5d5a1effa..0000000000
--- a/src/components/Main/MainView/MessagesScroller/composables/useMessageScrollerElementResizeObserver.ts
+++ /dev/null
@@ -1,68 +0,0 @@
-import type { Ref } from 'vue'
-
-import type { ChangeHeightData } from '/@/components/Main/MainView/MessageElement/composables/useElementRenderObserver'
-import type { MessageId } from '/@/types/entity-ids'
-
-import type { LoadingDirection } from './useMessagesFetcher'
-
-const useMessageScrollerElementResizeObserver = (
-  rootRef: Ref<HTMLElement | null>,
-  scrollerProps: {
-    messageIds: MessageId[]
-    lastLoadingDirection: LoadingDirection
-    entryMessageId?: MessageId
-  },
-  viewPortState: {
-    height: number
-    skipResizeAdjustment?: boolean
-  }
-) => {
-  const onChangeHeight = (payload: ChangeHeightData) => {
-    if (!rootRef.value) {
-      return
-    }
-
-    if (
-      scrollerProps.lastLoadingDirection === 'around' &&
-      scrollerProps.entryMessageId
-    ) {
-      // エントリーメッセージがあり、かつ初回ロードの場合
-      // エントリーより上にあった場合はスクロール位置をずらす
-      let isBeforeEntryMessage = false
-      for (const messageId of scrollerProps.messageIds) {
-        if (messageId === scrollerProps.entryMessageId) break
-        if (messageId === payload.id) {
-          isBeforeEntryMessage = true
-          break
-        }
-      }
-
-      if (isBeforeEntryMessage) {
-        rootRef.value.scrollTop += payload.heightDiff
-        viewPortState.height = rootRef.value.scrollHeight
-      }
-    } else if (
-      scrollerProps.lastLoadingDirection === 'latest' ||
-      scrollerProps.lastLoadingDirection === 'former'
-    ) {
-      // 古いメッセージを読み込んですぐはここで高さの調整をしない
-      if (viewPortState.skipResizeAdjustment) {
-        return
-      }
-      rootRef.value.scrollTop += payload.heightDiff
-      viewPortState.height = rootRef.value.scrollHeight
-    }
-  }
-
-  const onEntryMessageLoaded = (relativePos: number) => {
-    if (!rootRef.value) {
-      return
-    }
-    const rootHeight = rootRef.value.getBoundingClientRect().height
-    rootRef.value.scrollTop = relativePos - rootHeight / 3
-  }
-
-  return { onChangeHeight, onEntryMessageLoaded }
-}
-
-export default useMessageScrollerElementResizeObserver

From 637a759cf88e316887ca8603a219ad64e986b68f Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Fri, 2 Jan 2026 12:35:22 +0900
Subject: [PATCH 02/19] =?UTF-8?q?Revert=20"fix:=20=E5=88=9D=E5=9B=9E?=
 =?UTF-8?q?=E3=81=AE=E9=AB=98=E3=81=95=E3=81=AE=E5=A4=89=E5=8C=96=E3=81=AB?=
 =?UTF-8?q?=E5=AF=BE=E3=81=97=E3=81=A6=E3=82=82=20`change-height`=20?=
 =?UTF-8?q?=E3=82=A4=E3=83=99=E3=83=B3=E3=83=88=E3=82=92=20emit=20?=
 =?UTF-8?q?=E3=81=99=E3=82=8B"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

This reverts commit 79a975b2e7ab995135891c310d3bee3ffe288bd7.
---
 .../composables/useElementRenderObserver.ts   | 20 +++++++++----------
 1 file changed, 9 insertions(+), 11 deletions(-)

diff --git a/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts b/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
index b25827c88a..0a5ff3d990 100644
--- a/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
+++ b/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
@@ -34,16 +34,6 @@ const useElementRenderObserver = (
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const entry = entries[0]!
     const { height, bottom, top } = entry.target.getBoundingClientRect()
-
-    emit('changeHeight', {
-      id: messageId.value,
-      heightDiff: height - lastHeight,
-      top,
-      bottom,
-      lastTop,
-      lastBottom
-    })
-
     if (lastHeight === 0) {
       // 初回に高さが変化した場合、初期レンダリング完了とみなす
       // これ以降新規にobserveしないためにwatcherを止める
@@ -56,8 +46,16 @@ const useElementRenderObserver = (
         const { top } = bodyRef.value.getBoundingClientRect()
         emit('entryMessageLoaded', top - parentTop)
       }
+    } else {
+      emit('changeHeight', {
+        id: messageId.value,
+        heightDiff: height - lastHeight,
+        top,
+        bottom,
+        lastTop,
+        lastBottom
+      })
     }
-
     lastHeight = height
     lastBottom = bottom
     lastTop = top

From 265f949af501326432c9ecf5961e45f92128ea40 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Fri, 2 Jan 2026 12:43:01 +0900
Subject: [PATCH 03/19] =?UTF-8?q?Revert=20"fix:=20=E3=82=88=E3=82=8A?=
 =?UTF-8?q?=E5=8F=A4=E3=81=84=E3=83=A1=E3=83=83=E3=82=BB=E3=83=BC=E3=82=B8?=
 =?UTF-8?q?=E3=82=92=E6=96=B0=E3=81=9F=E3=81=AB=E8=AA=AD=E3=81=BF=E8=BE=BC?=
 =?UTF-8?q?=E3=82=93=E3=81=A0=E3=81=A8=E3=81=8D=E3=80=81=E3=82=B9=E3=82=AF?=
 =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=AB=E4=BD=8D=E7=BD=AE=E3=81=8C=E4=B8=8B?=
 =?UTF-8?q?=E3=81=AB=E3=81=9A=E3=82=8C=E3=81=A6=E3=81=97=E3=81=BE=E3=81=86?=
 =?UTF-8?q?=E5=95=8F=E9=A1=8C=E3=82=92=E4=BF=AE=E6=AD=A3"?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- This reverts commit 561f1c67835e7e9891bb606958f667e8a5dbd373.
---
 .../composables/useMessageScroller.ts            | 16 +---------------
 1 file changed, 1 insertion(+), 15 deletions(-)

diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
index 242e9c1f08..674ef03888 100644
--- a/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
+++ b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
@@ -15,8 +15,7 @@ const useMessageScroller = (
 ) => {
   const state = reactive({
     height: 0,
-    scrollTop: 0,
-    skipResizeAdjustment: false
+    scrollTop: 0
   })
 
   const onChangeHeight = (payload: ChangeHeightData) => {
@@ -49,11 +48,6 @@ const useMessageScroller = (
       scrollerProps.lastLoadingDirection === 'latest' ||
       scrollerProps.lastLoadingDirection === 'former'
     ) {
-      // 古いメッセージを読み込んですぐはここで高さの調整をしない
-      if (state.skipResizeAdjustment) {
-        return
-      }
-
       const scrollerTop = rootRef.value.getBoundingClientRect().top
       // 視界より上にある要素の高さが変わった場合のみ補正する
       if (payload.top < scrollerTop) {
@@ -104,18 +98,10 @@ const useMessageScroller = (
         }
         //上に追加された時はスクロール位置を変更する。
         if (scrollerProps.lastLoadingDirection === 'former') {
-          // onChangeHeight の調整を一時的に無効化
-          state.skipResizeAdjustment = true
           rootRef.value.scrollTo({
             top: rootRef.value.scrollTop + (newHeight - state.height)
           })
           state.height = newHeight
-          // 十分に DOMが更新されたら無効化を解除
-          requestAnimationFrame(() => {
-            requestAnimationFrame(() => {
-              state.skipResizeAdjustment = false
-            })
-          })
         }
 
         if (scrollerProps.lastLoadingDirection === 'latest') {

From 30099a554bde30ca3a673d7e355287d7ee6b5e26 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Fri, 2 Jan 2026 13:35:15 +0900
Subject: [PATCH 04/19] =?UTF-8?q?refactor:=20=E5=88=9D=E5=9B=9E=E3=83=AC?=
 =?UTF-8?q?=E3=83=B3=E3=83=80=E3=83=AA=E3=83=B3=E3=82=B0=E3=81=AE=E5=88=A4?=
 =?UTF-8?q?=E5=AE=9A=E3=82=92=E3=82=88=E3=82=8A=E6=98=8E=E7=A4=BA=E7=9A=84?=
 =?UTF-8?q?=E3=81=AB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composables/useElementRenderObserver.ts   | 27 ++++++++++++-------
 1 file changed, 17 insertions(+), 10 deletions(-)

diff --git a/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts b/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
index 0a5ff3d990..7f3ae20394 100644
--- a/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
+++ b/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
@@ -27,14 +27,20 @@ const useElementRenderObserver = (
 ) => {
   const route = useRoute()
 
-  let lastHeight = 0
-  let lastBottom = 0
-  let lastTop = 0
+  type State = {
+    height: number
+    bottom: number
+    top: number
+  }
+
+  let prevState: State | null = null
+
   const resizeObserver = new ResizeObserver(entries => {
     // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
     const entry = entries[0]!
     const { height, bottom, top } = entry.target.getBoundingClientRect()
-    if (lastHeight === 0) {
+
+    if (prevState === null) {
       // 初回に高さが変化した場合、初期レンダリング完了とみなす
       // これ以降新規にobserveしないためにwatcherを止める
       stop()
@@ -49,17 +55,17 @@ const useElementRenderObserver = (
     } else {
       emit('changeHeight', {
         id: messageId.value,
-        heightDiff: height - lastHeight,
+        heightDiff: height - prevState.height,
         top,
         bottom,
-        lastTop,
-        lastBottom
+        lastTop: prevState.top,
+        lastBottom: prevState.bottom
       })
     }
-    lastHeight = height
-    lastBottom = bottom
-    lastTop = top
+
+    prevState = { height, bottom, top }
   })
+
   const stop = watchEffect(
     () => {
       if (
@@ -80,6 +86,7 @@ const useElementRenderObserver = (
     // 監視前に高さが変わってしまうのを防止するためにsyncを指定する
     { flush: 'sync' }
   )
+
   watch(
     () => route.path,
     () =>

From 431271ac9eee85d2fcd461740d41756bd0a4a854 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Fri, 2 Jan 2026 16:01:09 +0900
Subject: [PATCH 05/19] =?UTF-8?q?refactor:=20=E5=91=BD=E5=90=8D=E3=81=A8?=
 =?UTF-8?q?=E3=82=B7=E3=82=B0=E3=83=8D=E3=83=81=E3=83=A3=E3=81=AE=E6=94=B9?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/UI/MarkdownContent.vue |  6 +++---
 src/components/UI/SlideDown.vue       | 31 +++++++++++++--------------
 src/lib/basic/timer.ts                | 15 ++++++++++++-
 tests/unit/lib/basic/timer.spec.ts    |  6 +++---
 4 files changed, 35 insertions(+), 23 deletions(-)

diff --git a/src/components/UI/MarkdownContent.vue b/src/components/UI/MarkdownContent.vue
index 2d125db7d4..5e0d23391f 100644
--- a/src/components/UI/MarkdownContent.vue
+++ b/src/components/UI/MarkdownContent.vue
@@ -20,7 +20,7 @@ const contentRef = ref<HTMLElement>()
 
 const foldWrapClass = 'fold-wrap'
 
-const applyFoldCodeBlock = () => {
+const applyFoldableCodeBlock = () => {
   const content = contentRef.value
   if (content === undefined) return
 
@@ -41,12 +41,12 @@ const applyFoldCodeBlock = () => {
 }
 
 onMounted(() => {
-  applyFoldCodeBlock()
+  applyFoldableCodeBlock()
 })
 watch(
   () => props.content,
   () => {
-    applyFoldCodeBlock()
+    applyFoldableCodeBlock()
   },
   {
     flush: 'post'
diff --git a/src/components/UI/SlideDown.vue b/src/components/UI/SlideDown.vue
index 577a5393c4..3f3c6a65be 100644
--- a/src/components/UI/SlideDown.vue
+++ b/src/components/UI/SlideDown.vue
@@ -1,10 +1,10 @@
 <template>
   <transition
     name="slide-vertical"
-    @enter="setScrollHeight"
-    @after-enter="unsetHeight"
-    @before-leave="setCurrentHeight"
-    @leave="unsetHeight"
+    @enter="setScrollHeight($event as HTMLElement)"
+    @leave="unsetHeight($event as HTMLElement)"
+    @after-enter="unsetHeight($event as HTMLElement)"
+    @before-leave="setCurrentHeight($event as HTMLElement)"
   >
     <div v-if="isOpen" :class="$style.wrapper">
       <slot />
@@ -13,26 +13,25 @@
 </template>
 
 <script lang="ts" setup>
-import { rAF } from '/@/lib/basic/timer'
+import { defer } from '/@/lib/basic/timer'
 
 defineProps<{
   isOpen: boolean
 }>()
 
-const setScrollHeight = async ($el: Element) => {
-  // フレームずらさないとscrollHeightが0になるため
-  await rAF()
-  await rAF()
+const setScrollHeight = async ($el: HTMLElement) => {
+  // scrollHeight が 0 にならないようにフレームをずらす
+  await defer()
   setCurrentHeight($el)
 }
-const setCurrentHeight = ($el: Element) => {
-  ;($el as HTMLElement).style.height = `${$el.scrollHeight}px`
+
+const setCurrentHeight = ($el: HTMLElement) => {
+  $el.style.height = `${$el.scrollHeight}px`
 }
-const unsetHeight = async ($el: Element) => {
-  // フレームずらさないと処理がまとめられてheightのセットがされないことにされるため
-  await rAF()
-  await rAF()
-  ;($el as HTMLElement).style.height = null as unknown as string
+const unsetHeight = async ($el: HTMLElement) => {
+  // 処理がまとめられて height のセットがされない場合があるので，フレームをずらす
+  await defer()
+  $el.style.height = null as unknown as string
 }
 </script>
 
diff --git a/src/lib/basic/timer.ts b/src/lib/basic/timer.ts
index 212bc7a926..de8c832a5a 100644
--- a/src/lib/basic/timer.ts
+++ b/src/lib/basic/timer.ts
@@ -1,3 +1,5 @@
+import type { Invocable } from '/@/types/utility'
+
 export const wait = (ms: number) =>
   new Promise<void>(resolve => {
     setTimeout(() => {
@@ -5,7 +7,18 @@ export const wait = (ms: number) =>
     }, ms)
   })
 
-export const rAF = () =>
+export const nextFrame = () =>
   new Promise(resolve => {
     requestAnimationFrame(resolve)
   })
+
+export async function defer(): Promise<void>
+export async function defer<Fn extends Invocable>(
+  callback: Fn
+): Promise<Awaited<ReturnType<Fn>>>
+
+export async function defer(callback?: Invocable) {
+  await nextFrame()
+  await nextFrame()
+  return callback?.()
+}
diff --git a/tests/unit/lib/basic/timer.spec.ts b/tests/unit/lib/basic/timer.spec.ts
index 92ac018ee9..c0fe831bc0 100644
--- a/tests/unit/lib/basic/timer.spec.ts
+++ b/tests/unit/lib/basic/timer.spec.ts
@@ -1,4 +1,4 @@
-import { rAF, wait } from '/@/lib/basic/timer'
+import { nextFrame, wait } from '/@/lib/basic/timer'
 
 describe('wait', () => {
   it('can wait', async () => {
@@ -11,14 +11,14 @@ describe('wait', () => {
   })
 })
 
-describe('rAF', () => {
+describe('nextFrame', () => {
   beforeEach(() => {
     const spy = vi.spyOn(global, 'requestAnimationFrame')
     spy.mockClear()
   })
 
   it('can wait', async () => {
-    const p = rAF()
+    const p = nextFrame()
 
     expect(requestAnimationFrame).toHaveBeenCalledTimes(1)
     expect(requestAnimationFrame).toHaveBeenLastCalledWith(expect.any(Function))

From 406ee008b6ae9e875fab53db4c7d0b5512a37110 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Fri, 2 Jan 2026 16:03:35 +0900
Subject: [PATCH 06/19] =?UTF-8?q?refactor:=20=E3=82=B3=E3=83=BC=E3=83=89?=
 =?UTF-8?q?=E3=83=96=E3=83=AD=E3=83=83=E3=82=AF=E3=81=8C=E5=AD=98=E5=9C=A8?=
 =?UTF-8?q?=E3=81=99=E3=82=8B=E5=A0=B4=E5=90=88=E3=81=AB=E3=82=82=E9=AB=98?=
 =?UTF-8?q?=E3=81=95=E3=82=92=E7=9B=A3=E8=A6=96=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composables/useElementRenderObserver.ts               | 6 ++++--
 src/composables/message/useEmbeddings.ts                  | 8 ++++++--
 2 files changed, 10 insertions(+), 4 deletions(-)

diff --git a/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts b/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
index 7f3ae20394..98eae97cb3 100644
--- a/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
+++ b/src/components/Main/MainView/MessageElement/composables/useElementRenderObserver.ts
@@ -21,6 +21,7 @@ const useElementRenderObserver = (
     quoteMessageIds: readonly MessageId[]
     fileIds: readonly FileId[]
     externalUrls: readonly ExternalUrl[]
+    hasCodeBlock: boolean
   }>,
   emit: ((name: 'entryMessageLoaded', relativePos: number) => void) &
     ((name: 'changeHeight', data: ChangeHeightData) => void)
@@ -72,11 +73,12 @@ const useElementRenderObserver = (
         (unref(isEntryMessage) ||
           embeddingsState.quoteMessageIds.length > 0 ||
           embeddingsState.fileIds.length > 0 ||
-          embeddingsState.externalUrls.length > 0) &&
+          embeddingsState.externalUrls.length > 0 ||
+          embeddingsState.hasCodeBlock) &&
         bodyRef.value
       ) {
         /*
-          引用 / 添付ファイル / 外部URL がある場合か
+          引用 / 添付ファイル / 外部URL / コードブロック がある場合か
           エントリーメッセージは
           高さ監視をする
         */
diff --git a/src/composables/message/useEmbeddings.ts b/src/composables/message/useEmbeddings.ts
index fe822a0256..7f4c5cbf19 100644
--- a/src/composables/message/useEmbeddings.ts
+++ b/src/composables/message/useEmbeddings.ts
@@ -5,9 +5,12 @@ import { useMessagesView } from '/@/store/domain/messagesView'
 import type { MessageId } from '/@/types/entity-ids'
 
 const useEmbeddings = (props: { messageId: MessageId }) => {
-  const { embeddingsMap } = useMessagesView()
+  const { embeddingsMap, renderedContentMap } = useMessagesView()
 
   const embeddings = computed(() => embeddingsMap.value.get(props.messageId))
+  const renderedContent = computed(
+    () => renderedContentMap.value.get(props.messageId) ?? ''
+  )
   const state = reactive({
     fileIds: computed(
       () => embeddings.value?.filter(isFile).map(e => e.id) ?? []
@@ -21,7 +24,8 @@ const useEmbeddings = (props: { messageId: MessageId }) => {
           embeddings.value?.filter(isExternalUrl).map(e => e.url) ?? []
         )
       ].slice(0, 2)
-    )
+    ),
+    hasCodeBlock: computed(() => renderedContent.value.includes('</pre>'))
   })
   return { embeddingsState: state }
 }

From 7efb494cc5063363311fba2505b2c99d4f33f010 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Fri, 2 Jan 2026 15:44:12 +0900
Subject: [PATCH 07/19] =?UTF-8?q?fix:=20`ResizeObserver`=20=E3=81=AE?=
 =?UTF-8?q?=E7=99=BB=E9=8C=B2=E3=82=92=E5=BE=85=E3=81=A3=E3=81=A6=E3=81=8B?=
 =?UTF-8?q?=E3=82=89=E6=8F=8F=E7=94=BB=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessageElement/MessageContents.vue        | 35 ++++++++++---------
 src/components/UI/DeferredRender.vue          | 11 ++++++
 src/components/UI/MarkdownContent.vue         | 16 +++------
 3 files changed, 34 insertions(+), 28 deletions(-)
 create mode 100644 src/components/UI/DeferredRender.vue

diff --git a/src/components/Main/MainView/MessageElement/MessageContents.vue b/src/components/Main/MainView/MessageElement/MessageContents.vue
index 1f3bf65b3b..14ce045c3e 100644
--- a/src/components/Main/MainView/MessageElement/MessageContents.vue
+++ b/src/components/Main/MainView/MessageElement/MessageContents.vue
@@ -16,22 +16,24 @@
         :channel-id="message.channelId"
         @finish-editing="finishEditing"
       />
-      <MessageQuoteList
-        v-if="embeddingsState.quoteMessageIds.length > 0"
-        :class="$style.messageEmbeddingsList"
-        :parent-message-channel-id="message.channelId"
-        :message-ids="embeddingsState.quoteMessageIds"
-      />
-      <MessageFileList
-        v-if="embeddingsState.fileIds.length > 0"
-        :class="$style.messageEmbeddingsList"
-        :channel-id="message.channelId"
-        :file-ids="embeddingsState.fileIds"
-      />
-      <MessageOgpList
-        v-if="embeddingsState.externalUrls.length > 0"
-        :external-urls="embeddingsState.externalUrls"
-      />
+      <DeferredRender>
+        <MessageQuoteList
+          v-if="embeddingsState.quoteMessageIds.length > 0"
+          :class="$style.messageEmbeddingsList"
+          :parent-message-channel-id="message.channelId"
+          :message-ids="embeddingsState.quoteMessageIds"
+        />
+        <MessageFileList
+          v-if="embeddingsState.fileIds.length > 0"
+          :class="$style.messageEmbeddingsList"
+          :channel-id="message.channelId"
+          :file-ids="embeddingsState.fileIds"
+        />
+        <MessageOgpList
+          v-if="embeddingsState.externalUrls.length > 0"
+          :external-urls="embeddingsState.externalUrls"
+        />
+      </DeferredRender>
     </div>
   </div>
 </template>
@@ -39,6 +41,7 @@
 <script lang="ts" setup>
 import { computed } from 'vue'
 
+import DeferredRender from '/@/components/UI/DeferredRender.vue'
 import MarkdownContent from '/@/components/UI/MarkdownContent.vue'
 import UserIcon from '/@/components/UI/UserIcon.vue'
 import useEmbeddings from '/@/composables/message/useEmbeddings'
diff --git a/src/components/UI/DeferredRender.vue b/src/components/UI/DeferredRender.vue
new file mode 100644
index 0000000000..dbe174edef
--- /dev/null
+++ b/src/components/UI/DeferredRender.vue
@@ -0,0 +1,11 @@
+<template>
+  <slot v-if="ready" />
+</template>
+
+<script lang="ts" setup>
+import { computedAsync } from '@vueuse/core'
+
+import { defer } from '/@/lib/basic/timer'
+
+const ready = computedAsync(() => defer(() => true))
+</script>
diff --git a/src/components/UI/MarkdownContent.vue b/src/components/UI/MarkdownContent.vue
index 5e0d23391f..4002a18643 100644
--- a/src/components/UI/MarkdownContent.vue
+++ b/src/components/UI/MarkdownContent.vue
@@ -10,6 +10,8 @@
 <script lang="ts" setup>
 import { createVNode, onMounted, ref, render, watch } from 'vue'
 
+import { defer } from '/@/lib/basic/timer'
+
 import FoldableCodeBlock from './FoldableCodeBlock.vue'
 
 const props = defineProps<{
@@ -40,18 +42,8 @@ const applyFoldableCodeBlock = () => {
   })
 }
 
-onMounted(() => {
-  applyFoldableCodeBlock()
-})
-watch(
-  () => props.content,
-  () => {
-    applyFoldableCodeBlock()
-  },
-  {
-    flush: 'post'
-  }
-)
+onMounted(() => defer(applyFoldableCodeBlock))
+watch(() => props.content, applyFoldableCodeBlock, { flush: 'post' })
 </script>
 
 <style lang="scss" module>

From 783c1b91df981e3716a2636c462286cb7ebba55d Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Fri, 2 Jan 2026 16:39:53 +0900
Subject: [PATCH 08/19] =?UTF-8?q?tests:=20`timer.ts`=20=E3=81=AE=E3=83=86?=
 =?UTF-8?q?=E3=82=B9=E3=83=88=E3=82=92=E8=BF=BD=E5=8A=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 tests/unit/lib/basic/timer.spec.ts | 148 +++++++++++++++++++++++++++--
 1 file changed, 140 insertions(+), 8 deletions(-)

diff --git a/tests/unit/lib/basic/timer.spec.ts b/tests/unit/lib/basic/timer.spec.ts
index c0fe831bc0..f8f47ffcbc 100644
--- a/tests/unit/lib/basic/timer.spec.ts
+++ b/tests/unit/lib/basic/timer.spec.ts
@@ -1,23 +1,53 @@
-import { nextFrame, wait } from '/@/lib/basic/timer'
+import { defer, nextFrame, wait } from '/@/lib/basic/timer'
 
 describe('wait', () => {
-  it('can wait', async () => {
+  it('waits for specified milliseconds and resolves to undefined', async () => {
     const before = Date.now()
-    const p = wait(100)
-    await expect(p).resolves.toBeUndefined()
+    const result = await wait(100)
     const after = Date.now()
 
-    expect(after - before).toBeGreaterThanOrEqual(100 - 1) // 精度の問題か99になることがある
+    expect(result).toBeUndefined()
+    expect(after - before).toBeGreaterThanOrEqual(100 - 1)
+  })
+
+  it('resolves immediately with 0ms', async () => {
+    const before = Date.now()
+    const result = await wait(0)
+    const after = Date.now()
+
+    expect(result).toBeUndefined()
+    expect(after - before).toBeLessThan(50)
+  })
+
+  it('can be awaited multiple times sequentially', async () => {
+    const before = Date.now()
+    await wait(50)
+    await wait(50)
+    const after = Date.now()
+
+    expect(after - before).toBeGreaterThanOrEqual(100 - 1)
+  })
+
+  it('can run concurrently with Promise.all', async () => {
+    const before = Date.now()
+    await Promise.all([wait(50), wait(50), wait(50)])
+    const after = Date.now()
+
+    expect(after - before).toBeGreaterThanOrEqual(50 - 1)
+    expect(after - before).toBeLessThan(150)
   })
 })
 
 describe('nextFrame', () => {
   beforeEach(() => {
-    const spy = vi.spyOn(global, 'requestAnimationFrame')
-    spy.mockClear()
+    vi.spyOn(global, 'requestAnimationFrame').mockClear()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
   })
 
-  it('can wait', async () => {
+  it('calls requestAnimationFrame', async () => {
     const p = nextFrame()
 
     expect(requestAnimationFrame).toHaveBeenCalledTimes(1)
@@ -25,4 +55,106 @@ describe('nextFrame', () => {
 
     await expect(p).resolves.toEqual(expect.any(Number))
   })
+
+  it('resolves with timestamp from requestAnimationFrame', async () => {
+    const result = await nextFrame()
+
+    expect(typeof result).toBe('number')
+  })
+
+  it('can be called multiple times sequentially', async () => {
+    await nextFrame()
+    await nextFrame()
+
+    expect(requestAnimationFrame).toHaveBeenCalledTimes(2)
+  })
+})
+
+describe('defer', () => {
+  beforeEach(() => {
+    vi.spyOn(global, 'requestAnimationFrame').mockClear()
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('returns undefined when called without callback', async () => {
+    await expect(defer()).resolves.toBeUndefined()
+    expect(requestAnimationFrame).toHaveBeenCalledTimes(2)
+  })
+
+  it('returns callback result when called with callback', async () => {
+    const callback = vi.fn(() => 'result')
+
+    await expect(defer(callback)).resolves.toBe('result')
+    expect(callback).toHaveBeenCalledTimes(1)
+    expect(requestAnimationFrame).toHaveBeenCalledTimes(2)
+  })
+
+  it('awaits and returns async callback result', async () => {
+    const callback = vi.fn(async () => {
+      await wait(10)
+      return 'async result'
+    })
+
+    await expect(defer(callback)).resolves.toBe('async result')
+    expect(callback).toHaveBeenCalledTimes(1)
+  })
+
+  it('waits for two frames before executing callback', async () => {
+    const callback = vi.fn(() => 42)
+
+    await defer(callback)
+
+    expect(requestAnimationFrame).toHaveBeenCalledTimes(2)
+    expect(callback).toHaveBeenCalledTimes(1)
+  })
+
+  it('executes callback after frames, not before', async () => {
+    let executed = false
+    const callback = () => {
+      executed = true
+      return 'done'
+    }
+
+    const promise = defer(callback)
+
+    await promise
+    expect(executed).toBe(true)
+  })
+
+  it('returns different types from callback', async () => {
+    expect(await defer(() => 123)).toBe(123)
+    expect(await defer(() => 'string')).toBe('string')
+    expect(await defer(() => ({ key: 'value' }))).toEqual({ key: 'value' })
+    expect(await defer(() => [1, 2, 3])).toEqual([1, 2, 3])
+    expect(await defer(() => null)).toBeNull()
+  })
+
+  it('handles callback that returns a promise', async () => {
+    const asyncCallback = async () => {
+      return Promise.resolve('resolved value')
+    }
+
+    await expect(defer(asyncCallback)).resolves.toBe('resolved value')
+  })
+
+  it('propagates errors from callback', async () => {
+    const errorCallback = () => {
+      throw new Error('callback error')
+    }
+
+    await expect(defer(errorCallback)).rejects.toThrow('callback error')
+  })
+
+  it('propagates errors from async callback', async () => {
+    const asyncErrorCallback = async () => {
+      throw new Error('async callback error')
+    }
+
+    await expect(defer(asyncErrorCallback)).rejects.toThrow(
+      'async callback error'
+    )
+  })
 })

From d2a9f35920d390f02045da298b7cfc62207ef87a Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Sat, 3 Jan 2026 10:49:39 +0900
Subject: [PATCH 09/19] =?UTF-8?q?fix:=20=E5=88=9D=E5=9B=9E=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E6=99=82=E3=81=AB=E3=82=B9=E3=82=AF=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=83=AB=E4=BD=8D=E7=BD=AE=E3=81=8C=E6=9C=AB=E5=B0=BE?=
 =?UTF-8?q?=E3=81=8B=E3=82=89=E5=B0=91=E3=81=97=E4=B8=8A=E3=81=AB=E3=82=BA?=
 =?UTF-8?q?=E3=83=AC=E3=82=8B=E4=B8=8D=E5=85=B7=E5=90=88=E3=82=92=E4=BF=AE?=
 =?UTF-8?q?=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../composables/useMessageScroller.ts         | 36 +++++++++++++------
 1 file changed, 25 insertions(+), 11 deletions(-)

diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
index 674ef03888..9cc0fb7a29 100644
--- a/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
+++ b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
@@ -1,27 +1,26 @@
-import type { Ref } from 'vue'
+import type { Reactive, Ref } from 'vue'
 import { reactive, watch } from 'vue'
 
 import type { ChangeHeightData } from '/@/components/Main/MainView/MessageElement/composables/useElementRenderObserver'
 import type { LoadingDirection } from '/@/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher'
+import { nextFrame } from '/@/lib/basic/timer'
 import type { MessageId } from '/@/types/entity-ids'
 
 const useMessageScroller = (
   rootRef: Ref<HTMLElement | null>,
-  scrollerProps: {
+  scrollerProps: Reactive<{
     messageIds: MessageId[]
     lastLoadingDirection: LoadingDirection
     entryMessageId?: MessageId
-  }
+  }>
 ) => {
   const state = reactive({
     height: 0,
     scrollTop: 0
   })
 
-  const onChangeHeight = (payload: ChangeHeightData) => {
-    if (!rootRef.value) {
-      return
-    }
+  const onChangeHeight = async (payload: ChangeHeightData) => {
+    if (!rootRef.value) return
 
     if (
       scrollerProps.lastLoadingDirection === 'around' &&
@@ -49,20 +48,33 @@ const useMessageScroller = (
       scrollerProps.lastLoadingDirection === 'former'
     ) {
       const scrollerTop = rootRef.value.getBoundingClientRect().top
+
       // 視界より上にある要素の高さが変わった場合のみ補正する
       if (payload.top < scrollerTop) {
         rootRef.value.scrollTo({
           top: rootRef.value.scrollTop + payload.heightDiff
         })
       }
+
+      const scrollBottom = rootRef.value.scrollTop + rootRef.value.clientHeight
+
+      // 末尾付近を閲覧しているときは，末尾を保つ
+      if (state.height - scrollBottom <= 50) {
+        if (!rootRef.value) return
+
+        // 複数の onChangeHeight が同フレーム内に複数回呼ばれる場合があるので，
+        // すべての更新を待ってからスクロールする
+        await defer()
+        rootRef.value.scrollTo({ top: rootRef.value.scrollHeight })
+      }
+
       state.height = rootRef.value.scrollHeight
     }
   }
 
   const onEntryMessageLoaded = (relativePos: number) => {
-    if (!rootRef.value) {
-      return
-    }
+    if (!rootRef.value) return
+
     const rootHeight = rootRef.value.getBoundingClientRect().height
     rootRef.value.scrollTo({ top: relativePos - rootHeight / 3 })
   }
@@ -94,12 +106,13 @@ const useMessageScroller = (
             rootRef.value.scrollTo({ top: newHeight })
           }
           state.height = newHeight
+
           return
         }
         //上に追加された時はスクロール位置を変更する。
         if (scrollerProps.lastLoadingDirection === 'former') {
           rootRef.value.scrollTo({
-            top: rootRef.value.scrollTop + (newHeight - state.height)
+            top: rootRef.value.scrollTop + newHeight - state.height
           })
           state.height = newHeight
         }
@@ -109,6 +122,7 @@ const useMessageScroller = (
           rootRef.value.scrollTo({
             top: newHeight
           })
+
           state.height = newHeight
         }
       } else state.height = newHeight

From 48a8056981a5aefe04fe28d02b3d0509fe67290c Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Sat, 3 Jan 2026 12:49:57 +0900
Subject: [PATCH 10/19] =?UTF-8?q?feat:=20=E5=88=9D=E5=9B=9E=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=83=89=E6=99=82=E3=81=AB=E3=82=B9=E3=82=B1=E3=83=AB?=
 =?UTF-8?q?=E3=83=88=E3=83=B3=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessagesScroller/MessagesScroller.vue     |  86 ++++++++-----
 .../MessagesScroller/MessagesSkeleton.vue     | 117 ++++++++++++++++++
 .../composables/useMessageScroller.ts         |  15 ++-
 3 files changed, 187 insertions(+), 31 deletions(-)
 create mode 100644 src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index bb58394326..ef42fc9932 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -1,34 +1,37 @@
 <template>
-  <div
-    ref="rootRef"
-    :class="$style.root"
-    @scroll.passive="
-      () => {
-        handleScroll()
-        emit('scrollPassive')
-      }
-    "
-    @click="onClick"
-  >
+  <div :class="$style.container">
+    <MessagesSkeleton v-if="!ready" :class="$style.skeleton" />
     <div
-      v-if="stampsMapFetched"
-      :class="$style.viewport"
-      data-testid="channel-viewport"
+      ref="rootRef"
+      :class="[$style.root, !ready && $style.hidden]"
+      @scroll.passive="
+        () => {
+          handleScroll()
+          emit('scrollPassive')
+        }
+      "
+      @click="onClick"
     >
-      <MessagesScrollerSeparator
-        v-if="isReachedEnd"
-        title="これ以上メッセージはありません"
-        :class="$style.noMoreSeparator"
-      />
-      <template v-for="messageId in messageIds" :key="messageId">
-        <slot
-          :message-id="messageId"
-          :on-change-height="onChangeHeight"
-          :on-entry-message-loaded="onEntryMessageLoaded"
+      <div
+        v-if="stampsMapFetched"
+        :class="$style.viewport"
+        data-testid="channel-viewport"
+      >
+        <MessagesScrollerSeparator
+          v-if="isReachedEnd"
+          title="これ以上メッセージはありません"
+          :class="$style.noMoreSeparator"
         />
-      </template>
+        <template v-for="messageId in messageIds" :key="messageId">
+          <slot
+            :message-id="messageId"
+            :on-change-height="onChangeHeight"
+            :on-entry-message-loaded="onEntryMessageLoaded"
+          />
+        </template>
+      </div>
+      <div :class="$style.bottomSpacer" />
     </div>
-    <div :class="$style.bottomSpacer" />
   </div>
 </template>
 
@@ -48,6 +51,7 @@ import { useStampsStore } from '/@/store/entities/stamps'
 import { useMainViewStore } from '/@/store/ui/mainView'
 import type { MessageId } from '/@/types/entity-ids'
 
+import MessagesSkeleton from './MessagesSkeleton.vue'
 import useMessageScroller from './composables/useMessageScroller'
 import type { LoadingDirection } from './composables/useMessagesFetcher'
 
@@ -163,10 +167,8 @@ const { stampsMapFetched } = useStampsStore()
 
 const rootRef = shallowRef<HTMLElement | null>(null)
 
-const { onChangeHeight, onEntryMessageLoaded, state } = useMessageScroller(
-  rootRef,
-  props
-)
+const { onChangeHeight, onEntryMessageLoaded, ready, state } =
+  useMessageScroller(rootRef, props)
 
 // 初期スクロール位置を設定
 state.scrollTop = lastScrollPosition.value
@@ -228,6 +230,12 @@ useScrollRestoration(rootRef, state)
 </script>
 
 <style lang="scss" module>
+.container {
+  height: 100%;
+  position: relative;
+  overflow-y: auto;
+}
+
 .root {
   height: 100%;
   overflow-y: scroll;
@@ -263,4 +271,22 @@ useScrollRestoration(rootRef, state)
 .noMoreSeparator {
   @include color-ui-secondary;
 }
+
+.skeleton {
+  position: absolute;
+  inset: 0;
+  opacity: 1;
+  visibility: visible;
+  transition: opacity 0.3s ease-in;
+  margin-bottom: 24px;
+
+  &.hidden {
+    opacity: 0;
+    visibility: hidden;
+  }
+}
+
+.hidden {
+  visibility: hidden;
+}
 </style>
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue b/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
new file mode 100644
index 0000000000..c555ece077
--- /dev/null
+++ b/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
@@ -0,0 +1,117 @@
+<template>
+  <div :class="$style.container">
+    <div
+      v-for="i in 7"
+      :key="i"
+      :class="$style.messageItem"
+      :style="{ animationDelay: `${(7 - i) * 30}ms` }"
+    >
+      <div :class="$style.avatar" />
+      <div :class="$style.content">
+        <div :class="$style.header">
+          <div :class="[$style.skeleton, $style.name]" />
+          <div :class="[$style.skeleton, $style.time]" />
+        </div>
+        <div :class="[$style.skeleton, $style.text, $style.textLong]" />
+        <div :class="[$style.skeleton, $style.text, $style.textShort]" />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" module>
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  padding: 12px 16px;
+  height: 100%;
+  justify-content: flex-end;
+}
+
+.messageItem {
+  display: flex;
+  padding-block: 8px;
+  gap: 8px;
+  animation: fadeIn 0.3s ease-in-out forwards;
+  opacity: 0;
+}
+
+.avatar {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  background: var(--specific-skeleton-background, rgba(128, 128, 128, 0.15));
+  flex-shrink: 0;
+}
+
+.content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  min-width: 0;
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.skeleton {
+  background: linear-gradient(
+    90deg,
+    var(--specific-skeleton-background, rgba(128, 128, 128, 0.15)) 25%,
+    var(--specific-skeleton-highlight, rgba(128, 128, 128, 0.25)) 50%,
+    var(--specific-skeleton-background, rgba(128, 128, 128, 0.15)) 75%
+  );
+  background-size: 200% 100%;
+  animation: shimmer 1.5s infinite;
+  border-radius: 4px;
+}
+
+.name {
+  width: 100px;
+  height: 16px;
+}
+
+.time {
+  width: 50px;
+  height: 12px;
+}
+
+.text {
+  height: 14px;
+}
+
+.textLong {
+  width: 80%;
+}
+
+.textShort {
+  width: 50%;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(10px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+</style>
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
index 9cc0fb7a29..00f0bc7110 100644
--- a/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
+++ b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
@@ -1,9 +1,10 @@
 import type { Reactive, Ref } from 'vue'
 import { reactive, watch } from 'vue'
+import { ref } from 'vue'
 
 import type { ChangeHeightData } from '/@/components/Main/MainView/MessageElement/composables/useElementRenderObserver'
 import type { LoadingDirection } from '/@/components/Main/MainView/MessagesScroller/composables/useMessagesFetcher'
-import { nextFrame } from '/@/lib/basic/timer'
+import { defer, wait } from '/@/lib/basic/timer'
 import type { MessageId } from '/@/types/entity-ids'
 
 const useMessageScroller = (
@@ -14,6 +15,8 @@ const useMessageScroller = (
     entryMessageId?: MessageId
   }>
 ) => {
+  const ready = ref(false)
+
   const state = reactive({
     height: 0,
     scrollTop: 0
@@ -118,12 +121,21 @@ const useMessageScroller = (
         }
 
         if (scrollerProps.lastLoadingDirection === 'latest') {
+          ready.value = false
+
           // チャンネルを移動したとき、
           rootRef.value.scrollTo({
             top: newHeight
           })
 
           state.height = newHeight
+
+          defer(async () => {
+            await defer()
+            await wait(400)
+
+            ready.value = true
+          })
         }
       } else state.height = newHeight
     },
@@ -133,6 +145,7 @@ const useMessageScroller = (
   return {
     onChangeHeight,
     onEntryMessageLoaded,
+    ready,
     state
   }
 }

From d0d38145becaae36a8f69771d81600699031520c Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Sat, 3 Jan 2026 12:59:14 +0900
Subject: [PATCH 11/19] =?UTF-8?q?feat:=20=E3=82=B9=E3=82=B1=E3=83=AB?=
 =?UTF-8?q?=E3=83=88=E3=83=B3=E3=82=92=E3=83=AA=E3=83=83=E3=83=81=E3=81=AB?=
 =?UTF-8?q?=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessagesScroller/MessagesSkeleton.vue     | 122 +++++++++++++++---
 1 file changed, 104 insertions(+), 18 deletions(-)

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue b/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
index c555ece077..c7c66c8b6a 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
@@ -1,25 +1,66 @@
 <template>
   <div :class="$style.container">
     <div
-      v-for="i in 7"
+      v-for="(item, i) in items"
       :key="i"
       :class="$style.messageItem"
-      :style="{ animationDelay: `${(7 - i) * 30}ms` }"
+      :style="{ animationDelay: `${(items.length - i) * 30}ms` }"
     >
       <div :class="$style.avatar" />
       <div :class="$style.content">
         <div :class="$style.header">
           <div :class="[$style.skeleton, $style.name]" />
+          <div :class="[$style.skeleton, $style.badge]" />
+          <div :class="[$style.skeleton, $style.id]" />
           <div :class="[$style.skeleton, $style.time]" />
         </div>
-        <div :class="[$style.skeleton, $style.text, $style.textLong]" />
-        <div :class="[$style.skeleton, $style.text, $style.textShort]" />
+        <div :class="$style.body">
+          <div
+            v-for="(width, j) in item.lines"
+            :key="j"
+            :class="[$style.skeleton, $style.text]"
+            :style="{ width: `${width}%` }"
+          />
+        </div>
+        <div v-if="item.hasQuote" :class="$style.quote">
+          <div :class="[$style.skeleton, $style.text]" style="width: 30%" />
+          <div :class="[$style.skeleton, $style.text]" style="width: 60%" />
+        </div>
+        <div v-if="item.hasImage" :class="[$style.skeleton, $style.image]" />
+        <div v-if="item.hasFile" :class="[$style.skeleton, $style.file]" />
+        <div v-if="item.stamps > 0" :class="$style.stamps">
+          <div
+            v-for="j in item.stamps"
+            :key="j"
+            :class="[$style.skeleton, $style.stampItem]"
+          />
+        </div>
       </div>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts" setup>
+const props = withDefaults(defineProps<{ count?: number }>(), { count: 16 })
+
+const generateRandomMessage = () => {
+  const lines = []
+  const lineCount = Math.floor(Math.random() * 3) + 1
+  for (let i = 0; i < lineCount; i++) {
+    lines.push(Math.floor(Math.random() * 40) + 40)
+  }
+
+  return {
+    lines,
+    hasQuote: Math.random() < 0.1,
+    hasImage: Math.random() < 0.1,
+    hasFile: Math.random() < 0.05,
+    stamps: Math.random() < 0.3 ? Math.floor(Math.random() * 5) + 1 : 0
+  }
+}
+
+const items = Array.from({ length: props.count }, generateRandomMessage)
+</script>
 
 <style lang="scss" module>
 .container {
@@ -29,12 +70,13 @@
   padding: 12px 16px;
   height: 100%;
   justify-content: flex-end;
+  overflow: hidden;
 }
 
 .messageItem {
   display: flex;
-  padding-block: 8px;
-  gap: 8px;
+  padding-block: 4px;
+  gap: 16px;
   animation: fadeIn 0.3s ease-in-out forwards;
   opacity: 0;
 }
@@ -51,7 +93,7 @@
   flex: 1;
   display: flex;
   flex-direction: column;
-  gap: 8px;
+  gap: 4px;
   min-width: 0;
 }
 
@@ -59,6 +101,47 @@
   display: flex;
   align-items: center;
   gap: 8px;
+  margin-bottom: 4px;
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.quote {
+  border-left: 3px solid
+    var(--specific-skeleton-background, rgba(128, 128, 128, 0.15));
+  padding-left: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  margin-block: 4px;
+}
+
+.image {
+  width: min(80%, 300px);
+  aspect-ratio: 16/9;
+  margin-block: 4px;
+}
+
+.file {
+  width: min(100%, 360px);
+  height: 48px;
+  margin-block: 4px;
+}
+
+.stamps {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 4px;
+  margin-top: 4px;
+}
+
+.stampItem {
+  width: 48px;
+  height: 24px;
 }
 
 .skeleton {
@@ -74,25 +157,28 @@
 }
 
 .name {
-  width: 100px;
-  height: 16px;
+  width: 120px;
+  height: 18px;
 }
 
-.time {
-  width: 50px;
-  height: 12px;
+.badge {
+  width: 28px;
+  height: 18px;
+  border-radius: 4px;
 }
 
-.text {
+.id {
+  width: 60px;
   height: 14px;
 }
 
-.textLong {
-  width: 80%;
+.time {
+  width: 50px;
+  height: 14px;
 }
 
-.textShort {
-  width: 50%;
+.text {
+  height: 14px;
 }
 
 @keyframes shimmer {

From b6904d0eb293bca09b33989d95f27e9dec5891cf Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Sat, 3 Jan 2026 13:54:33 +0900
Subject: [PATCH 12/19] =?UTF-8?q?feat:=20=E3=82=B9=E3=82=AF=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=83=AB=E9=80=9F=E5=BA=A6=E3=81=AB=E5=BF=9C=E3=81=98?=
 =?UTF-8?q?=E3=81=A6=E9=96=BE=E5=80=A4=E3=82=92=E8=AA=BF=E6=95=B4=E3=81=99?=
 =?UTF-8?q?=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessagesScroller/MessagesScroller.vue     | 56 ++++++++++++++++++-
 1 file changed, 53 insertions(+), 3 deletions(-)

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index ef42fc9932..9846592372 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -59,7 +59,51 @@ export interface MessageScrollerInstance extends ComponentPublicInstance {
   $el: HTMLDivElement
 }
 
-const LOAD_MORE_THRESHOLD = 10
+const MIN_THRESHOLD = 500 // 最小の閾値
+const THRESHOLD_INCREMENT = 1000 // 端に到達するたびに増加させる閾値
+const DECAY_PER_SECOND = 0.6 // 一秒あたりの減衰率
+
+/**
+ * 端に到達するたびに閾値を増加させ、時間経過で減衰する
+ */
+const useDynamicLoadThreshold = (rootRef: Ref<HTMLElement | null>) => {
+  let currentThreshold = MIN_THRESHOLD
+  let lastTime = performance.now()
+  let wasNearEdge = false
+
+  const getThreshold = () => currentThreshold
+
+  const update = () => {
+    const now = performance.now()
+    const deltaSeconds = (now - lastTime) / 1000
+    lastTime = now
+
+    if (!rootRef.value) return
+
+    const { scrollTop, scrollHeight, clientHeight } = rootRef.value
+    const scrollBottom = scrollHeight - scrollTop - clientHeight
+
+    // 端に近いかどうか判定
+    const isNearEdge =
+      scrollTop < currentThreshold || scrollBottom < currentThreshold
+
+    // 端に到達したら閾値を増やす
+    if (isNearEdge && !wasNearEdge) {
+      currentThreshold += THRESHOLD_INCREMENT
+    } else {
+      // 時間減衰を適用
+      const decayFactor = Math.pow(DECAY_PER_SECOND, deltaSeconds)
+      currentThreshold = Math.max(
+        MIN_THRESHOLD,
+        MIN_THRESHOLD + (currentThreshold - MIN_THRESHOLD) * decayFactor
+      )
+    }
+
+    wasNearEdge = isNearEdge
+  }
+
+  return { getThreshold, update }
+}
 
 type HTMLElementTargetMouseEvent = MouseEvent & { target: HTMLElement }
 
@@ -197,17 +241,23 @@ watch(
   }
 )
 
+const { getThreshold, update: updateThreshold } =
+  useDynamicLoadThreshold(rootRef)
+
 const requestLoadMessages = () => {
   if (!rootRef.value) return
   const { clientHeight, scrollHeight, scrollTop } = rootRef.value
   state.scrollTop = scrollTop
 
+  updateThreshold()
+  const threshold = getThreshold()
+
   if (props.isLoading) return
-  if (state.scrollTop < LOAD_MORE_THRESHOLD && !props.isReachedEnd) {
+  if (state.scrollTop < threshold && !props.isReachedEnd) {
     emit('requestLoadFormer')
   }
   if (
-    scrollHeight - state.scrollTop - clientHeight < LOAD_MORE_THRESHOLD &&
+    scrollHeight - state.scrollTop - clientHeight < threshold &&
     !props.isReachedLatest
   ) {
     emit('requestLoadLatter')

From ef27ab4d5d73cac0dc112408cf829fc70cbdf6d1 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Sat, 3 Jan 2026 14:40:00 +0900
Subject: [PATCH 13/19] =?UTF-8?q?feat:=20=E3=82=AA=E3=83=BC=E3=83=90?=
 =?UTF-8?q?=E3=83=BC=E3=82=B9=E3=82=AF=E3=83=AD=E3=83=BC=E3=83=AB=E6=99=82?=
 =?UTF-8?q?=E3=81=AB=E3=82=82=E3=82=B9=E3=82=B1=E3=83=AB=E3=83=88=E3=83=B3?=
 =?UTF-8?q?=E3=82=92=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessagesScroller/MessagesScroller.vue     | 75 +++++++++++++------
 .../MessagesScroller/MessagesSkeleton.vue     | 26 +++++--
 2 files changed, 74 insertions(+), 27 deletions(-)

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index 9846592372..110f42083c 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -17,6 +17,12 @@
         :class="$style.viewport"
         data-testid="channel-viewport"
       >
+        <MessagesSkeleton
+          v-if="!isReachedEnd"
+          ref="topSkeletonRef"
+          :count="8"
+          :class="$style.edgeSkeleton"
+        />
         <MessagesScrollerSeparator
           v-if="isReachedEnd"
           title="これ以上メッセージはありません"
@@ -29,6 +35,13 @@
             :on-entry-message-loaded="onEntryMessageLoaded"
           />
         </template>
+        <MessagesSkeleton
+          v-if="!isReachedLatest"
+          ref="bottomSkeletonRef"
+          reversed
+          :count="8"
+          :class="$style.edgeSkeleton"
+        />
       </div>
       <div :class="$style.bottomSpacer" />
     </div>
@@ -40,7 +53,7 @@ import type { ComponentPublicInstance, Ref } from 'vue'
 import { nextTick, onMounted, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import { useEventListener } from '@vueuse/core'
+import { useEventListener, useResizeObserver } from '@vueuse/core'
 import { throttle } from 'throttle-debounce'
 
 import { useOpenLink } from '/@/composables/useOpenLink'
@@ -66,26 +79,20 @@ const DECAY_PER_SECOND = 0.6 // 一秒あたりの減衰率
 /**
  * 端に到達するたびに閾値を増加させ、時間経過で減衰する
  */
-const useDynamicLoadThreshold = (rootRef: Ref<HTMLElement | null>) => {
+const useDynamicLoadThreshold = () => {
   let currentThreshold = MIN_THRESHOLD
   let lastTime = performance.now()
   let wasNearEdge = false
 
   const getThreshold = () => currentThreshold
 
-  const update = () => {
+  const update = (top: number, bottom: number) => {
     const now = performance.now()
     const deltaSeconds = (now - lastTime) / 1000
     lastTime = now
 
-    if (!rootRef.value) return
-
-    const { scrollTop, scrollHeight, clientHeight } = rootRef.value
-    const scrollBottom = scrollHeight - scrollTop - clientHeight
-
     // 端に近いかどうか判定
-    const isNearEdge =
-      scrollTop < currentThreshold || scrollBottom < currentThreshold
+    const isNearEdge = top < currentThreshold || bottom < currentThreshold
 
     // 端に到達したら閾値を増やす
     if (isNearEdge && !wasNearEdge) {
@@ -210,6 +217,26 @@ const { lastScrollPosition } = useMainViewStore()
 const { stampsMapFetched } = useStampsStore()
 
 const rootRef = shallowRef<HTMLElement | null>(null)
+const topSkeletonRef = shallowRef<ComponentPublicInstance | null>(null)
+const bottomSkeletonRef = shallowRef<ComponentPublicInstance | null>(null)
+
+// スケルトンの高さをキャッシュ（getBoundingClientRectの毎回呼び出しを回避）
+const topSkeletonHeight = shallowRef(0)
+const bottomSkeletonHeight = shallowRef(0)
+
+// ResizeObserverでスケルトン高さを監視
+useResizeObserver(
+  () => topSkeletonRef.value?.$el,
+  entries => {
+    topSkeletonHeight.value = entries[0]?.contentRect.height ?? 0
+  }
+)
+useResizeObserver(
+  () => bottomSkeletonRef.value?.$el,
+  entries => {
+    bottomSkeletonHeight.value = entries[0]?.contentRect.height ?? 0
+  }
+)
 
 const { onChangeHeight, onEntryMessageLoaded, ready, state } =
   useMessageScroller(rootRef, props)
@@ -241,30 +268,32 @@ watch(
   }
 )
 
-const { getThreshold, update: updateThreshold } =
-  useDynamicLoadThreshold(rootRef)
+const { getThreshold, update: updateThreshold } = useDynamicLoadThreshold()
 
 const requestLoadMessages = () => {
   if (!rootRef.value) return
-  const { clientHeight, scrollHeight, scrollTop } = rootRef.value
-  state.scrollTop = scrollTop
+  state.scrollTop = rootRef.value.scrollTop
+
+  const top = rootRef.value.scrollTop - topSkeletonHeight.value
+  const bottom =
+    rootRef.value.scrollHeight -
+    (rootRef.value.scrollTop +
+      rootRef.value.clientHeight +
+      bottomSkeletonHeight.value)
 
-  updateThreshold()
+  updateThreshold(top, bottom)
   const threshold = getThreshold()
 
   if (props.isLoading) return
-  if (state.scrollTop < threshold && !props.isReachedEnd) {
+  if (top < threshold && !props.isReachedEnd) {
     emit('requestLoadFormer')
   }
-  if (
-    scrollHeight - state.scrollTop - clientHeight < threshold &&
-    !props.isReachedLatest
-  ) {
+  if (bottom < threshold && !props.isReachedLatest) {
     emit('requestLoadLatter')
   }
 }
 
-const handleScroll = throttle(17, requestLoadMessages)
+const handleScroll = throttle(64, requestLoadMessages)
 
 const visibilitychangeListener = () => {
   if (document.visibilityState === 'visible') {
@@ -339,4 +368,8 @@ useScrollRestoration(rootRef, state)
 .hidden {
   visibility: hidden;
 }
+
+.edgeSkeleton {
+  flex-shrink: 0;
+}
 </style>
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue b/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
index c7c66c8b6a..695ccebfdf 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
@@ -1,10 +1,10 @@
 <template>
-  <div :class="$style.container">
+  <div :class="[$style.container, props.reversed && $style.reversed]">
     <div
       v-for="(item, i) in items"
       :key="i"
       :class="$style.messageItem"
-      :style="{ animationDelay: `${(items.length - i) * 30}ms` }"
+      :style="{ animationDelay: `${i * 30}ms` }"
     >
       <div :class="$style.avatar" />
       <div :class="$style.content">
@@ -41,7 +41,16 @@
 </template>
 
 <script lang="ts" setup>
-const props = withDefaults(defineProps<{ count?: number }>(), { count: 16 })
+const props = withDefaults(
+  defineProps<{
+    count?: number
+    reversed?: boolean
+  }>(),
+  {
+    count: 16,
+    reversed: false
+  }
+)
 
 const generateRandomMessage = () => {
   const lines = []
@@ -65,12 +74,17 @@ const items = Array.from({ length: props.count }, generateRandomMessage)
 <style lang="scss" module>
 .container {
   display: flex;
-  flex-direction: column;
   gap: 16px;
   padding: 12px 16px;
-  height: 100%;
-  justify-content: flex-end;
   overflow: hidden;
+
+  flex-direction: column-reverse;
+  justify-content: flex-start;
+
+  &.reversed {
+    flex-direction: column;
+    justify-content: flex-end;
+  }
 }
 
 .messageItem {

From 8b7c1784bcada15971872f480f2c650219ecd1da Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Sat, 3 Jan 2026 17:52:47 +0900
Subject: [PATCH 14/19] =?UTF-8?q?fix:=20ref=20=E3=81=AE=20fallthrough=20?=
 =?UTF-8?q?=E5=85=88=E3=81=8C=E5=A4=89=E3=82=8F=E3=81=A3=E3=81=A6=E3=81=84?=
 =?UTF-8?q?=E3=81=9F=E3=81=AE=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../ChannelViewContent/ChannelViewContentMain.vue         | 4 ++--
 .../Main/MainView/MessagesScroller/MessagesScroller.vue   | 8 +++++---
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue b/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
index 87d3508a33..b98b93b8c3 100644
--- a/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
+++ b/src/components/Main/MainView/ChannelView/ChannelViewContent/ChannelViewContentMain.vue
@@ -137,7 +137,7 @@ const toNewMessage = () => {
     }
   }
 
-  const element = unrefElement(scrollerRef)
+  const element = unrefElement(scrollerRef.value?.rootRef)
   if (!element) return
 
   element.scrollTo({
@@ -146,7 +146,7 @@ const toNewMessage = () => {
 }
 
 const handleScroll = () => {
-  const element = unrefElement(scrollerRef)
+  const element = unrefElement(scrollerRef.value?.rootRef)
   if (!element || isLoading.value) return
   const { scrollTop, scrollHeight, clientHeight } = element
   showToNewMessageButton.value = scrollHeight - 2 * clientHeight > scrollTop
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index 110f42083c..c65301f7fa 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -69,7 +69,7 @@ import useMessageScroller from './composables/useMessageScroller'
 import type { LoadingDirection } from './composables/useMessagesFetcher'
 
 export interface MessageScrollerInstance extends ComponentPublicInstance {
-  $el: HTMLDivElement
+  rootRef: HTMLDivElement
 }
 
 const MIN_THRESHOLD = 500 // 最小の閾値
@@ -306,19 +306,21 @@ useEventListener(document, 'visibilitychange', visibilitychangeListener)
 
 const { onClick } = useMarkdownInternalHandler()
 useScrollRestoration(rootRef, state)
+
+defineExpose({ rootRef })
 </script>
 
 <style lang="scss" module>
 .container {
   height: 100%;
   position: relative;
-  overflow-y: auto;
+  overflow-y: hidden;
+  padding: 12px 0;
 }
 
 .root {
   height: 100%;
   overflow-y: scroll;
-  padding: 12px 0;
   backface-visibility: hidden;
   contain: var(--contain-strict);
   // overflow-anchorはデフォルトでautoだが、Safariが対応していないので、

From 342f8369788a4e2048744e3cbdb59240f6cc92bf Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Sat, 3 Jan 2026 17:58:48 +0900
Subject: [PATCH 15/19] =?UTF-8?q?modify:=20iOS=20=E3=81=A8=E3=83=A2?=
 =?UTF-8?q?=E3=83=90=E3=82=A4=E3=83=AB=E3=81=A7=E3=82=B9=E3=82=AF=E3=83=AD?=
 =?UTF-8?q?=E3=83=BC=E3=83=AB=E3=81=AE=E5=85=88=E8=AA=AD=E3=81=BF=E3=82=92?=
 =?UTF-8?q?=E7=84=A1=E5=8A=B9=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MainView/MessagesScroller/MessagesScroller.vue  | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index c65301f7fa..97233f9403 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -18,7 +18,7 @@
         data-testid="channel-viewport"
       >
         <MessagesSkeleton
-          v-if="!isReachedEnd"
+          v-if="enablePreload && !isReachedEnd"
           ref="topSkeletonRef"
           :count="8"
           :class="$style.edgeSkeleton"
@@ -36,7 +36,7 @@
           />
         </template>
         <MessagesSkeleton
-          v-if="!isReachedLatest"
+          v-if="enablePreload && !isReachedLatest"
           ref="bottomSkeletonRef"
           reversed
           :count="8"
@@ -50,14 +50,16 @@
 
 <script lang="ts">
 import type { ComponentPublicInstance, Ref } from 'vue'
-import { nextTick, onMounted, shallowRef, watch } from 'vue'
+import { computed, nextTick, onMounted, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
 import { useEventListener, useResizeObserver } from '@vueuse/core'
 import { throttle } from 'throttle-debounce'
 
 import { useOpenLink } from '/@/composables/useOpenLink'
+import useResponsive from '/@/composables/useResponsive'
 import { embeddingOrigin } from '/@/lib/apis'
+import { isIOS } from '/@/lib/dom/browser'
 import { toggleSpoiler } from '/@/lib/markdown/spoiler'
 import { RouteName, isMessageScrollerRoute } from '/@/router'
 import { useStampsStore } from '/@/store/entities/stamps'
@@ -269,6 +271,9 @@ watch(
 )
 
 const { getThreshold, update: updateThreshold } = useDynamicLoadThreshold()
+const { isMobile } = useResponsive()
+
+const enablePreload = computed(() => !isIOS() && !isMobile.value)
 
 const requestLoadMessages = () => {
   if (!rootRef.value) return
@@ -281,7 +286,7 @@ const requestLoadMessages = () => {
       rootRef.value.clientHeight +
       bottomSkeletonHeight.value)
 
-  updateThreshold(top, bottom)
+  if (enablePreload.value) updateThreshold(top, bottom)
   const threshold = getThreshold()
 
   if (props.isLoading) return

From d8c9902fc74f1516eb551a0ce2cdea58b05e84a9 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Sun, 4 Jan 2026 09:04:08 +0900
Subject: [PATCH 16/19] =?UTF-8?q?fix:=20=E5=85=88=E8=AA=AD=E3=81=BF?=
 =?UTF-8?q?=E3=81=8C=E7=84=A1=E5=8A=B9=E5=8C=96=E3=81=95=E3=82=8C=E3=82=8B?=
 =?UTF-8?q?=E3=81=A8=E3=81=8D=E3=81=AE=E6=8C=99=E5=8B=95=E3=82=92=E6=94=B9?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../MessagesScroller/MessagesScroller.vue     | 45 ++++++++++++-------
 .../MessagesScroller/MessagesSkeleton.vue     | 22 ++++++---
 .../composables/useMessageScroller.ts         | 10 +++--
 3 files changed, 50 insertions(+), 27 deletions(-)

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index 97233f9403..cf9a283677 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -18,9 +18,11 @@
         data-testid="channel-viewport"
       >
         <MessagesSkeleton
-          v-if="enablePreload && !isReachedEnd"
+          v-if="!isReachedEnd"
           ref="topSkeletonRef"
-          :count="8"
+          :simple="!enableProactiveLoading"
+          instant
+          :count="3"
           :class="$style.edgeSkeleton"
         />
         <MessagesScrollerSeparator
@@ -36,10 +38,12 @@
           />
         </template>
         <MessagesSkeleton
-          v-if="enablePreload && !isReachedLatest"
+          v-if="enableProactiveLoading && !isReachedLatest"
           ref="bottomSkeletonRef"
           reversed
-          :count="8"
+          instant
+          :simple="!enableProactiveLoading"
+          :count="3"
           :class="$style.edgeSkeleton"
         />
       </div>
@@ -53,8 +57,8 @@ import type { ComponentPublicInstance, Ref } from 'vue'
 import { computed, nextTick, onMounted, shallowRef, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
 
-import { useEventListener, useResizeObserver } from '@vueuse/core'
-import { throttle } from 'throttle-debounce'
+import { unrefElement, useEventListener, useResizeObserver } from '@vueuse/core'
+import { debounce, throttle } from 'throttle-debounce'
 
 import { useOpenLink } from '/@/composables/useOpenLink'
 import useResponsive from '/@/composables/useResponsive'
@@ -74,8 +78,8 @@ export interface MessageScrollerInstance extends ComponentPublicInstance {
   rootRef: HTMLDivElement
 }
 
-const MIN_THRESHOLD = 500 // 最小の閾値
-const THRESHOLD_INCREMENT = 1000 // 端に到達するたびに増加させる閾値
+const MIN_THRESHOLD = 1000 // 最小の閾値
+const THRESHOLD_INCREMENT = 1500 // 端に到達するたびに増加させる閾値
 const DECAY_PER_SECOND = 0.6 // 一秒あたりの減衰率
 
 /**
@@ -230,18 +234,24 @@ const bottomSkeletonHeight = shallowRef(0)
 useResizeObserver(
   () => topSkeletonRef.value?.$el,
   entries => {
-    topSkeletonHeight.value = entries[0]?.contentRect.height ?? 0
+    topSkeletonHeight.value =
+      unrefElement(topSkeletonRef)?.getBoundingClientRect().height ?? 0
   }
 )
+
 useResizeObserver(
   () => bottomSkeletonRef.value?.$el,
   entries => {
-    bottomSkeletonHeight.value = entries[0]?.contentRect.height ?? 0
+    bottomSkeletonHeight.value =
+      unrefElement(bottomSkeletonRef)?.getBoundingClientRect().height ?? 0
   }
 )
 
+const { isMobile } = useResponsive()
+const enableProactiveLoading = computed(() => !isIOS() && !isMobile.value)
+
 const { onChangeHeight, onEntryMessageLoaded, ready, state } =
-  useMessageScroller(rootRef, props)
+  useMessageScroller(rootRef, props, topSkeletonHeight)
 
 // 初期スクロール位置を設定
 state.scrollTop = lastScrollPosition.value
@@ -271,9 +281,6 @@ watch(
 )
 
 const { getThreshold, update: updateThreshold } = useDynamicLoadThreshold()
-const { isMobile } = useResponsive()
-
-const enablePreload = computed(() => !isIOS() && !isMobile.value)
 
 const requestLoadMessages = () => {
   if (!rootRef.value) return
@@ -286,7 +293,10 @@ const requestLoadMessages = () => {
       rootRef.value.clientHeight +
       bottomSkeletonHeight.value)
 
-  if (enablePreload.value) updateThreshold(top, bottom)
+  if (enableProactiveLoading.value) {
+    updateThreshold(top, bottom)
+  }
+
   const threshold = getThreshold()
 
   if (props.isLoading) return
@@ -298,7 +308,10 @@ const requestLoadMessages = () => {
   }
 }
 
-const handleScroll = throttle(64, requestLoadMessages)
+const handleScroll = (enableProactiveLoading.value ? throttle : debounce)(
+  enableProactiveLoading.value ? 24 : 200,
+  requestLoadMessages
+)
 
 const visibilitychangeListener = () => {
   if (document.visibilityState === 'visible') {
diff --git a/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue b/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
index 695ccebfdf..58d8458a21 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesSkeleton.vue
@@ -4,7 +4,9 @@
       v-for="(item, i) in items"
       :key="i"
       :class="$style.messageItem"
-      :style="{ animationDelay: `${i * 30}ms` }"
+      :style="{
+        animationDelay: props.instant ? '0' : `${i * 30}ms`
+      }"
     >
       <div :class="$style.avatar" />
       <div :class="$style.content">
@@ -44,27 +46,33 @@
 const props = withDefaults(
   defineProps<{
     count?: number
+    simple?: boolean
     reversed?: boolean
+    instant?: boolean
   }>(),
   {
     count: 16,
-    reversed: false
+    simple: false,
+    reversed: false,
+    instant: false
   }
 )
 
 const generateRandomMessage = () => {
   const lines = []
-  const lineCount = Math.floor(Math.random() * 3) + 1
+  const lineCount = props.simple ? 2 : Math.floor(Math.random() * 3) + 1
   for (let i = 0; i < lineCount; i++) {
     lines.push(Math.floor(Math.random() * 40) + 40)
   }
 
+  const stampCount = Math.random() < 0.3 ? Math.floor(Math.random() * 5) + 1 : 0
+
   return {
     lines,
-    hasQuote: Math.random() < 0.1,
-    hasImage: Math.random() < 0.1,
-    hasFile: Math.random() < 0.05,
-    stamps: Math.random() < 0.3 ? Math.floor(Math.random() * 5) + 1 : 0
+    hasQuote: props.simple ? false : Math.random() < 0.1,
+    hasImage: props.simple ? false : Math.random() < 0.1,
+    hasFile: props.simple ? false : Math.random() < 0.05,
+    stamps: props.simple ? 3 : stampCount
   }
 }
 
diff --git a/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
index 00f0bc7110..61f1bb29ef 100644
--- a/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
+++ b/src/components/Main/MainView/MessagesScroller/composables/useMessageScroller.ts
@@ -1,5 +1,5 @@
-import type { Reactive, Ref } from 'vue'
-import { reactive, watch } from 'vue'
+import type { MaybeRefOrGetter, Reactive, Ref } from 'vue'
+import { reactive, toValue, watch } from 'vue'
 import { ref } from 'vue'
 
 import type { ChangeHeightData } from '/@/components/Main/MainView/MessageElement/composables/useElementRenderObserver'
@@ -13,7 +13,8 @@ const useMessageScroller = (
     messageIds: MessageId[]
     lastLoadingDirection: LoadingDirection
     entryMessageId?: MessageId
-  }>
+  }>,
+  topSkeletonHeight: MaybeRefOrGetter<number> = 0
 ) => {
   const ready = ref(false)
 
@@ -50,7 +51,8 @@ const useMessageScroller = (
       scrollerProps.lastLoadingDirection === 'latest' ||
       scrollerProps.lastLoadingDirection === 'former'
     ) {
-      const scrollerTop = rootRef.value.getBoundingClientRect().top
+      const scrollerTop =
+        rootRef.value.getBoundingClientRect().top + toValue(topSkeletonHeight)
 
       // 視界より上にある要素の高さが変わった場合のみ補正する
       if (payload.top < scrollerTop) {

From 79af2030061f10ac19f4334284e1eac24969b9a7 Mon Sep 17 00:00:00 2001
From: uni-kakurenbo <kohma1116@gmail.com>
Date: Mon, 23 Mar 2026 19:43:38 +0900
Subject: [PATCH 17/19] fix: lint, format

---
 .../Main/MainView/MessagesScroller/MessagesScroller.vue       | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index cf9a283677..e187eeac58 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -233,7 +233,7 @@ const bottomSkeletonHeight = shallowRef(0)
 // ResizeObserverでスケルトン高さを監視
 useResizeObserver(
   () => topSkeletonRef.value?.$el,
-  entries => {
+  () => {
     topSkeletonHeight.value =
       unrefElement(topSkeletonRef)?.getBoundingClientRect().height ?? 0
   }
@@ -241,7 +241,7 @@ useResizeObserver(
 
 useResizeObserver(
   () => bottomSkeletonRef.value?.$el,
-  entries => {
+  () => {
     bottomSkeletonHeight.value =
       unrefElement(bottomSkeletonRef)?.getBoundingClientRect().height ?? 0
   }

From 90668ee89a61b81b92ef85a49dbb5859ed38073a Mon Sep 17 00:00:00 2001
From: yas-ako <105139975+yas-ako@users.noreply.github.com>
Date: Mon, 23 Mar 2026 16:18:50 +0900
Subject: [PATCH 18/19] =?UTF-8?q?chore:=20overscroll=20=E3=82=92=E7=84=A1?=
 =?UTF-8?q?=E5=8A=B9=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/styles/global.scss | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/styles/global.scss b/src/styles/global.scss
index 740f357c73..2ec09a23ab 100644
--- a/src/styles/global.scss
+++ b/src/styles/global.scss
@@ -13,6 +13,7 @@
 :root {
   color-scheme: var(--color-scheme);
   caret-color: var(--caret);
+  overscroll-behavior-y: none;
 }
 
 body {
@@ -26,7 +27,7 @@ body {
   scroll-behavior: smooth;
   text-rendering: optimizeLegibility;
   touch-action: manipulation;
-  overscroll-behavior-y: contain;
+  overscroll-behavior-y: none;
 }
 
 img {

From 54c4ec091da468030842405d93a9436360c346ba Mon Sep 17 00:00:00 2001
From: yas-ako <105139975+yas-ako@users.noreply.github.com>
Date: Mon, 23 Mar 2026 16:19:36 +0900
Subject: [PATCH 19/19] =?UTF-8?q?fix:=20=E5=BF=85=E8=A6=81=E3=81=AA?=
 =?UTF-8?q?=E3=81=84=E9=9A=99=E9=96=93=E3=82=92=E5=89=8A=E9=99=A4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../Main/MainView/MessagesScroller/MessagesScroller.vue          | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
index e187eeac58..525f1d76d0 100644
--- a/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
+++ b/src/components/Main/MainView/MessagesScroller/MessagesScroller.vue
@@ -333,7 +333,6 @@ defineExpose({ rootRef })
   height: 100%;
   position: relative;
   overflow-y: hidden;
-  padding: 12px 0;
 }
 
 .root {