From 5e4e515cedb2ceb6b8af7999b0f5eb3edefdb3bd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 Sep 2024 18:12:18 +0200
Subject: [PATCH] pl-fe: Minor changes to gallery display
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../src/features/account-gallery/components/media-item.tsx | 7 ++++---
 packages/pl-fe/src/features/account-gallery/index.tsx      | 7 +++----
 packages/pl-fe/src/features/group/group-gallery.tsx        | 5 +++--
 .../features/ui/components/panels/group-media-panel.tsx    | 5 +++--
 .../features/ui/components/panels/profile-media-panel.tsx  | 5 +++--
 packages/pl-fe/src/styles/components/media-gallery.scss    | 2 +-
 6 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/packages/pl-fe/src/features/account-gallery/components/media-item.tsx b/packages/pl-fe/src/features/account-gallery/components/media-item.tsx
index 9721238f2..ddb814385 100644
--- a/packages/pl-fe/src/features/account-gallery/components/media-item.tsx
+++ b/packages/pl-fe/src/features/account-gallery/components/media-item.tsx
@@ -12,9 +12,10 @@ import type { AccountGalleryAttachment } from 'pl-fe/selectors';
 interface IMediaItem {
   attachment: AccountGalleryAttachment;
   onOpenMedia: (attachment: AccountGalleryAttachment) => void;
+  isLast?: boolean;
 }
 
-const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
+const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia, isLast }) => {
   const { autoPlayGif, displayMedia } = useSettings();
   const [visible, setVisible] = useState<boolean>(displayMedia !== 'hide_all' && !attachment.status?.sensitive || displayMedia === 'show_all');
 
@@ -66,7 +67,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
         src={attachment.preview_url}
         alt={attachment.description}
         style={{ objectPosition: `${x}% ${y}%` }}
-        className='size-full overflow-hidden rounded-lg'
+        className={clsx('size-full overflow-hidden', { 'rounded-br-md': isLast })}
       />
     );
   } else if (['gifv', 'video'].indexOf(attachment.type) !== -1) {
@@ -80,7 +81,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
     thumbnail = (
       <div className={clsx('media-gallery__gifv', { autoplay: autoPlayGif })}>
         <video
-          className='media-gallery__item-gifv-thumbnail'
+          className={clsx('media-gallery__item-gifv-thumbnail overflow-hidden', { 'rounded-br-md': isLast })}
           aria-label={attachment.description}
           title={attachment.description}
           role='application'
diff --git a/packages/pl-fe/src/features/account-gallery/index.tsx b/packages/pl-fe/src/features/account-gallery/index.tsx
index 7de4eb42d..de36a5e1b 100644
--- a/packages/pl-fe/src/features/account-gallery/index.tsx
+++ b/packages/pl-fe/src/features/account-gallery/index.tsx
@@ -1,5 +1,5 @@
 import { List as ImmutableList } from 'immutable';
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useParams } from 'react-router-dom';
 
@@ -29,8 +29,6 @@ const AccountGallery = () => {
   const isLoading = useAppSelector((state) => state.timelines.get(`account:${account?.id}:with_replies:media`)?.isLoading);
   const hasMore = useAppSelector((state) => state.timelines.get(`account:${account?.id}:with_replies:media`)?.hasMore);
 
-  const node = useRef<HTMLDivElement>(null);
-
   const handleScrollToBottom = () => {
     if (hasMore) {
       handleLoadMore();
@@ -97,12 +95,13 @@ const AccountGallery = () => {
 
   return (
     <Column label={`@${account.acct}`} transparent withHeader={false}>
-      <div role='feed' className='grid grid-cols-2 gap-2 sm:grid-cols-3' ref={node}>
+      <div role='feed' className='grid grid-cols-2 gap-1 overflow-hidden rounded-md sm:grid-cols-3'>
         {attachments.map((attachment, index) => (
           <MediaItem
             key={`${attachment.status.id}+${attachment.id}`}
             attachment={attachment}
             onOpenMedia={handleOpenMedia}
+            isLast={index === attachments.size - 1}
           />
         ))}
 
diff --git a/packages/pl-fe/src/features/group/group-gallery.tsx b/packages/pl-fe/src/features/group/group-gallery.tsx
index 6d8c87e1e..4f24cb2b9 100644
--- a/packages/pl-fe/src/features/group/group-gallery.tsx
+++ b/packages/pl-fe/src/features/group/group-gallery.tsx
@@ -67,12 +67,13 @@ const GroupGallery: React.FC<IGroupGallery> = (props) => {
 
   return (
     <Column label={group.display_name} transparent withHeader={false}>
-      <div role='feed' className='mt-4 grid grid-cols-2 gap-2 sm:grid-cols-3'>
-        {attachments.map((attachment) => (
+      <div role='feed' className='mt-4 grid grid-cols-2 gap-1 overflow-hidden rounded-md sm:grid-cols-3'>
+        {attachments.map((attachment, index) => (
           <MediaItem
             key={`${attachment.status.id}+${attachment.id}`}
             attachment={attachment}
             onOpenMedia={handleOpenMedia}
+            isLast={index === attachments.length - 1}
           />
         ))}
 
diff --git a/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx
index 77f73a73c..9c4a313a6 100644
--- a/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/group-media-panel.tsx
@@ -54,12 +54,13 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
 
     if (!nineAttachments.isEmpty()) {
       return (
-        <div className='grid grid-cols-3 gap-1'>
-          {nineAttachments.map((attachment, _index) => (
+        <div className='grid grid-cols-3 gap-1 overflow-hidden rounded-md'>
+          {nineAttachments.map((attachment, index) => (
             <MediaItem
               key={`${attachment.status.id}+${attachment.id}`}
               attachment={attachment}
               onOpenMedia={handleOpenMedia}
+              isLast={index === nineAttachments.size - 1}
             />
           ))}
         </div>
diff --git a/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx b/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx
index ffcb0307d..f0af878e8 100644
--- a/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx
+++ b/packages/pl-fe/src/features/ui/components/panels/profile-media-panel.tsx
@@ -52,12 +52,13 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
 
     if (!nineAttachments.isEmpty()) {
       return (
-        <div className='grid grid-cols-3 gap-1'>
-          {nineAttachments.map((attachment, _index) => (
+        <div className='grid grid-cols-3 gap-1 overflow-hidden rounded-md'>
+          {nineAttachments.map((attachment, index) => (
             <MediaItem
               key={`${attachment.status.id}+${attachment.id}`}
               attachment={attachment}
               onOpenMedia={handleOpenMedia}
+              isLast={index === nineAttachments.size - 1}
             />
           ))}
         </div>
diff --git a/packages/pl-fe/src/styles/components/media-gallery.scss b/packages/pl-fe/src/styles/components/media-gallery.scss
index 5e46c7ea3..dbab29b2e 100644
--- a/packages/pl-fe/src/styles/components/media-gallery.scss
+++ b/packages/pl-fe/src/styles/components/media-gallery.scss
@@ -35,7 +35,7 @@
   }
 
   &__item-gifv-thumbnail {
-    @apply rounded-md cursor-zoom-in h-full object-cover relative w-full z-[1] transform-none top-0;
+    @apply cursor-zoom-in h-full object-cover relative w-full z-[1] transform-none top-0;
   }
 
   &__gifv__label,