From fe15c4f37d2a91443120d113a22fe0ab89efd19c Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Mon, 23 Sep 2024 15:54:50 +0800
Subject: [PATCH 1/2] CompactToot: fix the author overflow

---
 src/timelines/toot.module.css | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/timelines/toot.module.css b/src/timelines/toot.module.css
index da0f6c9..af13f46 100644
--- a/src/timelines/toot.module.css
+++ b/src/timelines/toot.module.css
@@ -193,6 +193,8 @@
   gap: 8px;
   align-items: center;
   margin-bottom: 8px;
+  flex-flow: row wrap;
+  justify-content: flex-end;
 
   >.compactAuthorUsername {
     color: var(--tutu-color-secondary-text-on-surface);

From f4ce206c52a4b9dc49906db9cf87147307d9d26e Mon Sep 17 00:00:00 2001
From: thislight <l1589002388@gmail.com>
Date: Mon, 23 Sep 2024 16:00:39 +0800
Subject: [PATCH 2/2] TootBottomSheet: scrollIntoView exactly once

---
 src/timelines/TootBottomSheet.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/timelines/TootBottomSheet.tsx b/src/timelines/TootBottomSheet.tsx
index 9a65bd8..18a83dc 100644
--- a/src/timelines/TootBottomSheet.tsx
+++ b/src/timelines/TootBottomSheet.tsx
@@ -80,11 +80,12 @@ const TootBottomSheet: Component = (props) => {
 
   const toot = () => remoteToot() ?? getCache(acctText(), params.id);
 
-  createEffect(() => {
+  createEffect((lastTootId?: string) => {
     const tootId = toot()?.id;
-    if (!tootId) return;
+    if (!tootId || lastTootId === tootId) return tootId;
     const elementId = `toot-${tootId}`;
     document.getElementById(elementId)?.scrollIntoView({ behavior: "smooth" });
+    return tootId;
   });
 
   const [tootContext] = createResource(
@@ -109,7 +110,7 @@ const TootBottomSheet: Component = (props) => {
       const name = resolveCustomEmoji(t.account.displayName, t.account.emojis);
       return `${name}'s toot`;
     }
-    return "A toot";
+    return "Someone's toot";
   };
 
   const actSession = () => {