codexmate 0.0.20 → 0.0.22

package/web-ui/styles/responsive.css

@@ -12,61 +12,54 @@ textarea:focus-visible {
 }
 
 @media (max-width: 1280px) {
+    :root {
+        --side-rail-width: 224px;
+    }
     .app-shell {
-        grid-template-columns: 240px minmax(0, 1fr) 300px;
-        gap: 14px;
+        grid-template-columns: 224px minmax(0, 1fr);
+        gap: 0;
     }
 
-    .status-inspector {
-        top: 16px;
-        height: calc(100vh - 32px);
+    .main-panel {
+        padding: 0 20px 20px;
     }
 
-    .main-panel {
-        padding: var(--spacing-sm) var(--spacing-md);
+    .main-panel-topbar {
+        margin: 0 -20px 12px;
+        padding: 0 20px 10px;
     }
+
 }
 
 @media (max-width: 960px) {
+    :root {
+        --side-rail-width: 188px;
+    }
     .container {
-        padding: 12px;
+        padding: 0;
     }
     .app-shell {
-        grid-template-columns: 1fr;
-    }
-    .side-rail {
-        display: none;
-    }
-    .status-inspector {
-        display: none;
-    }
-    .hero-logo {
-        display: block;
-    }
-    .hero-github {
-        display: flex;
-    }
-    .github-badge-mobile {
-        width: 100%;
-    }
-    .github-badge-mobile .github-badge-text,
-    .github-badge-mobile .github-badge-label {
-        font-size: var(--font-size-secondary);
+        grid-template-columns: 188px minmax(0, 1fr);
+        gap: 0;
     }
     .main-panel {
-        padding: var(--spacing-sm) var(--spacing-sm);
-        border-radius: 14px;
+        padding: 0 16px 16px;
+        border-radius: 0;
+        min-height: 0;
+    }
+    .main-panel-topbar {
+        margin: 0 -16px 12px;
+        padding: 0 16px 10px;
     }
     .top-tabs {
-        display: grid !important;
-        grid-template-columns: repeat(2, minmax(0, 1fr));
+        display: none !important;
     }
     .status-strip {
-        gap: var(--spacing-sm);
-        margin-top: 4px;
+        grid-template-columns: repeat(2, minmax(0, 1fr));
+        gap: 8px;
+        margin-top: 2px;
     }
     .status-chip {
-        flex: 1 1 calc(50% - var(--spacing-sm));
         min-width: 0;
     }
 
@@ -89,17 +82,71 @@ textarea:focus-visible {
 }
 
 @media (max-width: 720px) {
-    .main-title {
-        font-size: 40px;
+    :root {
+        --side-rail-width: min(188px, 46vw);
+    }
+    .app-shell {
+        grid-template-columns: 1fr;
+        min-height: auto;
+        height: auto;
+        overflow: visible;
+    }
+
+    .side-rail {
+        display: none;
+    }
+
+    .lang-fab {
+        display: block;
+    }
+
+    .top-tabs {
+        display: flex !important;
+        flex-wrap: nowrap;
+        overflow-x: auto;
+        overflow-y: hidden;
+        padding-bottom: 2px;
+        margin-left: -2px;
+        margin-right: -2px;
+    }
+
+    .main-panel {
+        padding: 0 12px 16px;
+        height: auto;
+        overflow-y: visible;
     }
 
-    .hero-title {
-        font-size: 32px;
+    .main-panel-topbar {
+        position: static;
+        margin: 0 0 10px;
+        padding: 0;
+        background: transparent;
+        backdrop-filter: none;
+    }
+
+    .panel-header-refined {
+        margin-left: 0;
+        margin-right: 0;
+        padding: 14px 0 12px;
+    }
+
+    .main-title {
+        font-size: 18px;
     }
 
     .subtitle {
-        font-size: var(--font-size-secondary);
-        margin-bottom: 16px;
+        font-size: 12px;
+        margin-bottom: 0;
+        line-height: 1.4;
+    }
+
+    .panel-kicker {
+        display: none;
+    }
+
+    .top-tabs {
+        margin: 8px 0 10px;
+        gap: 5px;
     }
 
     .segmented-control {
@@ -108,8 +155,8 @@ textarea:focus-visible {
     }
 
     .status-strip {
-        flex-direction: row;
-        flex-wrap: wrap;
+        grid-template-columns: 1fr;
+        gap: 12px;
     }
 
     .market-grid {
@@ -120,9 +167,6 @@ textarea:focus-visible {
         grid-template-columns: 1fr;
     }
 
-    .status-chip {
-        flex: 1 1 100%;
-    }
 }
 
 @media (max-width: 540px) {
@@ -139,24 +183,17 @@ textarea:focus-visible {
         height: 44px;
         min-height: 44px;
     }
-
-    body {
-        padding: var(--spacing-md) var(--spacing-sm);
-    }
-    .container {
-        padding: 0 var(--spacing-sm) var(--spacing-md);
-    }
-    .hero-title {
-        font-size: 32px;
-    }
-    .hero-subtitle {
-        font-size: var(--font-size-secondary);
-    }
     .top-tabs {
-        grid-template-columns: repeat(1, minmax(0, 1fr));
+        gap: 5px;
+        margin: 2px 0 8px;
+        padding-right: 14px;
     }
     .main-panel {
-        padding: var(--spacing-sm);
+        padding: 0 10px 12px;
+    }
+
+    .main-panel-topbar {
+        margin-bottom: 8px;
     }
     .card {
         padding: 12px;
@@ -172,7 +209,6 @@ textarea:focus-visible {
     }
 
     .status-chip {
-        flex: 1 1 100%;
         min-width: 100%;
     }
 
@@ -286,10 +322,14 @@ textarea:focus-visible {
 
     .trash-item-actions .btn-mini {
         width: 100%;
+        height: 44px;
         min-height: 44px;
+        padding: 0 10px;
         display: inline-flex;
         align-items: center;
         justify-content: center;
+        line-height: 1;
+        white-space: nowrap;
     }
 
     .trash-item .session-count-badge {

package/web-ui/styles/sessions-list.css

@@ -86,7 +86,7 @@
 
 .trash-item-actions {
     display: grid;
-    grid-template-columns: repeat(2, minmax(108px, 108px));
+    grid-template-columns: repeat(2, minmax(116px, 116px));
     align-self: flex-end;
     justify-content: flex-end;
     gap: 8px;
@@ -94,10 +94,14 @@
 
 .trash-item-actions .btn-mini {
     width: 100%;
-    min-height: 36px;
+    height: 38px;
+    min-height: 38px;
+    padding: 0 12px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    line-height: 1;
+    white-space: nowrap;
 }
 
 .trash-item-time {
@@ -178,34 +182,16 @@
     max-height: none;
     overflow-y: auto;
     overflow-x: hidden;
-    padding-right: 4px;
+    padding-right: 0;
     min-width: 0;
-    scrollbar-width: thin;
-    scrollbar-color: rgba(166, 149, 130, 0.85) transparent;
-}
-
-.session-list::-webkit-scrollbar,
-.session-preview-scroll::-webkit-scrollbar {
-    width: 10px;
-    height: 10px;
-}
-
-.session-list::-webkit-scrollbar-track,
-.session-preview-scroll::-webkit-scrollbar-track {
-    background: transparent;
-    border-radius: 999px;
-}
-
-.session-list::-webkit-scrollbar-thumb,
-.session-preview-scroll::-webkit-scrollbar-thumb {
-    background: linear-gradient(to bottom, rgba(191, 174, 154, 0.95) 0%, rgba(160, 141, 121, 0.95) 100%);
-    border-radius: 999px;
-    border: 2px solid rgba(255, 255, 255, 0.9);
+    scrollbar-width: none;
+    -ms-overflow-style: none;
 }
 
-.session-list::-webkit-scrollbar-thumb:hover,
-.session-preview-scroll::-webkit-scrollbar-thumb:hover {
-    background: linear-gradient(to bottom, rgba(175, 156, 136, 0.95) 0%, rgba(145, 126, 107, 0.95) 100%);
+.session-list::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
 }
 
 .session-item {

package/web-ui/styles/sessions-preview.css

@@ -9,11 +9,17 @@
     min-height: 0;
     overflow-y: auto;
     overflow-x: hidden;
-    padding-right: 68px;
+    padding-right: 52px;
     display: flex;
     flex-direction: column;
-    scrollbar-width: thin;
-    scrollbar-color: rgba(166, 149, 130, 0.85) transparent;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+}
+
+.session-preview-scroll::-webkit-scrollbar {
+    width: 0;
+    height: 0;
+    display: none;
 }
 
 .session-preview-header {
@@ -111,9 +117,9 @@
 .session-timeline {
     position: absolute;
     top: var(--session-preview-header-offset, 72px);
-    right: 8px;
+    right: 4px;
     bottom: 12px;
-    width: 56px;
+    width: 44px;
     height: auto;
     border-radius: 12px;
     border: 1px solid rgba(208, 196, 182, 0.5);
@@ -165,8 +171,8 @@
 
 .session-timeline-current {
     position: absolute;
-    left: 4px;
-    right: 4px;
+    left: 3px;
+    right: 3px;
     bottom: 4px;
     font-size: 10px;
     line-height: 1.2;

package/web-ui/styles/sessions-toolbar-trash.css

@@ -14,6 +14,10 @@
     min-width: 0;
 }
 
+.session-toolbar-secondary {
+    justify-content: flex-end;
+}
+
 .session-toolbar-grow {
     grid-column: 1 / -1;
 }
@@ -72,6 +76,27 @@
     min-width: 220px;
 }
 
+@media (min-width: 980px) {
+    /* Wider screens: align left/right control groups, keep query spanning full width. */
+    .session-toolbar {
+        grid-template-columns: repeat(12, minmax(0, 1fr));
+        gap: 10px;
+    }
+
+    .session-toolbar-primary {
+        grid-column: span 6;
+    }
+
+    .session-toolbar-secondary {
+        grid-column: span 6;
+        justify-content: flex-end;
+    }
+
+    .session-toolbar-grow {
+        grid-column: 1 / -1;
+    }
+}
+
 .session-source-select:hover,
 .session-path-select:hover,
 .session-query-input:hover,