@mshuja288/aksuicore 0.4.0 → 0.4.1

package/src/theme/patterns.css

@@ -736,7 +736,6 @@ button.sort-header.active .sort-indicator {
 
 .row-actions-mobile {
   display: none;
-  position: relative;
 }
 
 button.row-action-menu-trigger {
@@ -752,7 +751,8 @@ button.row-action-menu-trigger svg {
   height: 18px;
 }
 
-button.row-action-menu-trigger:hover {
+button.row-action-menu-trigger:hover,
+button.row-action-menu-trigger.open {
   transform: none;
   background: #f4f2ef;
   color: var(--aks-brand);
@@ -760,12 +760,8 @@ button.row-action-menu-trigger:hover {
 }
 
 .row-action-menu {
-  position: absolute;
-  top: calc(100% + 4px);
-  right: 0;
-  z-index: 5;
   display: grid;
-  min-width: 132px;
+  min-width: 160px;
   padding: 6px;
   border: 1px solid var(--aks-line);
   border-radius: var(--aks-radius);
@@ -773,10 +769,15 @@ button.row-action-menu-trigger:hover {
   box-shadow: 0 12px 28px rgba(30, 39, 53, 0.14);
 }
 
+.row-action-menu-portal {
+  position: fixed;
+  z-index: 90;
+}
+
 .row-action-menu button {
   justify-content: flex-start;
   width: 100%;
-  padding: 8px 10px;
+  padding: 10px 12px;
   font-size: 13px;
   font-weight: 600;
   color: var(--aks-brand);
@@ -793,6 +794,13 @@ button.row-action-menu-trigger:hover {
   box-shadow: none;
 }
 
+/* Mobile tools bar + right drawer — hidden on desktop */
+.tools-mobile-bar,
+.tools-drawer-backdrop,
+.tools-drawer {
+  display: none;
+}
+
 button.row-action {
   padding: 4px 8px;
   font-size: 12px;
@@ -890,6 +898,95 @@ button.row-action.danger:not(:disabled):hover {
 }
 
 @media (max-width: 900px) {
+  .list-workspace {
+    gap: 10px;
+  }
+
+  .tools-mobile-bar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 10px;
+    flex: 0 0 auto;
+    min-height: 48px;
+    padding: 6px 8px 6px 10px;
+    border: 1px solid var(--aks-line);
+    border-radius: var(--aks-radius);
+    background: #fff;
+  }
+
+  .tools-mobile-bar-start {
+    min-width: 0;
+    flex: 1 1 auto;
+  }
+
+  .tools-mobile-title {
+    margin: 0;
+    color: var(--aks-brand);
+    font-size: 13px;
+    font-weight: 700;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  button.tools-mobile-add {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 36px;
+    padding: 6px 12px;
+    border-radius: var(--aks-radius);
+    background: var(--aks-brand);
+    color: #fff;
+    font-size: 13px;
+    font-weight: 600;
+    box-shadow: none;
+  }
+
+  button.tools-mobile-add svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  button.tools-mobile-add:hover {
+    transform: none;
+    background: #2a3546;
+    box-shadow: none;
+  }
+
+  button.tools-mobile-toggle {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    min-height: 36px;
+    padding: 6px 12px;
+    border: 1px solid var(--aks-line);
+    border-radius: var(--aks-radius);
+    background: #faf9f7;
+    color: var(--aks-brand);
+    font-size: 13px;
+    font-weight: 600;
+    box-shadow: none;
+  }
+
+  button.tools-mobile-toggle svg {
+    width: 16px;
+    height: 16px;
+  }
+
+  button.tools-mobile-toggle:hover {
+    transform: none;
+    background: #f0eeea;
+    box-shadow: none;
+  }
+
+  button.tools-mobile-toggle .filter-badge {
+    position: static;
+    margin-left: 2px;
+  }
+
   .list-body {
     flex-direction: column;
   }
@@ -899,30 +996,101 @@ button.row-action.danger:not(:disabled):hover {
     flex-direction: column;
   }
 
-  .preview-panel,
-  .side-rail,
-  .side-rail.open {
-    width: 100%;
-    flex-basis: auto;
+  /* Desktop side-rail becomes a right drawer on small screens */
+  .list-body > .side-rail {
+    display: none;
   }
 
-  .side-rail:not(.open) {
-    flex-direction: row;
-    align-items: center;
+  .preview-panel {
     width: 100%;
     flex-basis: auto;
-    order: -1;
+    order: 2;
   }
 
-  .side-rail:not(.open) .side-rail-icons {
-    display: inline-flex;
-    flex-wrap: wrap;
-    margin-left: auto;
-    gap: 4px;
+  .tools-drawer-backdrop {
+    display: block;
+    position: fixed;
+    inset: 0;
+    z-index: 55;
+    border: 0;
+    padding: 0;
+    margin: 0;
+    background: rgba(30, 39, 53, 0.42);
+    opacity: 0;
+    pointer-events: none;
+    transition: opacity 160ms ease;
+    box-shadow: none;
+  }
+
+  .tools-drawer-backdrop.open {
+    opacity: 1;
+    pointer-events: auto;
+  }
+
+  .tools-drawer {
+    display: flex;
+    flex-direction: column;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 60;
+    width: min(320px, calc(100vw - 40px));
+    background: #fff;
+    border-left: 1px solid var(--aks-line);
+    box-shadow: -12px 0 32px rgba(30, 39, 53, 0.18);
+    transform: translateX(105%);
+    transition: transform 180ms ease;
+    pointer-events: none;
+  }
+
+  .tools-drawer.open {
+    transform: translateX(0);
+    pointer-events: auto;
+  }
+
+  .tools-drawer-head {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+    flex: 0 0 auto;
+    padding: 16px 16px 12px;
+    border-bottom: 1px solid var(--aks-line);
+    background: #faf9f7;
+  }
+
+  .tools-drawer-kicker {
+    margin: 0;
+    color: var(--aks-accent);
+    font-size: 11px;
+    font-weight: 700;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+  }
+
+  .tools-drawer-head h3 {
+    margin: 2px 0 0;
+    color: var(--aks-brand);
+    font-size: 16px;
+    font-weight: 700;
+  }
+
+  button.tools-drawer-close {
+    padding: 6px 10px;
+    font-size: 12px;
+    box-shadow: none;
+  }
+
+  .tools-drawer-body {
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+    padding: 14px;
   }
 
-  .side-rail.open {
-    order: -1;
+  .tools-drawer-body .side-rail-body {
+    padding: 0;
   }
 
   .table-card-bar {

package/src/theme/primitives.css

@@ -38,7 +38,9 @@ button.side-rail-icon:hover,
 button.side-rail-columns-toggle:hover,
 button.filter-clear:hover,
 button.snackbar-close:hover,
-button.nav-drawer-close:hover {
+button.nav-drawer-close:hover,
+button.tools-mobile-toggle:hover,
+button.tools-drawer-close:hover {
   transform: none;
 }