@agentiffai/design 1.3.5 → 1.3.6

package/dist/layout/index.cjs

@@ -584,6 +584,30 @@ var Container2 = styled9__default.default.nav`
   @media (max-width: ${tokens.breakpoints.tablet}px) {
     width: 60px; /* Match MainPane left offset on mobile */
   }
+
+  /* Mobile landscape: allow content to overflow and scroll with thin scrollbar */
+  @media (orientation: landscape) and (max-height: 500px) {
+    width: 60px;
+    overflow-y: auto;
+    overflow-x: hidden;
+    scrollbar-width: thin; /* Firefox - show thin scrollbar */
+
+    /* Show thin scrollbar for Chrome, Safari */
+    &::-webkit-scrollbar {
+      display: block;
+      width: 3px;
+      height: 3px;
+    }
+
+    &::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: ${tokens.colors.border.default};
+      border-radius: 2px;
+    }
+  }
 `;
 var TopSection = styled9__default.default.div`
   display: flex;
@@ -614,6 +638,7 @@ var BackButton = styled9__default.default.button`
   align-items: center;
   justify-content: center;
   transition: all ${tokens.transitions.normal};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     background-color: ${tokens.colors.primary};
@@ -621,6 +646,7 @@ var BackButton = styled9__default.default.button`
 
   &:active {
     transform: translate(-50%, -50%) scale(0.95);
+    opacity: 0.8;
   }
 
   &:focus {
@@ -671,6 +697,12 @@ var FolderGroupsSlot = styled9__default.default.div`
   @media (max-width: ${tokens.breakpoints.tablet}px) {
     padding: 0 6px ${tokens.spacing.md} 96px; /* Reduce horizontal padding on mobile */
   }
+
+  /* Mobile landscape: remove extra padding since BottomSection flows with content */
+  @media (orientation: landscape) and (max-height: 500px) {
+    padding-bottom: ${tokens.spacing.md};
+    flex: 0 0 auto; /* Don't flex-grow, allow natural height */
+  }
 `;
 var BottomSection = styled9__default.default.div`
   position: absolute;
@@ -687,11 +719,19 @@ var BottomSection = styled9__default.default.div`
   @media (prefers-color-scheme: dark) {
     background-color: ${tokens.colors.background.darkest};
   }
+
+  /* Mobile landscape: make bottom section flow with content instead of fixed */
+  @media (orientation: landscape) and (max-height: 500px) {
+    position: relative;
+    bottom: auto;
+    margin-top: auto; /* Push to bottom of flex container */
+    flex-shrink: 0;
+  }
 `;
 var BottomButton = styled9__default.default.button`
   width: 40px;
   height: 40px;
-  border-radius: 0;
+  border-radius: ${tokens.borderRadius.full};
   border: none;
   background-color: transparent;
   color: white;
@@ -700,6 +740,7 @@ var BottomButton = styled9__default.default.button`
   align-items: center;
   justify-content: center;
   transition: all ${tokens.transitions.normal};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     opacity: 0.7;
@@ -707,6 +748,7 @@ var BottomButton = styled9__default.default.button`
 
   &:active {
     transform: scale(0.95);
+    opacity: 0.8;
   }
 
   &:focus {
@@ -716,6 +758,7 @@ var BottomButton = styled9__default.default.button`
   &:focus-visible {
     outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
+    border-radius: ${tokens.borderRadius.full};
   }
 `;
 function NavVertical({
@@ -791,6 +834,7 @@ var BackgroundPane = styled9__default.default.div`
   bottom: 52px; /* Height of horizontal nav */
   background-color: transparent;
   overflow: auto;
+  scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */
   z-index: ${tokens.zIndex.base}; /* Lower than MainPane */
 
   /* Custom scrollbar styling */
@@ -829,6 +873,7 @@ var MainPane = styled9__default.default.main`
   bottom: 52px; /* Height of horizontal nav */
   background-color: ${tokens.colors.surface.overlay};
   overflow: auto;
+  scrollbar-gutter: stable; /* Reserve space for scrollbar to prevent layout shift */
   z-index: ${tokens.zIndex.base + 1}; /* Higher than BackgroundPane */
 
   /* Custom scrollbar styling */
@@ -905,7 +950,7 @@ var ActionButton = styled9__default.default.button`
   height: ${({ $size = 32 }) => $size}px;
   min-width: ${({ $size = 32 }) => $size}px;
   min-height: ${({ $size = 32 }) => $size}px;
-  border-radius: ${({ $isPrimary }) => $isPrimary ? tokens.borderRadius.full : tokens.borderRadius.sm};
+  border-radius: ${({ $isPrimary }) => $isPrimary ? tokens.borderRadius.full : tokens.borderRadius.md};
   border: none;
   background-color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.primary : "transparent"};
   color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.text.primary : tokens.colors.text.secondary};
@@ -915,6 +960,7 @@ var ActionButton = styled9__default.default.button`
   justify-content: center;
   transition: all ${tokens.transitions.fast};
   font-size: ${tokens.typography.fontSize.base};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     background-color: ${({ $isPrimary }) => $isPrimary ? tokens.colors.secondary : tokens.colors.surface.overlayHover};
@@ -923,6 +969,7 @@ var ActionButton = styled9__default.default.button`
 
   &:active {
     transform: scale(0.95);
+    opacity: 0.8;
   }
 
   ${({ $isActive, $isPrimary }) => $isActive && !$isPrimary && styled9.css`
@@ -1581,6 +1628,7 @@ var TabPanelWrapper = styled9__default.default.div`
   padding: ${tokens.spacing.lg};
   overflow-y: auto;
   overflow-x: hidden; // Prevent horizontal overflow
+  scrollbar-gutter: stable; // Always reserve space for scrollbar to prevent width jump
   background-color: ${tokens.colors.surface.overlay};
   min-height: 0; // Enable proper flex shrinking and scrolling