From 7532c6330c1282db784263285b5c00b6651fc520 Mon Sep 17 00:00:00 2001
From: Khairul Hidayat <me@khairul.my.id>
Date: Wed, 21 Aug 2024 07:05:35 +0700
Subject: [PATCH] fix: fix layout issue on mobile browser

---
 src/components/layouts/main-layout.tsx             |  2 +-
 src/pages/buckets/manage/browse/object-actions.tsx |  7 ++++---
 src/pages/buckets/manage/browse/object-list.tsx    | 10 +++++++---
 src/pages/cluster/components/nodes-list.tsx        |  7 +++++--
 src/pages/keys/page.tsx                            |  1 +
 5 files changed, 18 insertions(+), 9 deletions(-)

diff --git a/src/components/layouts/main-layout.tsx b/src/components/layouts/main-layout.tsx
index db6c261..dd2aa2c 100644
--- a/src/components/layouts/main-layout.tsx
+++ b/src/components/layouts/main-layout.tsx
@@ -21,7 +21,7 @@ const MainLayout = () => {
     <Drawer
       open={sidebar.isOpen}
       onClickOverlay={sidebar.onClose}
-      className="md:drawer-open h-screen"
+      className="md:drawer-open h-screen max-h-dvh"
       side={<Sidebar />}
       contentClassName="flex flex-col overflow-hidden"
     >
diff --git a/src/pages/buckets/manage/browse/object-actions.tsx b/src/pages/buckets/manage/browse/object-actions.tsx
index a382804..acbff32 100644
--- a/src/pages/buckets/manage/browse/object-actions.tsx
+++ b/src/pages/buckets/manage/browse/object-actions.tsx
@@ -13,9 +13,10 @@ import { shareDialog } from "./share-dialog";
 type Props = {
   prefix?: string;
   object: Pick<Object, "objectKey" | "downloadUrl">;
+  end?: boolean;
 };
 
-const ObjectActions = ({ prefix = "", object }: Props) => {
+const ObjectActions = ({ prefix = "", object, end }: Props) => {
   const { bucketName } = useBucketContext();
   const queryClient = useQueryClient();
   const isDirectory = object.objectKey.endsWith("/");
@@ -45,12 +46,12 @@ const ObjectActions = ({ prefix = "", object }: Props) => {
           <Button icon={DownloadIcon} color="ghost" onClick={onDownload} />
         )}
 
-        <Dropdown end>
+        <Dropdown end vertical={end ? "top" : "bottom"}>
           <Dropdown.Toggle button={false}>
             <Button icon={EllipsisVertical} color="ghost" />
           </Dropdown.Toggle>
 
-          <Dropdown.Menu className="bg-base-300 gap-y-1">
+          <Dropdown.Menu className="gap-y-1">
             <Dropdown.Item
               onClick={() =>
                 shareDialog.open({ key: object.objectKey, prefix })
diff --git a/src/pages/buckets/manage/browse/object-list.tsx b/src/pages/buckets/manage/browse/object-list.tsx
index 6b1184a..fbb270a 100644
--- a/src/pages/buckets/manage/browse/object-list.tsx
+++ b/src/pages/buckets/manage/browse/object-list.tsx
@@ -23,7 +23,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
   };
 
   return (
-    <div className="overflow-x-auto pb-32">
+    <div className="overflow-x-auto overflow-y-hidden">
       <Table>
         <Table.Head>
           <span>Name</span>
@@ -63,7 +63,7 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
             </tr>
           ))}
 
-          {data?.objects.map((object) => {
+          {data?.objects.map((object, idx) => {
             const extIdx = object.objectKey.lastIndexOf(".");
             const filename =
               extIdx >= 0
@@ -93,7 +93,11 @@ const ObjectList = ({ prefix, onPrefixChange }: Props) => {
                 <td className="whitespace-nowrap">
                   {dayjs(object.lastModified).fromNow()}
                 </td>
-                <ObjectActions prefix={data.prefix} object={object} />
+                <ObjectActions
+                  prefix={data.prefix}
+                  object={object}
+                  end={idx >= data.objects.length - 2}
+                />
               </tr>
             );
           })}
diff --git a/src/pages/cluster/components/nodes-list.tsx b/src/pages/cluster/components/nodes-list.tsx
index 414c9c2..da93c63 100644
--- a/src/pages/cluster/components/nodes-list.tsx
+++ b/src/pages/cluster/components/nodes-list.tsx
@@ -184,7 +184,7 @@ const NodesList = ({ nodes }: NodeListProps) => {
         </Alert>
       ) : null}
 
-      <div className="w-full overflow-x-auto min-h-[400px] pb-16">
+      <div className="w-full overflow-x-auto overflow-y-hidden min-h-[400px]">
         <Table size="sm" className="min-w-[800px]">
           <Table.Head>
             <span>#</span>
@@ -266,7 +266,10 @@ const NodesList = ({ nodes }: NodeListProps) => {
                     : "Inactive"}
                 </Badge>
 
-                <Dropdown end>
+                <Dropdown
+                  end
+                  vertical={idx >= items.length - 2 ? "top" : "bottom"}
+                >
                   <Dropdown.Toggle button={false}>
                     <Button shape="circle" color="ghost">
                       <EllipsisVertical />
diff --git a/src/pages/keys/page.tsx b/src/pages/keys/page.tsx
index e8ce2e2..3ffa373 100644
--- a/src/pages/keys/page.tsx
+++ b/src/pages/keys/page.tsx
@@ -96,6 +96,7 @@ const KeysPage = () => {
                       icon={Eye}
                       size="sm"
                       onClick={() => fetchSecretKey(key.id)}
+                      className="shrink-0 min-w-[80px]"
                     >
                       View
                     </Button>