@agentiffai/design 1.3.4 → 1.3.6

package/dist/layout/index.js

@@ -578,6 +578,30 @@ var Container2 = styled9.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.div`
   display: flex;
@@ -608,6 +632,7 @@ var BackButton = styled9.button`
   align-items: center;
   justify-content: center;
   transition: all ${tokens.transitions.normal};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     background-color: ${tokens.colors.primary};
@@ -615,6 +640,7 @@ var BackButton = styled9.button`
 
   &:active {
     transform: translate(-50%, -50%) scale(0.95);
+    opacity: 0.8;
   }
 
   &:focus {
@@ -665,6 +691,12 @@ var FolderGroupsSlot = styled9.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.div`
   position: absolute;
@@ -681,11 +713,19 @@ var BottomSection = styled9.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.button`
   width: 40px;
   height: 40px;
-  border-radius: 0;
+  border-radius: ${tokens.borderRadius.full};
   border: none;
   background-color: transparent;
   color: white;
@@ -694,6 +734,7 @@ var BottomButton = styled9.button`
   align-items: center;
   justify-content: center;
   transition: all ${tokens.transitions.normal};
+  -webkit-tap-highlight-color: transparent;
 
   &:hover {
     opacity: 0.7;
@@ -701,6 +742,7 @@ var BottomButton = styled9.button`
 
   &:active {
     transform: scale(0.95);
+    opacity: 0.8;
   }
 
   &:focus {
@@ -710,6 +752,7 @@ var BottomButton = styled9.button`
   &:focus-visible {
     outline: 2px solid ${tokens.colors.border.focus};
     outline-offset: 2px;
+    border-radius: ${tokens.borderRadius.full};
   }
 `;
 function NavVertical({
@@ -785,6 +828,7 @@ var BackgroundPane = styled9.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 */
@@ -823,6 +867,7 @@ var MainPane = styled9.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 */
@@ -899,7 +944,7 @@ var ActionButton = styled9.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};
@@ -909,6 +954,7 @@ var ActionButton = styled9.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};
@@ -917,6 +963,7 @@ var ActionButton = styled9.button`
 
   &:active {
     transform: scale(0.95);
+    opacity: 0.8;
   }
 
   ${({ $isActive, $isPrimary }) => $isActive && !$isPrimary && css`
@@ -1575,6 +1622,7 @@ var TabPanelWrapper = styled9.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