web: fix navigation menu resize issues

2026-08-29 10:09:26 +02:00 · 2024-04-29 16:18:24 +05:00
2 changed files with 8 additions and 4 deletions
--- a/apps/web/src/app.tsx
+++ b/apps/web/src/app.tsx
@@ -159,9 +159,10 @@ function DesktopAppContents({
            ref={navPane}
            className="nav-pane"
            defaultSize={10}
-            minSize={3}
-            onResize={(size) => setIsNarrow(size <= 3)}
+            minSize={3.5}
+            onResize={(size) => setIsNarrow(size <= 5)}
            collapsible
+            collapsedSize={3.5}
          >
            <NavigationMenu
              toggleNavigationContainer={(state) => {
--- a/apps/web/src/components/navigation-menu/navigation-item.tsx
+++ b/apps/web/src/components/navigation-menu/navigation-item.tsx
@@ -106,7 +106,7 @@ function NavigationItem(
      <Button
        data-test-id={`navigation-item`}
        sx={{
-          px: 2,
+          px: isTablet ? 1 : 2,
          flex: 1,
          alignItems: "center",
          justifyContent: isTablet ? "center" : "flex-start",
@@ -124,7 +124,10 @@ function NavigationItem(
        }}
      >
        {image ? (
-          <Image src={image} sx={{ borderRadius: 50, size: 20 }} />
+          <Image
+            src={image}
+            sx={{ borderRadius: 50, size: 20, minWidth: 20, flexShrink: 0 }}
+          />
        ) : Icon ? (
          <Icon
            size={isTablet ? 16 : 15}