TootBottomSheet: fix title may have multiple lines

src/timelines/TootBottomSheet.tsx

@@ -109,13 +109,11 @@ const TootBottomSheet: Component = (props) => {
     }
   });
 
-  const tootTitle = () => {
+  const tootDisplayName = () => {
     const t = toot();
     if (t) {
-      const name = resolveCustomEmoji(t.account.displayName, t.account.emojis);
-      return `${name}'s toot`;
+      return resolveCustomEmoji(t.account.displayName, t.account.emojis);
     }
-    return "Someone's toot";
   };
 
   const actSession = () => {
@@ -196,6 +194,18 @@ const TootBottomSheet: Component = (props) => {
     .name :global(img) {
       max-height: 1em;
     }
+
+    .name {
+      display: grid;
+      grid-template-columns: 1fr auto;
+      height: calc(var(--title-size) * var(--title-line-height));
+
+      > :first-child {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    }
   `;
 
   return (
@@ -217,11 +227,19 @@ const TootBottomSheet: Component = (props) => {
               {pushedCount() > 0 ? <BackIcon /> : <CloseIcon />}
             </IconButton>
             <Title
+              component="div"
               class="name"
-              ref={(e: HTMLElement) =>
-                createRenderEffect(() => (e.innerHTML = tootTitle()))
-              }
-            ></Title>
+              use:solid-styled
+            >
+              <span
+                ref={(e: HTMLElement) =>
+                  createRenderEffect(
+                    () => (e.innerHTML = tootDisplayName() ?? "Someone"),
+                  )
+                }
+              ></span>
+              <span>'s toot</span>
+            </Title>
           </Toolbar>
         </AppBar>
       }