From e4c1013de9d834fdd6fcf20c510dee31aa15a355 Mon Sep 17 00:00:00 2001
From: subnub <kyle.hoell@gmail.com>
Date: Thu, 20 Feb 2025 19:47:23 -0500
Subject: [PATCH] improved media viewer ui

---
 src/components/Medias/Medias.tsx               |  9 +++------
 src/components/MoverPopup/MoverPopup.tsx       | 18 +++++++++++-------
 .../PhotoViewerPopup/PhotoViewerPopup.tsx      |  6 +++---
 3 files changed, 17 insertions(+), 16 deletions(-)

diff --git a/src/components/Medias/Medias.tsx b/src/components/Medias/Medias.tsx
index 5a92e7f..9cd174a 100644
--- a/src/components/Medias/Medias.tsx
+++ b/src/components/Medias/Medias.tsx
@@ -95,11 +95,8 @@ const Medias = memo(
     })();
 
     return (
-      <div
-        className="w-full p-[17px_15px] desktopMode:p-[17px_40px] overflow-y-scroll select-none"
-        ref={scrollDivRef}
-      >
-        <div className="flex flex-row mb-5 justify-between items-center mt-2">
+      <div className="w-full overflow-y-scroll select-none" ref={scrollDivRef}>
+        <div className="flex flex-row justify-between items-center mt-2 p-[17px_15px] desktopMode:p-[17px_40px] mb-2">
           <h2 className={classNames("m-0 text-xl font-medium")}>{title}</h2>
           <div className="flex flex-row items-center">
             <a className="mr-2" onClick={switchOrderSortBy}>
@@ -139,7 +136,7 @@ const Medias = memo(
         {!isLoadingFiles && (
           <div
             className={classNames(
-              "grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-[2px]"
+              "grid grid-cols-[repeat(auto-fill,minmax(100px,1fr))] gap-[2px] p-0 desktopMode:px-[40px]"
             )}
           >
             <div className="fixed bottom-0 flex justify-center items-center right-0 left-0 z-10">
diff --git a/src/components/MoverPopup/MoverPopup.tsx b/src/components/MoverPopup/MoverPopup.tsx
index ef350cd..f653dff 100644
--- a/src/components/MoverPopup/MoverPopup.tsx
+++ b/src/components/MoverPopup/MoverPopup.tsx
@@ -177,24 +177,28 @@ const MoverPopup = () => {
     setSelectedFolder(parentList[parentList.length - 1]);
   };
 
-  const closeMoverModal = (e: React.MouseEvent<HTMLElement>) => {
-    const target = e.target as HTMLElement;
-    if (target.id !== "outer-wrapper") return;
+  const closeModal = () => {
     setAnimate(false);
     setTimeout(() => dispatch(resetMoveModal()), 200);
   };
 
+  const wrapperClick = (e: React.MouseEvent<HTMLElement>) => {
+    const target = e.target as HTMLElement;
+    if (target.id !== "outer-wrapper") return;
+    closeModal();
+  };
+
   return (
     <div
       className="w-screen dynamic-height bg-black bg-opacity-80 absolute top-0 left-0 right-0 bottom-0 z-50 flex justify-center items-center flex-col"
       id="outer-wrapper"
-      onClick={closeMoverModal}
+      onClick={wrapperClick}
     >
-      <div className="absolute top-[20px] flex justify-between w-full">
+      <div className="absolute top-[20px] flex justify-end w-full">
         <div>
           <CloseIcon
-            className="w-6 h-6 cursor-pointer"
-            onClick={() => dispatch(resetMoveModal())}
+            className="w-6 h-6 cursor-pointer text-white mr-4"
+            onClick={closeModal}
           />
         </div>
       </div>
diff --git a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx
index 9ef09a0..36297b8 100644
--- a/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx
+++ b/src/components/PhotoViewerPopup/PhotoViewerPopup.tsx
@@ -336,13 +336,13 @@ const PhotoViewerPopup: React.FC<PhotoViewerPopupProps> = memo((props) => {
       </div>
       <CircleLeftIcon
         onClick={goToPreviousItem}
-        className="fixed left-2 pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer hover:text-white-hover"
+        className="bottom-2 sm:bottom-1/2 fixed left-2 pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer hover:text-white-hover"
       />
       <CircleRightIcon
         onClick={goToNextItem}
-        className="fixed right-2 pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer hover:text-white-hover"
+        className="bottom-2 sm:bottom-1/2 fixed right-2 pointer text-white w-[45px] h-[45px] desktopMode:w-[30px] desktopMode:h-[30px] select-none cursor-pointer hover:text-white-hover"
       />
-      <div className="max-w-[80vw] max-h-[80vh] flex justify-center items-center z-10">
+      <div className="max-w-[95vw] sm:max-w-[80vw] max-h-[85vh] sm:max-h-[80vh] flex justify-center items-center z-10">
         {isThumbnailLoading && !thumbnailError && <Spinner />}
         {!file.metadata.isVideo && (
           <img