From 352382cd0523fa3b395696d3a46e66f58e8d5c63 Mon Sep 17 00:00:00 2001
From: Chewbacca <dice.warrant-02@icloud.com>
Date: Mon, 30 Jan 2023 11:49:34 -0500
Subject: [PATCH] Use Grid + Aspect to size MediaItem

---
 .../account-gallery/components/media-item.tsx        |  9 +++------
 app/soapbox/features/account-gallery/index.tsx       | 12 ++----------
 .../features/ui/components/group-media-panel.tsx     |  3 +--
 .../features/ui/components/profile-media-panel.tsx   |  3 +--
 4 files changed, 7 insertions(+), 20 deletions(-)

diff --git a/app/soapbox/features/account-gallery/components/media-item.tsx b/app/soapbox/features/account-gallery/components/media-item.tsx
index 5a363aff8..f980c0217 100644
--- a/app/soapbox/features/account-gallery/components/media-item.tsx
+++ b/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 }}>
-      <a className='media-gallery__item-thumbnail' href={status.get('url')} target='_blank' onClick={handleClick} title={title}>
+    <div className='col-span-1'>
+      <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', {
diff --git a/app/soapbox/features/account-gallery/index.tsx b/app/soapbox/features/account-gallery/index.tsx
index c155e64bb..bac76dec0 100644
--- a/app/soapbox/features/account-gallery/index.tsx
+++ b/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}
           />
         ))}
diff --git a/app/soapbox/features/ui/components/group-media-panel.tsx b/app/soapbox/features/ui/components/group-media-panel.tsx
index 904ed77d5..d59b79236 100644
--- a/app/soapbox/features/ui/components/group-media-panel.tsx
+++ b/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}
             />
           ))}
diff --git a/app/soapbox/features/ui/components/profile-media-panel.tsx b/app/soapbox/features/ui/components/profile-media-panel.tsx
index b958ca09a..0dbfaf7f3 100644
--- a/app/soapbox/features/ui/components/profile-media-panel.tsx
+++ b/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}
             />
           ))}