fix(ui): make the dashboard and bucket list usable on narrow screens

Mobile metrics and bucket panels now scroll instead of clipping, and
the dashboard stat cards and action menus pick up the spacing, overflow,
and alignment rules the rest of the console already used.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

Author: Vonng

api/admin_info.go

@@ -668,7 +668,7 @@ var widgets = []Metric{
 		Targets: []Target{
 			{
 				Expr:         `sum by (server,api) (increase(minio_s3_requests_total{$__query}[$__rate_interval]))`,
-				LegendFormat: "{{server,api}}",
+				LegendFormat: "{{server}}, {{api}}",
 			},
 		},
 	},
@@ -685,7 +685,7 @@ var widgets = []Metric{
 		Targets: []Target{
 			{
 				Expr:         `sum by (server,api) (increase(minio_s3_requests_errors_total{$__query}[$__rate_interval]))`,
-				LegendFormat: "{{server,api}}",
+				LegendFormat: "{{server}}, {{api}}",
 			},
 		},
 	},

web-app/public/styles/root-styles.css

@@ -18,3 +18,8 @@ body {
   justify-content: center;
   align-items: center;
 }
+
+#download-widget-main-menu,
+#upload-files-main-menu {
+  min-width: 180px;
+}

web-app/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx

@@ -113,7 +113,7 @@ const UploadFilesButton = ({
       >
         <Button
           id={"upload-main"}
-          aria-controls={`upload-main-menu`}
+          aria-controls={`upload-files-main-menu`}
           aria-haspopup="true"
           aria-expanded={openUploadMenu ? "true" : undefined}
           onClick={handleClick}
@@ -125,7 +125,7 @@ const UploadFilesButton = ({
         />
       </TooltipWrapper>
       <DropdownSelector
-        id={"upload-main-menu"}
+        id={"upload-files-main-menu"}
         options={[
           {
             label: "Upload File",

web-app/src/screens/Console/Dashboard/BasicDashboard/BasicDashboard.tsx

@@ -32,7 +32,11 @@ import {
   TotalObjectsIcon,
   UptimeIcon,
 } from "mds";
-import { calculateBytes, representationNumber } from "../../../../common/utils";
+import {
+  calculateBytes,
+  niceDays,
+  representationNumber,
+} from "../../../../common/utils";
 import StatusCountCard from "./StatusCountCard";
 import groupBy from "lodash/groupBy";
 import ServersList from "./ServersList";
@@ -42,7 +46,11 @@ import { Link } from "react-router-dom";
 import { IAM_PAGES } from "../../../../common/SecureComponent/permissions";
 import TimeStatItem from "../TimeStatItem";
 import TooltipWrapper from "../../Common/TooltipWrapper/TooltipWrapper";
-import { AdminInfoResponse, ServerDrives } from "api/consoleApi";
+import {
+  AdminInfoResponse,
+  ServerDrives,
+  ServerProperties,
+} from "api/consoleApi";
 
 const BoxItem = ({ children }: { children: any }) => {
   return (
@@ -94,13 +102,30 @@ const prettyUsage = (usage: string | undefined) => {
   return calculateBytes(usage);
 };
 
+const getClusterUptime = (servers: ServerProperties[]) => {
+  const onlineUptimes = servers
+    .filter(
+      (server) =>
+        server.state === "online" &&
+        typeof server.uptime === "number" &&
+        server.uptime >= 0,
+    )
+    .map((server) => server.uptime as number);
+
+  if (!onlineUptimes.length) {
+    return "n/a";
+  }
+
+  return niceDays(Math.min(...onlineUptimes).toString()).trim() || "0 seconds";
+};
+
 const BasicDashboard = ({ usage }: IDashboardProps) => {
   const usageValue = usage && usage.usage ? usage.usage.toString() : "0";
   const usageToRepresent = prettyUsage(usageValue);
-
-  const { lastScan = "n/a", lastHeal = "n/a", upTime = "n/a" } = {};
-
   const serverList = getServersList(usage);
+  const lastScan = "n/a";
+  const lastHeal = "n/a";
+  const upTime = getClusterUptime(serverList);
 
   let allDrivesArray: ServerDrives[] = [];
 

web-app/src/screens/Console/Dashboard/DashboardItemBox.tsx

@@ -22,12 +22,12 @@ const DashboardItemBox = ({ children }: { children: any }) => {
     <Box
       withBorders
       sx={{
-        borderRadius: "3px",
-        padding: 15,
+        borderRadius: 12,
+        padding: "16px 20px",
         height: 136,
         maxWidth: "100%",
         [`@media (max-width: ${breakPoints.sm}px)`]: {
-          padding: 5,
+          padding: 10,
           height: "auto",
         },
         [`@media (max-width: ${breakPoints.md}px)`]: {

web-app/src/screens/Console/Dashboard/DownloadWidgetDataButton.tsx

@@ -119,10 +119,17 @@ const DownloadWidgetDataButton = ({
             backgroundColor: "transparent",
             border: 0,
             padding: 0,
+            width: 32,
+            height: 32,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: 4,
             cursor: "pointer",
             "& svg": {
               color: "#D0D0D0",
-              height: 16,
+              width: 18,
+              height: 18,
             },
             "&:hover": {
               "& svg": {

web-app/src/screens/Console/Dashboard/Prometheus/PrDashboard.tsx

@@ -17,6 +17,7 @@
 import React, { Fragment, useState } from "react";
 import {
   Box,
+  breakPoints,
   Button,
   Grid,
   HelpBox,
@@ -337,6 +338,27 @@ const PrDashboard = ({ apiPrefix = "admin", usage }: IPrDashboard) => {
         horizontal
         options={tabsOptions}
         currentTabOrPath={curTab}
+        sx={{
+          [`@media (max-width: ${breakPoints.sm}px)`]: {
+            minWidth: 0,
+            "& > .optionsContainer": {
+              minWidth: 0,
+            },
+            "& > .optionsContainer > .optionsList": {
+              minWidth: 0,
+              overflowX: "auto",
+              overflowY: "hidden",
+              scrollbarWidth: "thin",
+            },
+            "& .optionsList > button": {
+              flex: "0 0 auto",
+            },
+            "& > .tabsPanels": {
+              boxSizing: "border-box",
+              minWidth: 0,
+            },
+          },
+        }}
         onTabClick={(newValue) => {
           setCurTab(newValue);
         }}

web-app/src/screens/Console/ObjectBrowser/OBBucketList.tsx

@@ -19,6 +19,7 @@ import React, { Fragment, useEffect, useState } from "react";
 import { useNavigate } from "react-router-dom";
 import {
   ActionLink,
+  breakPoints,
   BucketsIcon,
   Button,
   DataTable,
@@ -195,6 +196,43 @@ const OBListBuckets = () => {
                 records={filteredRecords}
                 entityName={"Buckets"}
                 idField={"name"}
+                sx={{
+                  [`@media (max-width: ${breakPoints.sm}px)`]: {
+                    paddingLeft: 8,
+                    paddingRight: 8,
+                    scrollbarWidth: "thin",
+                    "#root &&": {
+                      overflowX: "auto",
+                    },
+                    "& .ReactVirtualized__Table": {
+                      minWidth: 470,
+                    },
+                    "& .ReactVirtualized__Table__headerColumn, & .ReactVirtualized__Table__rowColumn":
+                      {
+                        flexShrink: "0 !important",
+                      },
+                    "& .ReactVirtualized__Table__headerColumn:nth-child(1), & .ReactVirtualized__Table__rowColumn:nth-child(1)":
+                      {
+                        flexBasis: "180px !important",
+                        width: "180px !important",
+                      },
+                    "& .ReactVirtualized__Table__headerColumn:nth-child(2), & .ReactVirtualized__Table__rowColumn:nth-child(2)":
+                      {
+                        flexBasis: "75px !important",
+                        width: "75px !important",
+                      },
+                    "& .ReactVirtualized__Table__headerColumn:nth-child(3), & .ReactVirtualized__Table__rowColumn:nth-child(3)":
+                      {
+                        flexBasis: "85px !important",
+                        width: "85px !important",
+                      },
+                    "& .ReactVirtualized__Table__headerColumn:nth-child(4), & .ReactVirtualized__Table__rowColumn:nth-child(4)":
+                      {
+                        flexBasis: "70px !important",
+                        width: "70px !important",
+                      },
+                  },
+                }}
                 columns={[
                   {
                     label: "Name",