diff --git a/src/platform/Masonry.css b/src/platform/Masonry.css
index 0c452aa..ed6264f 100644
--- a/src/platform/Masonry.css
+++ b/src/platform/Masonry.css
@@ -5,7 +5,12 @@
 @supports (grid-template-rows: masonry) {
   .NativeMasonry {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(33%, min-content));
+    grid-template-columns: repeat(auto-fit, minmax(44px, min-content));
     grid-template-rows: masonry;
+
+    &:has(> :last-child:nth-child(2n)) {
+      grid-template-columns: repeat(2, minmax(auto, min-content));
+    }
   }
 }
+
diff --git a/src/platform/Masonry.tsx b/src/platform/Masonry.tsx
index bd461b9..7071cd8 100644
--- a/src/platform/Masonry.tsx
+++ b/src/platform/Masonry.tsx
@@ -5,8 +5,10 @@ import {
   type Ref,
   createRenderEffect,
   onCleanup,
+  children,
   createEffect,
   createSignal,
+  onMount,
 } from "solid-js";
 import { Dynamic, type DynamicProps } from "solid-js/web";
 import MasonryLayout from "masonry-layout";
@@ -18,6 +20,7 @@ type MasonryContainer =
   | Component<{
       ref?: Ref<Element>;
       class?: string;
+      children?: JSX.Element;
     }>;
 
 type ElementOf<T extends MasonryContainer> =
@@ -34,10 +37,7 @@ function forwardRef<T>(value: T, ref?: Ref<T>) {
   (ref as (value: T) => void)(value);
 }
 
-function createCompatMasonry(
-  element: Element,
-  options: () => MasonryLayout.Options,
-) {
+function createMasonry(element: Element, options: () => MasonryLayout.Options) {
   const layout = new MasonryLayout(element, {
     initLayout: false,
   });
@@ -46,21 +46,11 @@ function createCompatMasonry(
 
   const size = createElementSize(element);
 
-  const treeMutObx = new MutationObserver(() => {
-    layout.reloadItems?.();
-  });
-
-  onCleanup(() => treeMutObx.disconnect());
-
   createRenderEffect(() => {
     const opts = options();
     layout.option?.(opts);
   });
 
-  createRenderEffect(() => {
-    treeMutObx.observe(element, { childList: true });
-  });
-
   createRenderEffect(() => {
     const width = size.width; // only tracking width
     layout.layout?.();
@@ -71,6 +61,8 @@ function createCompatMasonry(
       layout.layout?.();
     });
   }
+
+  return layout;
 }
 
 const supportsCSSMasonryLayout = /* @__PURE__ */ CSS.supports(
@@ -93,7 +85,9 @@ if (import.meta.env.VITE_PLATFROM_MASONRY_ALWAYS_COMPAT) {
 function MasonryCompat<T extends MasonryContainer>(
   oprops: DynamicProps<T> & { class?: string },
 ) {
-  const [props, rest] = splitProps(oprops, ["ref", "class"]);
+  const [props, rest] = splitProps(oprops, ["ref", "children", "class"]);
+
+  const childrenComponents = children(() => props.children);
 
   return (
     <Dynamic
@@ -102,7 +96,7 @@ function MasonryCompat<T extends MasonryContainer>(
 
         const [columnGap, setColumnGap] = createSignal<number>();
 
-        createCompatMasonry(element, () => {
+        const layout = createMasonry(element, () => {
           return {
             gutter: columnGap(),
           };
@@ -121,9 +115,18 @@ function MasonryCompat<T extends MasonryContainer>(
             setColumnGap(Number(colGap.slice(0, colGap.length - 2)));
           }
         });
+
+        createRenderEffect(() => {
+          childrenComponents(); // just tracks
+          setTimeout(() => {
+            layout.reloadItems?.();
+            layout.layout?.();
+          }, 0);
+        });
       }}
       class={`Masonry CompatMasonry ${props.class || ""}`}
       {...rest}
+      children={childrenComponents}
     />
   );
 }
@@ -144,13 +147,6 @@ function MasonryNative<T extends MasonryContainer>(
  * and fallback to masonry-layout if not supported. The children
  * must have specified width and height.
  *
- * Testing native behaviour:
- * - Firefox: in `about:config`, search for `layout.css.grid-template-masonry-value.enabled`
- *
- * Class `NativeMasonry` will be added to the element if it's under the
- * css masonry layout, otherwise it's `CompatMasonry`. `Masonry` is always
- * added.
- *
  * **Children Changes** As the children changed, reflow will be triggered,
  * and there is might be a blink (or transition) for user. If it's not your
  * intention, don't remove/add the direct children. Instead wraps them under
diff --git a/src/platform/StackedRouter.css b/src/platform/StackedRouter.css
index 320dfe7..a946a2d 100644
--- a/src/platform/StackedRouter.css
+++ b/src/platform/StackedRouter.css
@@ -1,10 +1,10 @@
 .StackedPage {
-  contain: strict;
-  container: StackedPage / inline-size;
-  width: 100vw;
-  width: 100dvw;
-  height: 100vh;
-  height: 100dvh;
+  container: StackedPage / size;
+  display: contents;
+  max-width: 100vw;
+  max-width: 100dvw;
+
+  contain: layout;
 }
 
 dialog.StackedPage {
diff --git a/src/profiles/Profile.css b/src/profiles/Profile.css
index a8ce070..994a278 100644
--- a/src/profiles/Profile.css
+++ b/src/profiles/Profile.css
@@ -115,46 +115,6 @@
   }
 }
 
-@supports (container-type: inline-size) {
-  @container StackedPage (inline-size >=960px) {
-    .Profile {
-      display: grid;
-      grid-template-columns: auto 560px;
-      grid-template-rows: min-content 1fr;
-      height: 100cqh;
-
-      >.topbar {
-        grid-column: 1 / 3;
-        grid-row: 1 /2;
-
-        .MuiToolbar-root {
-          padding-right: calc(560px + 24px);
-        }
-      }
-
-      >.details {
-        height: 100%;
-        display: flex;
-        flex-flow: column nowrap;
-
-        >.intro {
-          flex-grow: 1;
-        }
-      }
-
-      >.recent-toots {
-        overflow-y: auto;
-        margin-top: calc(-1 * var(--scaffold-topbar-height));
-        z-index: calc(var(--tutu-zidx-nav, 1) + 1);
-
-        >.toot-list-toolbar {
-          top: 0;
-        }
-      }
-    }
-  }
-}
-
 .Profile__page-title {
   flex-grow: 1;
   white-space: nowrap;
diff --git a/src/profiles/Profile.tsx b/src/profiles/Profile.tsx
index f795c7c..04aba5f 100644
--- a/src/profiles/Profile.tsx
+++ b/src/profiles/Profile.tsx
@@ -237,321 +237,315 @@ const Profile: Component = () => {
       }
       class="Profile"
     >
-      <div class="details">
-        <Menu
-          id={optMenuId}
-          open={menuOpen()}
-          onClose={[setMenuOpen, false]}
-          anchor={() =>
-            document.getElementById(menuButId)!.getBoundingClientRect()
-          }
-          aria-label="Options for the Profile"
-        >
-          <Show when={session().account}>
-            <MenuItem>
-              <ListItemAvatar>
-                <Avatar src={session().account?.inf?.avatar} />
-              </ListItemAvatar>
-              <ListItemText secondary={"Default account"}>
-                <span ref={useSessionDisplayName}></span>
-              </ListItemText>
-              {/* <ArrowRight /> // for future */}
+      <Menu
+        id={optMenuId}
+        open={menuOpen()}
+        onClose={[setMenuOpen, false]}
+        anchor={() =>
+          document.getElementById(menuButId)!.getBoundingClientRect()
+        }
+        aria-label="Options for the Profile"
+      >
+        <Show when={session().account}>
+          <MenuItem>
+            <ListItemAvatar>
+              <Avatar src={session().account?.inf?.avatar} />
+            </ListItemAvatar>
+            <ListItemText secondary={"Default account"}>
+              <span ref={useSessionDisplayName}></span>
+            </ListItemText>
+            {/* <ArrowRight /> // for future */}
+          </MenuItem>
+        </Show>
+        <Show when={session().account && profile()}>
+          <Show
+            when={isCurrentSessionProfile()}
+            fallback={
+              <MenuItem
+                onClick={(event) => {
+                  const { left, right, top } =
+                    event.currentTarget.getBoundingClientRect();
+                  openSubscribeMenu({
+                    left,
+                    right,
+                    top,
+                    e: 1,
+                  });
+                }}
+              >
+                <ListItemIcon>
+                  <PlaylistAdd />
+                </ListItemIcon>
+                <ListItemText>Subscribe...</ListItemText>
+              </MenuItem>
+            }
+          >
+            <MenuItem disabled>
+              <ListItemIcon>
+                <Edit />
+              </ListItemIcon>
+              <ListItemText>Edit...</ListItemText>
             </MenuItem>
           </Show>
-          <Show when={session().account && profile()}>
-            <Show
-              when={isCurrentSessionProfile()}
-              fallback={
-                <MenuItem
+          <Divider />
+        </Show>
+        <MenuItem disabled>
+          <ListItemIcon>
+            <Group />
+          </ListItemIcon>
+          <ListItemText>Followers</ListItemText>
+          <ListItemSecondaryAction>
+            <span aria-label="The number of the account follower">
+              {profile()?.followersCount ?? ""}
+            </span>
+          </ListItemSecondaryAction>
+        </MenuItem>
+        <MenuItem disabled>
+          <ListItemIcon>
+            <Subject />
+          </ListItemIcon>
+          <ListItemText>Following</ListItemText>
+          <ListItemSecondaryAction>
+            <span aria-label="The number the account following">
+              {profile()?.followingCount ?? ""}
+            </span>
+          </ListItemSecondaryAction>
+        </MenuItem>
+        <MenuItem disabled>
+          <ListItemIcon>
+            <PersonOff />
+          </ListItemIcon>
+          <ListItemText>Blocklist</ListItemText>
+        </MenuItem>
+        <MenuItem disabled>
+          <ListItemIcon>
+            <Send />
+          </ListItemIcon>
+          <ListItemText>Mention in...</ListItemText>
+        </MenuItem>
+        <Divider />
+        <MenuItem
+          component={"a"}
+          href={profile()?.url}
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <ListItemIcon>
+            <OpenInBrowser />
+          </ListItemIcon>
+          <ListItemText>Open in browser...</ListItemText>
+        </MenuItem>
+        <MenuItem onClick={() => share({ url: profile()?.url })}>
+          <ListItemIcon>
+            <Share />
+          </ListItemIcon>
+          <ListItemText>Share...</ListItemText>
+        </MenuItem>
+      </Menu>
+      <div
+        style={{
+          height: `${268 * (Math.min(560, windowSize.width) / 560)}px`,
+        }}
+        class="banner"
+        role="presentation"
+      >
+        <img
+          ref={(e) => obx.observe(e)}
+          src={bannerImg()}
+          crossOrigin="anonymous"
+          alt={`Banner image for ${profile()?.displayName || "the user"}`}
+          onLoad={(event) => {
+            const ins = new FastAverageColor();
+            const colors = ins.getColor(event.currentTarget);
+            setBannerSampledColors({
+              average: colors.hex,
+              text: colors.isDark ? "white" : "black",
+            });
+            ins.destroy();
+          }}
+        ></img>
+      </div>
+
+      <Menu {...subscribeMenuState}>
+        <MenuItem
+          onClick={toggleSubscribeHome}
+          aria-label={`${relationship()?.following ? "Unfollow" : "Follow"} on your home timeline`}
+        >
+          <ListItemAvatar>
+            <Avatar src={session().account?.inf?.avatar}></Avatar>
+          </ListItemAvatar>
+          <ListItemText
+            secondary={
+              relationship()?.following
+                ? undefined
+                : profile()?.locked
+                  ? "A request will be sent"
+                  : undefined
+            }
+          >
+            <span ref={useSessionDisplayName}></span>
+            <span>'s Home</span>
+          </ListItemText>
+
+          <Checkbox checked={relationship()?.following ?? false} />
+        </MenuItem>
+      </Menu>
+
+      <div
+        class="intro"
+        style={{
+          "background-color": bannerSampledColors()?.average,
+          color: bannerSampledColors()?.text,
+        }}
+      >
+        <section class="acct-grp">
+          <Avatar
+            src={avatarImg()}
+            alt={`${profile()?.displayName || "the user"}'s avatar`}
+            sx={{
+              marginTop: "calc(-16px - 72px / 2)",
+              width: "72px",
+              height: "72px",
+            }}
+          ></Avatar>
+          <div class="name-grp">
+            <div class="display-name">
+              <Show when={profile()?.bot}>
+                <SmartToySharp class="acct-mark" aria-label="Bot" />
+              </Show>
+              <Show when={profile()?.locked}>
+                <Lock class="acct-mark" aria-label="Locked" />
+              </Show>
+              <Body2
+                component="span"
+                ref={(e: HTMLElement) =>
+                  createRenderEffect(() => (e.innerHTML = displayName()))
+                }
+                aria-label="Display name"
+              ></Body2>
+            </div>
+            <span aria-label="Complete username" class="username">{fullUsername()}</span>
+          </div>
+          <div role="presentation">
+            <Switch>
+              <Match
+                when={
+                  !session().account ||
+                  profileUncaught.loading ||
+                  profileUncaught.error
+                }
+              >
+                {<></>}
+              </Match>
+              <Match when={isCurrentSessionProfile()}>
+                <IconButton color="inherit">
+                  <Edit />
+                </IconButton>
+              </Match>
+              <Match when={true}>
+                <Button
+                  variant="contained"
+                  color="secondary"
                   onClick={(event) => {
-                    const { left, right, top } =
-                      event.currentTarget.getBoundingClientRect();
-                    openSubscribeMenu({
-                      left,
-                      right,
-                      top,
-                      e: 1,
-                    });
+                    openSubscribeMenu(
+                      event.currentTarget.getBoundingClientRect(),
+                    );
                   }}
                 >
-                  <ListItemIcon>
-                    <PlaylistAdd />
-                  </ListItemIcon>
-                  <ListItemText>Subscribe...</ListItemText>
-                </MenuItem>
-              }
-            >
-              <MenuItem disabled>
-                <ListItemIcon>
-                  <Edit />
-                </ListItemIcon>
-                <ListItemText>Edit...</ListItemText>
-              </MenuItem>
-            </Show>
-            <Divider />
-          </Show>
-          <MenuItem disabled>
-            <ListItemIcon>
-              <Group />
-            </ListItemIcon>
-            <ListItemText>Followers</ListItemText>
-            <ListItemSecondaryAction>
-              <span aria-label="The number of the account follower">
-                {profile()?.followersCount ?? ""}
-              </span>
-            </ListItemSecondaryAction>
-          </MenuItem>
-          <MenuItem disabled>
-            <ListItemIcon>
-              <Subject />
-            </ListItemIcon>
-            <ListItemText>Following</ListItemText>
-            <ListItemSecondaryAction>
-              <span aria-label="The number the account following">
-                {profile()?.followingCount ?? ""}
-              </span>
-            </ListItemSecondaryAction>
-          </MenuItem>
-          <MenuItem disabled>
-            <ListItemIcon>
-              <PersonOff />
-            </ListItemIcon>
-            <ListItemText>Blocklist</ListItemText>
-          </MenuItem>
-          <MenuItem disabled>
-            <ListItemIcon>
-              <Send />
-            </ListItemIcon>
-            <ListItemText>Mention in...</ListItemText>
-          </MenuItem>
-          <Divider />
-          <MenuItem
-            component={"a"}
-            href={profile()?.url}
-            target="_blank"
-            rel="noopener noreferrer"
-          >
-            <ListItemIcon>
-              <OpenInBrowser />
-            </ListItemIcon>
-            <ListItemText>Open in browser...</ListItemText>
-          </MenuItem>
-          <MenuItem onClick={() => share({ url: profile()?.url })}>
-            <ListItemIcon>
-              <Share />
-            </ListItemIcon>
-            <ListItemText>Share...</ListItemText>
-          </MenuItem>
-        </Menu>
-        <div
-          style={{
-            height: `${268 * (Math.min(560, windowSize.width) / 560)}px`,
-          }}
-          class="banner"
-          role="presentation"
-        >
-          <img
-            ref={(e) => obx.observe(e)}
-            src={bannerImg()}
-            crossOrigin="anonymous"
-            alt={`Banner image for ${profile()?.displayName || "the user"}`}
-            onLoad={(event) => {
-              const ins = new FastAverageColor();
-              const colors = ins.getColor(event.currentTarget);
-              setBannerSampledColors({
-                average: colors.hex,
-                text: colors.isDark ? "white" : "black",
-              });
-              ins.destroy();
-            }}
-          ></img>
-        </div>
-
-        <Menu {...subscribeMenuState}>
-          <MenuItem
-            onClick={toggleSubscribeHome}
-            aria-label={`${relationship()?.following ? "Unfollow" : "Follow"} on your home timeline`}
-          >
-            <ListItemAvatar>
-              <Avatar src={session().account?.inf?.avatar}></Avatar>
-            </ListItemAvatar>
-            <ListItemText
-              secondary={
-                relationship()?.following
-                  ? undefined
-                  : profile()?.locked
-                    ? "A request will be sent"
-                    : undefined
-              }
-            >
-              <span ref={useSessionDisplayName}></span>
-              <span>'s Home</span>
-            </ListItemText>
-
-            <Checkbox checked={relationship()?.following ?? false} />
-          </MenuItem>
-        </Menu>
-
-        <div
-          class="intro"
-          style={{
-            "background-color": bannerSampledColors()?.average,
-            color: bannerSampledColors()?.text,
-          }}
-        >
-          <section class="acct-grp">
-            <Avatar
-              src={avatarImg()}
-              alt={`${profile()?.displayName || "the user"}'s avatar`}
-              sx={{
-                marginTop: "calc(-16px - 72px / 2)",
-                width: "72px",
-                height: "72px",
-              }}
-            ></Avatar>
-            <div class="name-grp">
-              <div class="display-name">
-                <Show when={profile()?.bot}>
-                  <SmartToySharp class="acct-mark" aria-label="Bot" />
-                </Show>
-                <Show when={profile()?.locked}>
-                  <Lock class="acct-mark" aria-label="Locked" />
-                </Show>
-                <Body2
-                  component="span"
-                  ref={(e: HTMLElement) =>
-                    createRenderEffect(() => (e.innerHTML = displayName()))
-                  }
-                  aria-label="Display name"
-                ></Body2>
-              </div>
-              <span aria-label="Complete username" class="username">
-                {fullUsername()}
-              </span>
-            </div>
-            <div role="presentation">
-              <Switch>
-                <Match
-                  when={
-                    !session().account ||
-                    profileUncaught.loading ||
-                    profileUncaught.error
-                  }
-                >
-                  {<></>}
-                </Match>
-                <Match when={isCurrentSessionProfile()}>
-                  <IconButton color="inherit">
-                    <Edit />
-                  </IconButton>
-                </Match>
-                <Match when={true}>
-                  <Button
-                    variant="contained"
-                    color="secondary"
-                    onClick={(event) => {
-                      openSubscribeMenu(
-                        event.currentTarget.getBoundingClientRect(),
-                      );
-                    }}
-                  >
-                    {relationship()?.following ? "Subscribed" : "Subscribe"}
-                  </Button>
-                </Match>
-              </Switch>
-            </div>
-          </section>
-          <section
-            class="description"
-            aria-label={`${profile()?.displayName || "the user"}'s description`}
-            ref={(e) =>
-              createRenderEffect(() => (e.innerHTML = description() || ""))
-            }
-          ></section>
-
-          <table
-            class="acct-fields"
-            aria-label={`${profile()?.displayName || "the user"}'s fields`}
-          >
-            <tbody>
-              <For each={profile()?.fields ?? []}>
-                {(item, index) => {
-                  return (
-                    <tr data-field-index={index()}>
-                      <td>{item.name}</td>
-                      <td>
-                        <Show when={item.verifiedAt}>
-                          <Verified />
-                        </Show>
-                      </td>
-                      <td
-                        ref={(e) => {
-                          createRenderEffect(() => (e.innerHTML = item.value));
-                        }}
-                      ></td>
-                    </tr>
-                  );
-                }}
-              </For>
-            </tbody>
-          </table>
-        </div>
-      </div>
-
-      <div class="recent-toots">
-        <div class="toot-list-toolbar">
-          <TootFilterButton
-            options={{
-              pinned: "Pinneds",
-              boost: "Boosts",
-              reply: "Replies",
-              original: "Originals",
-            }}
-            applied={recentTootFilter()}
-            onApply={setRecentTootFilter}
-            disabledKeys={["original"]}
-          ></TootFilterButton>
-        </div>
-
-        <TimeSourceProvider value={time}>
-          <Show when={recentTootFilter().pinned && pinnedToots.list.length > 0}>
-            <TootList
-              threads={pinnedToots.list}
-              onUnknownThread={pinnedToots.getPath}
-              onChangeToot={pinnedToots.set}
-            />
-            <Divider />
-          </Show>
-          <TootList
-            id={recentTootListId}
-            threads={recentToots.list}
-            onUnknownThread={recentToots.getPath}
-            onChangeToot={recentToots.set}
-          />
-        </TimeSourceProvider>
-
-        <Show when={!recentTootChunk()?.done}>
-          <div
-            style={{
-              "text-align": "center",
-              "padding-bottom": "var(--safe-area-inset-bottom)",
-            }}
-          >
-            <IconButton
-              aria-label="Load More"
-              aria-controls={recentTootListId}
-              size="large"
-              color="primary"
-              onClick={[refetchRecentToots, "prev"]}
-              disabled={isTootListLoading()}
-            >
-              <Show when={isTootListLoading()} fallback={<ExpandMore />}>
-                <CircularProgress sx={{ width: "24px", height: "24px" }} />
-              </Show>
-            </IconButton>
+                  {relationship()?.following ? "Subscribed" : "Subscribe"}
+                </Button>
+              </Match>
+            </Switch>
           </div>
-        </Show>
+        </section>
+        <section
+          class="description"
+          aria-label={`${profile()?.displayName || "the user"}'s description`}
+          ref={(e) =>
+            createRenderEffect(() => (e.innerHTML = description() || ""))
+          }
+        ></section>
+
+        <table
+          class="acct-fields"
+          aria-label={`${profile()?.displayName || "the user"}'s fields`}
+        >
+          <tbody>
+            <For each={profile()?.fields ?? []}>
+              {(item, index) => {
+                return (
+                  <tr data-field-index={index()}>
+                    <td>{item.name}</td>
+                    <td>
+                      <Show when={item.verifiedAt}>
+                        <Verified />
+                      </Show>
+                    </td>
+                    <td
+                      ref={(e) => {
+                        createRenderEffect(() => (e.innerHTML = item.value));
+                      }}
+                    ></td>
+                  </tr>
+                );
+              }}
+            </For>
+          </tbody>
+        </table>
       </div>
+
+      <div class="toot-list-toolbar">
+        <TootFilterButton
+          options={{
+            pinned: "Pinneds",
+            boost: "Boosts",
+            reply: "Replies",
+            original: "Originals",
+          }}
+          applied={recentTootFilter()}
+          onApply={setRecentTootFilter}
+          disabledKeys={["original"]}
+        ></TootFilterButton>
+      </div>
+
+      <TimeSourceProvider value={time}>
+        <Show when={recentTootFilter().pinned && pinnedToots.list.length > 0}>
+          <TootList
+            threads={pinnedToots.list}
+            onUnknownThread={pinnedToots.getPath}
+            onChangeToot={pinnedToots.set}
+          />
+          <Divider />
+        </Show>
+        <TootList
+          id={recentTootListId}
+          threads={recentToots.list}
+          onUnknownThread={recentToots.getPath}
+          onChangeToot={recentToots.set}
+        />
+      </TimeSourceProvider>
+
+      <Show when={!recentTootChunk()?.done}>
+        <div
+          style={{
+            "text-align": "center",
+            "padding-bottom": "var(--safe-area-inset-bottom)",
+          }}
+        >
+          <IconButton
+            aria-label="Load More"
+            aria-controls={recentTootListId}
+            size="large"
+            color="primary"
+            onClick={[refetchRecentToots, "prev"]}
+            disabled={isTootListLoading()}
+          >
+            <Show when={isTootListLoading()} fallback={<ExpandMore />}>
+              <CircularProgress sx={{ width: "24px", height: "24px" }} />
+            </Show>
+          </IconButton>
+        </div>
+      </Show>
     </Scaffold>
   );
 };
diff --git a/src/timelines/toots/MediaAttachmentGrid.css b/src/timelines/toots/MediaAttachmentGrid.css
index 0043007..8fd667a 100644
--- a/src/timelines/toots/MediaAttachmentGrid.css
+++ b/src/timelines/toots/MediaAttachmentGrid.css
@@ -6,7 +6,7 @@
   contain: layout style;
   gap: 4px;
 
-  >* {
+  > * {
     max-height: 35vh;
     min-height: 40px;
     min-width: 40px;
@@ -26,16 +26,16 @@
     }
   }
 
-  >*>* {
+  > * > * {
     width: 100%;
     height: 100%;
   }
 
-  >*> :where(img, video) {
+  > * > :where(img, video) {
     object-fit: contain;
   }
 
-  >*>.sensitive-placeholder {
+  > * >.sensitive-placeholder {
     display: inline-flex;
     display: inline flex;
     align-items: center;