MediaAttachmentGrid: optimize preview layout (#11)

src/timelines/MediaAttachmentGrid.tsx

@@ -13,12 +13,12 @@ const MediaAttachmentGrid: Component<{
   const gridTemplateColumns = () => {
     const l = props.attachments.length;
     if (l < 2) {
-      return "1fr";
+      return "minmax(40px, auto)";
     }
     if (l < 4) {
-      return "repeat(2, 1fr)";
+      return "repeat(2, minmax(40px, auto))";
     }
-    return "repeat(3, 1fr)";
+    return "repeat(3, minmax(40px, auto))";
   };
 
   const openViewerFor = (index: number) => {

src/timelines/toot.module.css

@@ -140,7 +140,7 @@
     max-height: calc(4 * var(--title-line-height) * var(--title-size));
   }
 
-  > p {
+  >p {
     max-height: calc(8 * var(--body-line-height) * var(--body-size));
   }
 
@@ -228,10 +228,19 @@
   > :where(img) {
     max-height: 35vh;
     min-height: 40px;
-    object-fit: none;
-    width: 100%;
+    object-fit: contain;
+    max-width: 100%;
     background-color: var(--tutu-color-surface-d);
     border-radius: 2px;
+    border: 1px solid transparent;
+    transition: border-color 220ms var(--tutu-anim-curve-std),
+      box-shadow 220ms var(--tutu-anim-curve-std);
+
+    &:hover,
+    &:focus-visible {
+      border: 1px solid var(--tutu-color-surface-dd);
+      box-shadow: var(--tutu-shadow-e1);
+    }
   }
 }