fix: fix layout issue on mobile browser

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"
     >

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 })

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>
             );
           })}

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 />

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>