Use Grid + Aspect to size MediaItem

app/soapbox/features/account-gallery/components/media-item.tsx

@@ -11,11 +11,10 @@ import type { Attachment } from 'soapbox/types/entities';
 
 interface IMediaItem {
   attachment: Attachment,
-  displayWidth: number,
   onOpenMedia: (attachment: Attachment) => void,
 }
 
-const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia }) => {
+const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
   const settings = useSettings();
   const autoPlayGif = settings.get('autoPlayGif');
   const displayMedia = settings.get('displayMedia');
@@ -53,8 +52,6 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia
     }
   };
 
-  const width  = `${Math.floor((displayWidth - 4) / 3) - 4}px`;
-  const height = width;
   const status = attachment.get('status');
   const title  = status.get('spoiler_text') || attachment.get('description');
 
@@ -124,8 +121,8 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, displayWidth, onOpenMedia
   }
 
   return (
-    <div style={{ width, height }}>
+    <div className='col-span-1'>
-      <a className='media-gallery__item-thumbnail' href={status.get('url')} target='_blank' onClick={handleClick} title={title}>
+      <a className='media-gallery__item-thumbnail aspect-square' href={status.get('url')} target='_blank' onClick={handleClick} title={title}>
         <Blurhash
           hash={attachment.get('blurhash')}
           className={classNames('media-gallery__preview', {

app/soapbox/features/account-gallery/index.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
@@ -65,7 +65,6 @@ const AccountGallery = () => {
   const isLoading = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.isLoading);
   const hasMore = useAppSelector((state) => state.timelines.get(`account:${accountId}:media`)?.hasMore);
 
-  const [width, setWidth] = useState(323);
   const node = useRef<HTMLDivElement>(null);
 
   const handleScrollToBottom = () => {
@@ -96,12 +95,6 @@ const AccountGallery = () => {
     }
   };
 
-  useLayoutEffect(() => {
-    if (node.current) {
-      setWidth(node.current.offsetWidth);
-    }
-  }, [node.current]);
-
   useEffect(() => {
     if (accountId && accountId !== -1) {
       dispatch(fetchAccount(accountId));
@@ -143,14 +136,13 @@ const AccountGallery = () => {
 
   return (
     <Column label={`@${accountUsername}`} transparent withHeader={false}>
-      <div role='feed' className='flex flex-wrap gap-2' ref={node}>
+      <div role='feed' className='grid grid-cols-2 gap-2 sm:grid-cols-3' ref={node}>
         {attachments.map((attachment, index) => attachment === null ? (
           <LoadMoreMedia key={'more:' + attachments.get(index + 1)?.id} maxId={index > 0 ? (attachments.get(index - 1)?.id || null) : null} onLoadMore={handleLoadMore} />
         ) : (
           <MediaItem
             key={`${attachment.status.id}+${attachment.id}`}
             attachment={attachment}
-            displayWidth={width}
             onOpenMedia={handleOpenMedia}
           />
         ))}

app/soapbox/features/ui/components/group-media-panel.tsx

@@ -50,12 +50,11 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
 
     if (!nineAttachments.isEmpty()) {
       return (
-        <div className='flex flex-wrap -m-1'>
+        <div className='grid grid-cols-3 gap-1'>
           {nineAttachments.map((attachment, _index) => (
             <MediaItem
               key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
               attachment={attachment}
-              displayWidth={255}
               onOpenMedia={handleOpenMedia}
             />
           ))}

app/soapbox/features/ui/components/profile-media-panel.tsx

@@ -51,12 +51,11 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
 
     if (!nineAttachments.isEmpty()) {
       return (
-        <div className='flex flex-wrap -m-1'>
+        <div className='grid grid-cols-3 gap-1'>
           {nineAttachments.map((attachment, _index) => (
             <MediaItem
               key={`${attachment.getIn(['status', 'id'])}+${attachment.id}`}
               attachment={attachment}
-              displayWidth={255}
               onOpenMedia={handleOpenMedia}
             />
           ))}