dashboard fix (FG + equipment)

src/components/FinishedGoodSearch/FGPickOrderTicketReleaseTable.tsx

@@ -156,7 +156,7 @@ useEffect(() => {
         </Typography>
 
         {/* Dropdown Menus */}
-        <Stack direction="row" spacing={2} sx={{ mb: 3 }}>
+        <Stack direction="row" spacing={2} sx={{ mb: 3, flexWrap: 'wrap' }}>
           <FormControl sx={{ minWidth: 250 }} size="small">
             <InputLabel id="date-select-label">{t("Select Date")}</InputLabel>
             <Select
@@ -222,7 +222,7 @@ useEffect(() => {
           </FormControl>
 
           <Box sx={{ flexGrow: 1 }} />
-          <Stack direction="row" spacing={2} sx={{ alignSelf: 'center' }}>
+            <Stack direction="row" spacing={2} sx={{ flexShrink: 0, alignSelf: 'center' }}>
             <Typography variant="body2" sx={{ color: 'text.secondary' }}>
               {t("Now")}: {now.format('HH:mm')}
             </Typography>

src/components/ProductionProcess/EquipmentStatusDashboard.tsx

@@ -189,32 +189,32 @@ const EquipmentStatusDashboard: React.FC = () => {
         </Typography>
       </Box>
 
-      <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', mb: 2 }}>
-  <Tabs
-    value={tabIndex}
-    onChange={handleTabChange}
-    sx={{ flexShrink: 0 }}
-    variant="scrollable"
-    scrollButtons="auto"
-  >
-    <Tab label={t("All")} />
-    {data.map((type, index) => (
-      <Tab
-        key={type.equipmentTypeId}
-        label={type.equipmentTypeName || `${t("Equipment Type")} ${index + 1}`}
-      />
-    ))}
-  </Tabs>
-  <Box sx={{ flexGrow: 1 }} />
-  <Stack direction="row" spacing={2} sx={{ alignSelf: 'center' }}>
-    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-      {t("Now")}: {now.format('HH:mm')}
-    </Typography>
-    <Typography variant="body2" sx={{ color: 'text.secondary' }}>
-      {t("Auto-refresh every 1 minute")} | {t("Last updated")}: {lastDataRefreshTime ? lastDataRefreshTime.format('HH:mm:ss') : '--:--:--'}
-    </Typography>
-  </Stack>
-</Box>
+       <Box sx={{ display: 'flex', alignItems: 'center', width: '100%', mb: 2, gap: 2 }}>
+        <Box sx={{ flex: 1, minWidth: 0, overflow: 'hidden' }}>
+          <Tabs
+            value={tabIndex}
+            onChange={handleTabChange}
+            variant="scrollable"
+            scrollButtons="auto"
+          >
+            <Tab label={t("All")} />
+            {data.map((type, index) => (
+              <Tab
+                key={type.equipmentTypeId}
+                label={type.equipmentTypeName || `${t("Equipment Type")} ${index + 1}`}
+              />
+            ))}
+          </Tabs>
+        </Box>
+        <Stack direction="row" spacing={2} sx={{ flexShrink: 0, alignSelf: 'center' }}>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {t("Now")}: {now.format('HH:mm')}
+          </Typography>
+          <Typography variant="body2" sx={{ color: 'text.secondary' }}>
+            {t("Auto-refresh every 1 minute")} | {t("Last updated")}: {lastDataRefreshTime ? lastDataRefreshTime.format('HH:mm:ss') : '--:--:--'}
+          </Typography>
+        </Stack>
+      </Box>
 
       {loading ? (
         <Box sx={{ display: "flex", justifyContent: "center", p: 3 }}>