sevago-library 1.3.14 → 1.3.15

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # sevago-library
 
+## 1.3.15
+
+### Patch Changes
+
+- feat: enhance responsiveness and layout adjustments in SystemMonitorScreen
+
 ## 1.3.14
 
 ### Patch Changes

package/dist/index.cjs.js

@@ -78346,6 +78346,10 @@ const SystemMonitorScreen = ({
 }) => {
   const theme = useTheme();
   const [tab, setTab] = React.useState(AppGroup.ALL);
+  const isBelowSm = material.useMediaQuery(theme.breakpoints.down("sm"));
+  const isBelowMd = material.useMediaQuery(theme.breakpoints.down("md"));
+  const isBelowLg = material.useMediaQuery(theme.breakpoints.down("lg"));
+  const appGridColumns = isBelowSm ? 2 : isBelowMd ? 3 : isBelowLg ? 4 : 5;
   const availableApps = React.useMemo(
     () => Object.entries(APP_OBJ).filter(([key]) => !(blacklist == null ? void 0 : blacklist.includes(key))).map(([, app]) => {
       const appInfo = app;
@@ -78388,7 +78392,7 @@ const SystemMonitorScreen = ({
       component: MotionBox,
       preset: "fadeInUp",
       sx: {
-        flexDirection: { xs: "column", md: "row" },
+        flexDirection: "row",
         alignItems: "stretch",
         width: "100%",
         minHeight: "100%",
@@ -78399,7 +78403,8 @@ const SystemMonitorScreen = ({
           material.Stack,
           {
             sx: {
-              width: { xs: "100%", md: 240 },
+              width: { xs: 72, sm: 180, md: 240 },
+              flexShrink: 0,
               gap: 0
             },
             children: availableGroups.map((group) => {
@@ -78411,6 +78416,7 @@ const SystemMonitorScreen = ({
                   "aria-pressed": isActive,
                   sx: {
                     p: PADDING_GAP_ITEM,
+                    justifyContent: { xs: "center", sm: "flex-start" },
                     border: 0,
                     borderLeft: { md: `3px solid ${isActive ? theme.palette.primary.main : "transparent"}` },
                     borderRadius: BORDER_RADIUS_ELEMENT_SMALL,
@@ -78425,7 +78431,7 @@ const SystemMonitorScreen = ({
                   },
                   children: [
                     /* @__PURE__ */ jsxRuntime.jsx(IconElement, { icon: GROUP_ICONS[group] }),
-                    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { ...TYPOGRAPHY.textMd.regular }, children: group })
+                    /* @__PURE__ */ jsxRuntime.jsx(material.Typography, { sx: { display: { xs: "none", sm: "block" }, ...TYPOGRAPHY.textMd.regular }, children: group })
                   ]
                 },
                 group
@@ -78437,9 +78443,9 @@ const SystemMonitorScreen = ({
           AppGrid,
           {
             apps: appsByGroup,
-            columns: 5,
+            columns: appGridColumns,
             rows: 3,
-            iconSize: 120,
+            iconSize: 60,
             iconRadius: 7,
             onClickApp,
             isShowAppHidden: true