src/components/common/messaging/attachments/AttachmentActions.module.scss

+.actions.imageAction {
+    grid-template: 
+        "name icon external download" auto
+        "size icon external download" auto
+        / minmax(20px, 1fr) min-content min-content;
+}
+
+.actions {
+    display: grid;
+    grid-template: 
+        "icon name external download" auto
+        "icon size external download" auto
+        / min-content minmax(20px, 1fr) min-content;
+
+    align-items: center;
+    column-gap: 12px;
+    
+    width: 100%;
+    padding: 8px;
+    overflow: none;
+
+    color: var(--foreground);
+    background: var(--secondary-background);
+
+    span {
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        overflow: hidden;
+    }
+    
+    .filesize {
+        grid-area: size;
+
+        font-size: 10px;
+        color: var(--secondary-foreground);
+    }
+
+    .downloadIcon {
+        grid-area: download;
+    }
+
+    .externalType {
+        grid-area: external;
+    }
+
+    .iconType {
+        grid-area: icon;
+    }
+}

src/components/common/messaging/attachments/Grid.tsx

+import styled from "styled-components";
+
+import { Children } from "../../../../types/Preact";
+
+const Grid = styled.div`
+    display: grid;
+    overflow: hidden;
+
+    max-width: min(var(--attachment-max-width), 100%, var(--width));
+    max-height: min(var(--attachment-max-height), var(--height));
+    aspect-ratio: var(--aspect-ratio);
+
+    img,
+    video {
+        min-width: 100%;
+        min-height: 100%;
+
+        width: auto;
+        height: auto;
+
+        max-width: 100%;
+        max-height: 100%;
+
+        grid-area: 1 / 1;
+    }
+
+    &.spoiler {
+        img,
+        video {
+            filter: blur(44px);
+        }
+
+        border-radius: var(--border-radius);
+    }
+`;
+
+export default Grid;
+
+type Props = Omit<
+    JSX.HTMLAttributes<HTMLDivElement>,
+    "children" | "as" | "style"
+> & {
+    style?: JSX.CSSProperties;
+    children?: Children;
+    width: number;
+    height: number;
+};
+
+export function SizedGrid(props: Props) {
+    const { width, height, children, style, ...divProps } = props;
+
+    return (
+        <Grid
+            {...divProps}
+            style={{
+                ...style,
+                "--width": `${width}px`,
+                "--height": `${height}px`,
+                "--aspect-ratio": width / height,
+            }}>
+            {children}
+        </Grid>
+    );
+}

src/components/common/user/UserCheckbox.tsx

-import { User } from "revolt.js";
-import UserIcon from "./UserIcon";
+import { User } from "revolt.js/dist/maps/Users";
+
 import Checkbox, { CheckboxProps } from "../../ui/Checkbox";
 
+import UserIcon from "./UserIcon";
+import { Username } from "./UserShort";
+
 type UserProps = Omit<CheckboxProps, "children"> & { user: User };
 
 export default function UserCheckbox({ user, ...props }: UserProps) {
     return (
         <Checkbox {...props}>
             <UserIcon target={user} size={32} />
-            {user.username}
+            <Username user={user} />
         </Checkbox>
     );
 }