🎨

Co-authored-by: @ltlapy

packages/client/src/components/ui/pagination.vue

@@ -196,21 +196,23 @@ const prepend = (item: Item): void => {
 	if (props.pagination.reversed) {
 		if (rootEl.value) {
 			const container = getScrollContainer(rootEl.value);
-			if (container == null) return; // TODO?
+			if (container == null) {
-
+				// TODO?
-			const pos = getScrollPosition(rootEl.value);
+			} else {
-			const viewHeight = container.clientHeight;
+				const pos = getScrollPosition(rootEl.value);
-			const height = container.scrollHeight;
+				const viewHeight = container.clientHeight;
-			const isBottom = (pos + viewHeight > height - 32);
+				const height = container.scrollHeight;
-			if (isBottom) {
+				const isBottom = (pos + viewHeight > height - 32);
-				// オーバーフローしたら古いアイテムは捨てる
+				if (isBottom) {
-				if (items.value.length >= props.displayLimit) {
+					// オーバーフローしたら古いアイテムは捨てる
-					// このやり方だとVue 3.2以降アニメーションが動かなくなる
+					if (items.value.length >= props.displayLimit) {
-					//items.value = items.value.slice(-props.displayLimit);
+						// このやり方だとVue 3.2以降アニメーションが動かなくなる
-					while (items.value.length >= props.displayLimit) {
+						//items.value = items.value.slice(-props.displayLimit);
-						items.value.shift();
+						while (items.value.length >= props.displayLimit) {
+							items.value.shift();
+						}
+						more.value = true;
 					}
-					more.value = true;
 				}
 			}
 		}

packages/client/src/pages/messaging/messaging-room.vue

@@ -292,6 +292,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
 <style lang="scss" scoped>
 .mk-messaging-room {
 	position: relative;
+	overflow: auto;
 
 	> .body {
 		.more {
@@ -335,10 +336,7 @@ definePageMetadata(computed(() => !fetching ? user ? {
 		z-index: 2;
 		bottom: 0;
 		padding-top: 8px;
-
+		bottom: calc(env(safe-area-inset-bottom, 0px) + 8px);
-		@media (max-width: 500px) {
-			bottom: calc(env(safe-area-inset-bottom, 0px) + 92px);
-		}
 
 		> .new-message {
 			width: 100%;