src/timelines/MediaAttachmentGrid.tsx

@@ -1,9 +1,8 @@
 import type { mastodon } from "masto";
-import { type Component, For, createSignal, onMount } from "solid-js";
+import { type Component, For, createSignal } from "solid-js";
 import { css } from "solid-styled";
 import tootStyle from "./toot.module.css";
 import MediaViewer from "./MediaViewer";
-import { render } from "solid-js/web";
 
 const MediaAttachmentGrid: Component<{
   attachments: mastodon.v1.MediaAttachment[];
@@ -14,35 +13,16 @@ const MediaAttachmentGrid: Component<{
   const gridTemplateColumns = () => {
     const l = props.attachments.length;
     if (l < 2) {
-      return "minmax(40px, auto)";
+      return "1fr";
     }
     if (l < 4) {
-      return "repeat(2, minmax(40px, auto))";
+      return "repeat(2, 1fr)";
     }
-    return "repeat(3, minmax(40px, auto))";
+    return "repeat(3, 1fr)";
   };
 
   const openViewerFor = (index: number) => {
     setViewerIndex(index);
-    const container = document.createElement("div");
-    container.setAttribute("role", "presentation");
-    document.body.appendChild(container);
-    let dispose: () => void
-    dispose = render(() => {
-      return (
-        <MediaViewer
-          show={viewerOpened()}
-          index={viewerIndex() || 0}
-          onIndexUpdated={setViewerIndex}
-          media={props.attachments}
-          onClose={() => {
-            setViewerIndex(undefined);
-            dispose();
-            document.body.removeChild(container)
-          }}
-        />
-      );
-    }, container);
   };
 
   css`
@@ -76,6 +56,13 @@ const MediaAttachmentGrid: Component<{
           }
         }}
       </For>
+        <MediaViewer
+          show={viewerOpened()}
+          index={viewerIndex() || 0}
+          onIndexUpdated={setViewerIndex}
+          media={props.attachments}
+          onClose={() => setViewerIndex(undefined)}
+        />
     </section>
   );
 };

src/timelines/toot.module.css

@@ -228,19 +228,10 @@
   > :where(img) {
     max-height: 35vh;
     min-height: 40px;
-    object-fit: contain;
-    max-width: 100%;
+    object-fit: none;
+    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);
-    }
   }
 }