@letsprogram/ng-oat 0.1.7 → 0.1.8

package/assets/oat/oat.css

@@ -1387,18 +1387,23 @@
     grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
   }
 
-  /* Container-query breakpoints for .grid children */
-  @container (min-width: 640px) {
+  /* .grid template-columns use @media (viewport) — a container cannot query
+   * its own size via @container; those rules would query the *parent* container,
+   * causing mismatches in sidebar layouts where content width < 1024px. */
+  @media (min-width: 640px) {
     .grid {
       grid-template-columns: repeat(2, 1fr);
     }
   }
 
-  @container (min-width: 1024px) {
+  @media (min-width: 1024px) {
     .grid {
       grid-template-columns: repeat(var(--grid-cols, 12), 1fr);
     }
+  }
 
+  /* Children's column span responds to the .grid container's own width */
+  @container (min-width: 640px) {
     .grid>* {
       grid-column: span var(--span, 1);
     }
@@ -1417,7 +1422,7 @@
     --grid-cols: 4;
   }
 
-  @container (min-width: 640px) {
+  @media (min-width: 640px) {
 
     .grid.cols-2,
     .grid.cols-3,
@@ -1426,7 +1431,7 @@
     }
   }
 
-  @container (min-width: 1024px) {
+  @media (min-width: 1024px) {
     .grid.cols-2 {
       grid-template-columns: repeat(2, 1fr);
     }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@letsprogram/ng-oat",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "description": "Angular component library built on top of the Oat CSS framework — signals-first, lightweight, and accessible.",
   "license": "MIT",
   "author": "SashiKumar Yadav",