TootPreviewCard: limit text lines (#9)

A problem in this impl is that the ellipsis does
not show.

src/material/theme.css

@@ -11,6 +11,8 @@
   --button-size: 1rem;
   --button-weight: 500;
   --button-text-transform: uppercase;
+  --body-line-height: 1.375;
+  --title-line-height: 1.25;
 
   @media (min-width: 1024px) {
     & {
@@ -39,6 +41,8 @@
   --caption-size: 0.9375rem;
   --button-size: 1.0625rem;
   --button-text-transform: none;
+  --body-line-height: 1.425;
+  --title-line-height: 1.3;
 
   @media (min-width: 1024px) {
     & {
@@ -148,4 +152,5 @@
 
 body {
   font-size: var(--body-size, 1rem);
+  line-height: var(--body-line-height);
 }

src/material/typography.module.css

@@ -22,6 +22,7 @@
 .title {
   font-size: var(--title-size);
   font-weight: var(--title-weight);
+  line-height: var(--title-line-height);
 }
 
 .subheading {

src/timelines/TootBottomSheet.tsx

@@ -164,6 +164,7 @@ const TootBottomSheet: Component = (props) => {
     .bottom-dock {
       position: sticky;
       bottom: 0;
+      z-index: var(--tutu-zidx-nav);
     }
 
     .name :global(img) {

src/timelines/toot.module.css

@@ -137,12 +137,19 @@
 
   >h1 {
     color: var(--tutu-color-on-surface);
+    max-height: calc(4 * var(--title-line-height) * var(--title-size));
+  }
+
+  > p {
+    max-height: calc(8 * var(--body-line-height) * var(--body-size));
   }
 
   >h1,
   >p {
     margin-left: 16px;
     margin-right: 16px;
+    overflow: hidden;
+    text-overflow: ellipsis;
   }
 
   &.compact {