Made file preview dialog responsive (#10913)

ohcnetwork · Mar 1, 2025 · 39bb22a · 39bb22a
1 parent dfd30ca
commit 39bb22a
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 9 deletions.
diff --git a/src/components/Common/AvatarEditModal.tsx b/src/components/Common/AvatarEditModal.tsx
@@ -235,15 +235,15 @@ const AvatarEditModal = ({
               <>
                 {preview || imageUrl ? (
                   <>
-                    <div className="flex flex-1 items-center justify-center rounded-lg">
+                    <div className="flex h-[50vh] md:h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
                       <img
                         src={
                           preview && preview.startsWith("blob:")
                             ? DOMPurify.sanitize(preview)
                             : imageUrl
                         }
                         alt="cover-photo"
-                        className="h-full w-full object-cover"
+                        className="h-full w-full object-contain"
                       />
                     </div>
                     <p className="text-center font-medium text-secondary-700">

diff --git a/src/components/Common/FilePreviewDialog.tsx b/src/components/Common/FilePreviewDialog.tsx
@@ -13,6 +13,8 @@ import {
 import { useTranslation } from "react-i18next";
 import useKeyboardShortcut from "use-keyboard-shortcut";
 
+import { cn } from "@/lib/utils";
+
 import CareIcon, { IconName } from "@/CAREUI/icons/CareIcon";
 
 import { Button } from "@/components/ui/button";
@@ -247,7 +249,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                   <CareIcon icon="l-arrow-left" className="h-4 w-4" />
                 </Button>
               )}
-              <div className="flex h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
+              <div className="flex h-[50vh] md:h-[75vh] w-full items-center justify-center overflow-scroll rounded-lg border border-secondary-200">
                 {file_state.isImage ? (
                   <img
                     src={fileUrl}
@@ -273,7 +275,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                     sandbox=""
                     title={t("source_file")}
                     src={fileUrl}
-                    className="h-[75vh] w-full"
+                    className="h-[50vh] md:h-[75vh] w-full"
                   />
                 ) : (
                   <div className="flex h-full w-full flex-col items-center justify-center">
@@ -297,8 +299,8 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                 </Button>
               )}
             </div>
-            <div className="flex items-center justify-between">
-              <div className="mt-2 flex w-full flex-col justify-center gap-3 md:flex-row">
+            <div className="flex items-center justify-center">
+              <div className="mt-2 grid grid-cols-5 max-md:grid-cols-6 gap-4">
                 {file_state.isImage && (
                   <>
                     {[
@@ -339,7 +341,10 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                         variant="ghost"
                         key={index}
                         onClick={button[2] as () => void}
-                        className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
+                        className={cn(
+                          "z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70",
+                          index > 2 ? "max-md:col-span-3" : "max-md:col-span-2",
+                        )}
                         disabled={button[3] as boolean}
                       >
                         {button[1] && (
@@ -382,7 +387,10 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
                         variant="ghost"
                         key={index}
                         onClick={button[2] as () => void}
-                        className="z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70"
+                        className={cn(
+                          "z-50 rounded bg-white/60 px-4 py-2 text-black backdrop-blur transition hover:bg-white/70",
+                          index > 2 ? "max-md:col-span-3" : "max-md:col-span-2",
+                        )}
                         disabled={button[3] as boolean}
                       >
                         {button[1] && (
@@ -400,7 +408,7 @@ const FilePreviewDialog = (props: FilePreviewProps) => {
             </div>
           </>
         ) : (
-          <div className="flex h-[75vh] items-center justify-center">
+          <div className="flex h-[50vh] md:h-[75vh] items-center justify-center">
             <CircularProgress />
           </div>
         )}