refactor: breakpoint styles.

Author: knightedcodemonkey

src/styles/ai-controls.css

@@ -1029,7 +1029,7 @@
   accent-color: var(--accent);
 }
 
-@media (max-width: 1090px) {
+@media (width <= 1090px) {
   .app-grid-layout-controls {
     flex-wrap: nowrap;
   }
@@ -1045,7 +1045,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .app-grid-layout-controls {
     flex-wrap: nowrap;
   }

src/styles/base.css

@@ -200,7 +200,7 @@ body {
   color: var(--shell-text);
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   body {
     height: auto;
     min-height: 100dvh;

src/styles/diagnostics.css

@@ -217,7 +217,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .diagnostics-drawer {
     top: auto;
     right: 24px;

src/styles/dialogs-overlays.css

@@ -87,7 +87,7 @@
   outline-offset: 1px;
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .panel-header-main-actions .controls,
   .controls--actions {
     justify-content: flex-start;
@@ -128,7 +128,7 @@
   transform: translateY(0);
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .app-toast {
     left: 12px;
     right: 12px;

src/styles/layout-shell.css

@@ -255,7 +255,7 @@
   border-right: 1px solid var(--border-subtle);
 }
 
-@media (max-width: 1090px) {
+@media (width <= 1090px) {
   .app-grid-layout-controls {
     display: inline-flex;
     flex-direction: row;
@@ -287,15 +287,15 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .app-grid-ai-toggle:not([hidden]) {
     display: inline-flex;
     align-items: center;
     gap: 7px;
   }
 }
 
-@media (max-width: 640px) {
+@media (width <= 640px) {
   .app-header {
     flex-direction: column;
     align-items: flex-start;
@@ -391,20 +391,24 @@
   max-height: none;
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .app-header {
     z-index: 200;
   }
 
-  .app-grid {
+  .app-grid,
+  .app-grid.app-grid--workspace-context-visible,
+  .app-grid.app-grid--preview-collapsed-horizontal,
+  .app-grid.app-grid--workspace-context-visible.app-grid--preview-collapsed-horizontal {
     --mobile-editor-max-height: clamp(280px, 42dvh, 520px);
     --mobile-preview-max-height: clamp(320px, 52dvh, 680px);
     grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto auto auto auto;
+    grid-template-rows: auto auto auto auto auto;
     height: auto;
     grid-template-areas:
       'layout-controls'
       'workspace-tabs'
+      'workspace-context'
       'editors'
       'preview';
   }
@@ -444,8 +448,6 @@
   }
 
   .app-grid.app-grid--preview-collapsed-horizontal {
-    grid-template-columns: minmax(0, 1fr);
-    grid-template-rows: auto;
     min-height: 0;
   }
 

src/styles/panels-editor.css

@@ -580,7 +580,7 @@ textarea:focus {
   display: none;
 }
 
-@media (max-width: 900px) {
+@media (width <= 900px) {
   .panel-collapse-toggle {
     width: 32px;
     height: 32px;

src/styles/preview-controls.css

@@ -168,7 +168,7 @@
   stroke-linejoin: round;
 }
 
-@media (max-width: 480px) {
+@media (width <= 480px) {
   .preview-bg-label {
     position: absolute;
     width: 1px;