From d21241165f04fcf53d89008a552f7f8b413041f3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 Sep 2024 17:51:48 +0200
Subject: [PATCH 1/7] pl-fe: Remove unused code(?)
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/index.tsx    | 25 +++----------------
 1 file changed, 4 insertions(+), 21 deletions(-)

diff --git a/packages/pl-fe/src/features/account-gallery/index.tsx b/packages/pl-fe/src/features/account-gallery/index.tsx
index 0139403aa..7de4eb42d 100644
--- a/packages/pl-fe/src/features/account-gallery/index.tsx
+++ b/packages/pl-fe/src/features/account-gallery/index.tsx
@@ -14,21 +14,6 @@ import { useModalsStore } from 'pl-fe/stores';
 
 import MediaItem from './components/media-item';
 
-interface ILoadMoreMedia {
-  maxId: string | null;
-  onLoadMore: (value: string | null) => void;
-}
-
-const LoadMoreMedia: React.FC<ILoadMoreMedia> = ({ maxId, onLoadMore }) => {
-  const handleLoadMore = () => {
-    onLoadMore(maxId);
-  };
-
-  return (
-    <LoadMore onClick={handleLoadMore} />
-  );
-};
-
 const AccountGallery = () => {
   const dispatch = useAppDispatch();
   const { username } = useParams<{ username: string }>();
@@ -97,7 +82,7 @@ const AccountGallery = () => {
   let loadOlder = null;
 
   if (hasMore && !(isLoading && attachments.size === 0)) {
-    loadOlder = <LoadMore className='my-auto' visible={!isLoading} onClick={handleLoadOlder} />;
+    loadOlder = <LoadMore className='my-auto mt-4' visible={!isLoading} onClick={handleLoadOlder} />;
   }
 
   if (isUnavailable) {
@@ -113,9 +98,7 @@ 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}>
-        {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} />
-        ) : (
+        {attachments.map((attachment, index) => (
           <MediaItem
             key={`${attachment.status.id}+${attachment.id}`}
             attachment={attachment}
@@ -128,10 +111,10 @@ const AccountGallery = () => {
             <FormattedMessage id='account_gallery.none' defaultMessage='No media to show.' />
           </div>
         )}
-
-        {loadOlder}
       </div>
 
+      {loadOlder}
+
       {isLoading && attachments.size === 0 && (
         <div className='relative flex-auto px-8 py-4'>
           <Spinner />

From 961044a4c6147b6ac85d0b08939259db80ca850c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 Sep 2024 17:59:57 +0200
Subject: [PATCH 2/7] pl-fe: Disable no-custom-classname eslint rule
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/.eslintrc.json                           | 2 +-
 packages/pl-fe/src/styles/components/media-gallery.scss | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pl-fe/.eslintrc.json b/packages/pl-fe/.eslintrc.json
index d73821133..bd3d2475f 100644
--- a/packages/pl-fe/.eslintrc.json
+++ b/packages/pl-fe/.eslintrc.json
@@ -316,7 +316,7 @@
       }
     ],
     "tailwindcss/migration-from-tailwind-2": "error",
-
+    "tailwindcss/no-custom-classname": "off",
 
     "formatjs/enforce-default-message": "error",
     "formatjs/enforce-id": "error",
diff --git a/packages/pl-fe/src/styles/components/media-gallery.scss b/packages/pl-fe/src/styles/components/media-gallery.scss
index fbb750f53..5e46c7ea3 100644
--- a/packages/pl-fe/src/styles/components/media-gallery.scss
+++ b/packages/pl-fe/src/styles/components/media-gallery.scss
@@ -21,7 +21,7 @@
       @apply text-gray-400 cursor-zoom-in block no-underline leading-[0] relative z-[1] h-full w-full;
 
       video {
-        @apply w-full h-full object-cover
+        @apply w-full h-full object-cover;
       }
     }
   }

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 3/7] 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,

From 9bc47f31453130973da6bd69adca6b0c22a27069 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 4/7] 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>
---
 .../features/account-gallery/components/media-item.tsx | 10 ++++++----
 packages/pl-fe/src/features/account-gallery/index.tsx  |  7 +++----
 packages/pl-fe/src/features/group/group-gallery.tsx    |  5 +++--
 .../ui/components/panels/group-media-panel.tsx         |  5 +++--
 .../ui/components/panels/profile-media-panel.tsx       |  5 +++--
 .../pl-fe/src/styles/components/media-gallery.scss     |  4 ++--
 6 files changed, 20 insertions(+), 16 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..31bfe069f 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'
@@ -100,7 +101,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
     const fileExtensionLastIndex = remoteURL.lastIndexOf('.');
     const fileExtension = remoteURL.slice(fileExtensionLastIndex + 1).toUpperCase();
     thumbnail = (
-      <div className='media-gallery__item-thumbnail'>
+      <div className={clsx('media-gallery__item-thumbnail', { 'rounded-br-md': isLast })}>
         <span className='media-gallery__item__icons'><Icon src={require('@tabler/icons/outline/volume.svg')} /></span>
         <span className='media-gallery__file-extension__label'>{fileExtension}</span>
       </div>
@@ -122,6 +123,7 @@ const MediaItem: React.FC<IMediaItem> = ({ attachment, onOpenMedia }) => {
           hash={attachment.blurhash}
           className={clsx('media-gallery__preview', {
             'hidden': visible,
+            'rounded-br-md': isLast,
           })}
         />
         {visible && thumbnail}
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..647990e66 100644
--- a/packages/pl-fe/src/styles/components/media-gallery.scss
+++ b/packages/pl-fe/src/styles/components/media-gallery.scss
@@ -27,7 +27,7 @@
   }
 
   &__preview {
-    @apply bg-gray-200 dark:bg-gray-900 rounded-lg w-full h-full object-cover absolute top-0 left-0 z-0;
+    @apply bg-gray-200 dark:bg-gray-900 w-full h-full object-cover absolute top-0 left-0 z-0;
   }
 
   &__gifv {
@@ -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,

From 0aa70b67892a90f649ed79bcca7c61cb53c12ac8 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 Sep 2024 18:23:05 +0200
Subject: [PATCH 5/7] pl-fe: Fix widgets header
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 packages/pl-fe/src/components/ui/widget/widget.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/pl-fe/src/components/ui/widget/widget.tsx b/packages/pl-fe/src/components/ui/widget/widget.tsx
index c9e3a7eec..dcea8f6b9 100644
--- a/packages/pl-fe/src/components/ui/widget/widget.tsx
+++ b/packages/pl-fe/src/components/ui/widget/widget.tsx
@@ -47,7 +47,7 @@ const Widget: React.FC<IWidget> = ({
   action,
 }): JSX.Element => (
   <Stack space={4}>
-    {title || action || onActionClick && (
+    {(title || action || onActionClick) && (
       <HStack space={2} alignItems='center' justifyContent='between'>
         {title && <WidgetTitle title={title} />}
         {action || (onActionClick && (

From e04fe6a68531b9c257192aa6b10e296d601f8b01 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 Sep 2024 23:17:53 +0200
Subject: [PATCH 6/7] pl-fe: Modify media styles
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: marcin mikołajczak <git@mkljczk.pl>
---
 .../pl-fe/src/components/media-gallery.tsx    | 104 +++++++++---------
 .../components/panels/group-media-panel.tsx   |   2 +-
 .../components/panels/profile-media-panel.tsx |   2 +-
 .../src/styles/components/media-gallery.scss  |   6 +-
 4 files changed, 55 insertions(+), 59 deletions(-)

diff --git a/packages/pl-fe/src/components/media-gallery.tsx b/packages/pl-fe/src/components/media-gallery.tsx
index 46ac2e2e5..ad84f1dd7 100644
--- a/packages/pl-fe/src/components/media-gallery.tsx
+++ b/packages/pl-fe/src/components/media-gallery.tsx
@@ -152,10 +152,7 @@ const Item: React.FC<IItem> = ({
 
     return (
       <div
-        className={clsx('media-gallery__item', {
-          standalone,
-          'rounded-md': total > 1,
-        })}
+        className={clsx('media-gallery__item', standalone)}
         key={attachment.id}
         style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}
       >
@@ -250,10 +247,7 @@ const Item: React.FC<IItem> = ({
 
   return (
     <div
-      className={clsx('media-gallery__item', `media-gallery__item--${attachment.type}`, {
-        standalone,
-        'rounded-md': total > 1,
-      })}
+      className={clsx('media-gallery__item', `media-gallery__item--${attachment.type}`, standalone)}
       key={attachment.id}
       style={{ position, float, left, top, right, bottom, height, width: `${width}%` }}
     >
@@ -351,34 +345,34 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
 
       if (isPortrait(ar1) && isPortrait(ar2)) {
         itemsDimensions = [
-          { w: 50, h: '100%', r: '2px' },
-          { w: 50, h: '100%', l: '2px' },
+          { w: 50, h: '100%', r: '1px' },
+          { w: 50, h: '100%', l: '1px' },
         ];
       } else if (isPanoramic(ar1) && isPanoramic(ar2)) {
         itemsDimensions = [
-          { w: 100, h: panoSize_px, b: '2px' },
-          { w: 100, h: panoSize_px, t: '2px' },
+          { w: 100, h: panoSize_px, b: '1px' },
+          { w: 100, h: panoSize_px, t: '1px' },
         ];
       } else if (
         (isPanoramic(ar1) && isPortrait(ar2)) ||
         (isPanoramic(ar1) && isNonConformingRatio(ar2))
       ) {
         itemsDimensions = [
-          { w: 100, h: `${(w / maximumAspectRatio)}px`, b: '2px' },
-          { w: 100, h: `${(w * 0.6)}px`, t: '2px' },
+          { w: 100, h: `${(w / maximumAspectRatio)}px`, b: '1px' },
+          { w: 100, h: `${(w * 0.6)}px`, t: '1px' },
         ];
       } else if (
         (isPortrait(ar1) && isPanoramic(ar2)) ||
         (isNonConformingRatio(ar1) && isPanoramic(ar2))
       ) {
         itemsDimensions = [
-          { w: 100, h: `${(w * 0.6)}px`, b: '2px' },
-          { w: 100, h: `${(w / maximumAspectRatio)}px`, t: '2px' },
+          { w: 100, h: `${(w * 0.6)}px`, b: '1px' },
+          { w: 100, h: `${(w / maximumAspectRatio)}px`, t: '1px' },
         ];
       } else {
         itemsDimensions = [
-          { w: 50, h: '100%', r: '2px' },
-          { w: 50, h: '100%', l: '2px' },
+          { w: 50, h: '100%', r: '1px' },
+          { w: 50, h: '100%', l: '1px' },
         ];
       }
     } else if (size === 3) {
@@ -392,9 +386,9 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
 
       if (isPanoramic(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3)) {
         itemsDimensions = [
-          { w: 100, h: '50%', b: '2px' },
-          { w: 50, h: '50%', t: '2px', r: '2px' },
-          { w: 50, h: '50%', t: '2px', l: '2px' },
+          { w: 100, h: '50%', b: '1px' },
+          { w: 50, h: '50%', t: '1px', r: '1px' },
+          { w: 50, h: '50%', t: '1px', l: '1px' },
         ];
       } else if (isPanoramic(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) {
         itemsDimensions = [
@@ -404,13 +398,13 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
         ];
       } else if (isPortrait(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3)) {
         itemsDimensions = [
-          { w: 50, h: '100%', r: '2px' },
-          { w: 50, h: '50%', b: '2px', l: '2px' },
-          { w: 50, h: '50%', t: '2px', l: '2px' },
+          { w: 50, h: '100%', r: '1px' },
+          { w: 50, h: '50%', b: '1px', l: '1px' },
+          { w: 50, h: '50%', t: '1px', l: '1px' },
         ];
       } else if (isNonConformingRatio(ar1) && isNonConformingRatio(ar2) && isPortrait(ar3)) {
         itemsDimensions = [
-          { w: 50, h: '50%', b: '2px', r: '2px' },
+          { w: 50, h: '50%', b: '1px', r: '1px' },
           { w: 50, h: '50%', l: '-2px', b: '-2px', pos: 'absolute', float: 'none' },
           { w: 50, h: '100%', r: '-2px', t: '0px', b: '0px', pos: 'absolute', float: 'none' },
         ];
@@ -419,33 +413,33 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
         (isPortrait(ar1) && isPortrait(ar2) && isPortrait(ar3))
       ) {
         itemsDimensions = [
-          { w: 50, h: '50%', b: '2px', r: '2px' },
-          { w: 50, h: '100%', l: '2px', float: 'right' },
-          { w: 50, h: '50%', t: '2px', r: '2px' },
+          { w: 50, h: '50%', b: '1px', r: '1px' },
+          { w: 50, h: '100%', l: '1px', float: 'right' },
+          { w: 50, h: '50%', t: '1px', r: '1px' },
         ];
       } else if (
         (isPanoramic(ar1) && isPanoramic(ar2) && isNonConformingRatio(ar3)) ||
         (isPanoramic(ar1) && isPanoramic(ar2) && isPortrait(ar3))
       ) {
         itemsDimensions = [
-          { w: 50, h: panoSize_px, b: '2px', r: '2px' },
-          { w: 50, h: panoSize_px, b: '2px', l: '2px' },
-          { w: 100, h: `${w - panoSize}px`, t: '2px' },
+          { w: 50, h: panoSize_px, b: '1px', r: '1px' },
+          { w: 50, h: panoSize_px, b: '1px', l: '1px' },
+          { w: 100, h: `${w - panoSize}px`, t: '1px' },
         ];
       } else if (
         (isNonConformingRatio(ar1) && isPanoramic(ar2) && isPanoramic(ar3)) ||
         (isPortrait(ar1) && isPanoramic(ar2) && isPanoramic(ar3))
       ) {
         itemsDimensions = [
-          { w: 100, h: `${w - panoSize}px`, b: '2px' },
-          { w: 50, h: panoSize_px, t: '2px', r: '2px' },
-          { w: 50, h: panoSize_px, t: '2px', l: '2px' },
+          { w: 100, h: `${w - panoSize}px`, b: '1px' },
+          { w: 50, h: panoSize_px, t: '1px', r: '1px' },
+          { w: 50, h: panoSize_px, t: '1px', l: '1px' },
         ];
       } else {
         itemsDimensions = [
-          { w: 50, h: '50%', b: '2px', r: '2px' },
-          { w: 50, h: '50%', b: '2px', l: '2px' },
-          { w: 100, h: '50%', t: '2px' },
+          { w: 50, h: '50%', b: '1px', r: '1px' },
+          { w: 50, h: '50%', b: '1px', l: '1px' },
+          { w: 100, h: '50%', t: '1px' },
         ];
       }
     } else if (size >= 4) {
@@ -470,34 +464,34 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
 
       if (isPanoramic(ar1) && isPanoramic(ar2) && isNonConformingRatio(ar3) && isNonConformingRatio(ar4)) {
         itemsDimensions = [
-          { w: 50, h: panoSize_px, b: '2px', r: '2px' },
-          { w: 50, h: panoSize_px, b: '2px', l: '2px' },
-          { w: 50, h: `${(w / 2)}px`, t: '2px', r: '2px' },
-          { w: 50, h: `${(w / 2)}px`, t: '2px', l: '2px' },
+          { w: 50, h: panoSize_px, b: '1px', r: '1px' },
+          { w: 50, h: panoSize_px, b: '1px', l: '1px' },
+          { w: 50, h: `${(w / 2)}px`, t: '1px', r: '1px' },
+          { w: 50, h: `${(w / 2)}px`, t: '1px', l: '1px' },
         ];
       } else if (isNonConformingRatio(ar1) && isNonConformingRatio(ar2) && isPanoramic(ar3) && isPanoramic(ar4)) {
         itemsDimensions = [
-          { w: 50, h: `${(w / 2)}px`, b: '2px', r: '2px' },
-          { w: 50, h: `${(w / 2)}px`, b: '2px', l: '2px' },
-          { w: 50, h: panoSize_px, t: '2px', r: '2px' },
-          { w: 50, h: panoSize_px, t: '2px', l: '2px' },
+          { w: 50, h: `${(w / 2)}px`, b: '1px', r: '1px' },
+          { w: 50, h: `${(w / 2)}px`, b: '1px', l: '1px' },
+          { w: 50, h: panoSize_px, t: '1px', r: '1px' },
+          { w: 50, h: panoSize_px, t: '1px', l: '1px' },
         ];
       } else if (
         (isPortrait(ar1) && isNonConformingRatio(ar2) && isNonConformingRatio(ar3) && isNonConformingRatio(ar4)) ||
         (isPortrait(ar1) && isPanoramic(ar2) && isPanoramic(ar3) && isPanoramic(ar4))
       ) {
         itemsDimensions = [
-          { w: 67, h: '100%', r: '2px' },
-          { w: 33, h: '33%', b: '4px', l: '2px' },
-          { w: 33, h: '33%', l: '2px' },
-          { w: 33, h: '33%', t: '4px', l: '2px' },
+          { w: 67, h: '100%', r: '1px' },
+          { w: 33, h: '33%', b: '4px', l: '1px' },
+          { w: 33, h: '33%', l: '1px' },
+          { w: 33, h: '33%', t: '4px', l: '1px' },
         ];
       } else {
         itemsDimensions = [
-          { w: 50, h: '50%', b: '2px', r: '2px' },
-          { w: 50, h: '50%', b: '2px', l: '2px' },
-          { w: 50, h: '50%', t: '2px', r: '2px' },
-          { w: 50, h: '50%', t: '2px', l: '2px' },
+          { w: 50, h: '50%', b: '1px', r: '1px' },
+          { w: 50, h: '50%', b: '1px', l: '1px' },
+          { w: 50, h: '50%', t: '1px', r: '1px' },
+          { w: 50, h: '50%', t: '1px', l: '1px' },
         ];
       }
     }
@@ -557,7 +551,9 @@ const MediaGallery: React.FC<IMediaGallery> = (props) => {
 
   return (
     <div
-      className={clsx(className, 'media-gallery', { 'media-gallery--compact !h-12 bg-transparent': compact })}
+      className={clsx(className, 'media-gallery overflow-hidden rounded-md', {
+        'media-gallery--compact !h-12 bg-transparent': compact,
+      })}
       style={sizeData.style}
       ref={node}
     >
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 9c4a313a6..024a5db1f 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,7 +54,7 @@ const GroupMediaPanel: React.FC<IGroupMediaPanel> = ({ group }) => {
 
     if (!nineAttachments.isEmpty()) {
       return (
-        <div className='grid grid-cols-3 gap-1 overflow-hidden rounded-md'>
+        <div className='grid grid-cols-3 gap-0.5 overflow-hidden rounded-md'>
           {nineAttachments.map((attachment, index) => (
             <MediaItem
               key={`${attachment.status.id}+${attachment.id}`}
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 f0af878e8..425e74034 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,7 +52,7 @@ const ProfileMediaPanel: React.FC<IProfileMediaPanel> = ({ account }) => {
 
     if (!nineAttachments.isEmpty()) {
       return (
-        <div className='grid grid-cols-3 gap-1 overflow-hidden rounded-md'>
+        <div className='grid grid-cols-3 gap-0.5 overflow-hidden rounded-md'>
           {nineAttachments.map((attachment, index) => (
             <MediaItem
               key={`${attachment.status.id}+${attachment.id}`}
diff --git a/packages/pl-fe/src/styles/components/media-gallery.scss b/packages/pl-fe/src/styles/components/media-gallery.scss
index 647990e66..e0c389de0 100644
--- a/packages/pl-fe/src/styles/components/media-gallery.scss
+++ b/packages/pl-fe/src/styles/components/media-gallery.scss
@@ -2,7 +2,7 @@
   @apply rounded-lg box-border overflow-hidden isolate relative w-full h-auto;
 
   &__item {
-    @apply rounded-sm border-0 box-border block float-left relative overflow-hidden;
+    @apply border-0 box-border block float-left relative overflow-hidden;
 
     &__icons {
       @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
@@ -60,10 +60,10 @@
   }
 
   &--compact {
-    @apply rounded-sm;
+    @apply flex rounded-sm w-fit gap-0.5;
 
     .media-gallery__item {
-      @apply h-12 w-12 inset-auto float-left mr-[5px] #{!important};
+      @apply h-12 w-12 inset-auto float-left #{!important};
 
       &-overflow {
         @apply text-xl;

From 04281890e6ba935fc3c3c597979a5299f3a1f2b5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?marcin=20miko=C5=82ajczak?= <git@mkljczk.pl>
Date: Mon, 30 Sep 2024 23:37:18 +0200
Subject: [PATCH 7/7] pl-fe: fix media modal thread 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>
---
 packages/pl-fe/src/features/status/components/thread.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/pl-fe/src/features/status/components/thread.tsx b/packages/pl-fe/src/features/status/components/thread.tsx
index 6eea98040..70e956a44 100644
--- a/packages/pl-fe/src/features/status/components/thread.tsx
+++ b/packages/pl-fe/src/features/status/components/thread.tsx
@@ -341,7 +341,7 @@ const Thread: React.FC<IThread> = ({
 
           <StatusActionBar
             status={status}
-            expandable={false}
+            expandable={!useWindowScroll}
             space='lg'
             withLabels
           />
@@ -391,7 +391,7 @@ const Thread: React.FC<IThread> = ({
         ref={node}
         className={
           clsx('bg-white black:bg-black dark:bg-primary-900', {
-            'h-full': !useWindowScroll,
+            'h-full overflow-auto': !useWindowScroll,
           })
         }
       >