From a6d84de417d1895637e75579dece963a896a2711 Mon Sep 17 00:00:00 2001
From: Calvin Jhunjhuwala <cjhunjhnuwala@gmail.com>
Date: Wed, 3 Dec 2025 13:34:05 -0800
Subject: [PATCH] working grid for fill and auto

---
 about/grid-showcase.page.tsx               |  2 ++
 shared/components/PageGrid/_page-grid.scss |  8 ++++----
 shared/components/PageGrid/page-grid.tsx   |  7 +++----
 static/css/devportal2024-v1.css            | 16 +++++++++++-----
 4 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/about/grid-showcase.page.tsx b/about/grid-showcase.page.tsx
index b95396d8f2..2804fbe977 100644
--- a/about/grid-showcase.page.tsx
+++ b/about/grid-showcase.page.tsx
@@ -88,6 +88,8 @@ export default function GridShowcase() {
                 <PageGridRow>
                   <BorderedCol span={6}>span={6}</BorderedCol>
                   <BorderedCol span={6}>span={6}</BorderedCol>
+                  <BorderedCol>test</BorderedCol>
+                  <BorderedCol>test</BorderedCol>
                 </PageGridRow>
               </PageGrid>
             </GridDemo>
diff --git a/shared/components/PageGrid/_page-grid.scss b/shared/components/PageGrid/_page-grid.scss
index 8d614aae68..83fadac6bf 100644
--- a/shared/components/PageGrid/_page-grid.scss
+++ b/shared/components/PageGrid/_page-grid.scss
@@ -36,10 +36,11 @@ $xrpl-grid-gutter: 8px;
 }
 
 @mixin xrpl-grid-generate-fill($suffix: null) {
-  $selector: if($suffix, ".xrpl-grid__col-#{$suffix}", ".xrpl-grid__col");
+  $selector: if($suffix, ".xrpl-grid__col-#{$suffix}-fill", ".xrpl-grid__col-fill");
 
   #{$selector} {
     flex: 1 0 0;
+    width: auto;
   }
 }
 
@@ -125,6 +126,7 @@ $xrpl-grid-gutter: 8px;
 
   &__col {
     box-sizing: border-box;
+    flex: auto;
     flex-shrink: 0;
     width: 100%;
     max-width: 100%;
@@ -169,6 +171,4 @@ $xrpl-grid-gutter: 8px;
   @include xrpl-grid-generate-cols(12, 'xl');
   @include xrpl-grid-generate-auto('xl');
   @include xrpl-grid-generate-offsets(12, 'xl');
-}
-
-
+}
\ No newline at end of file
diff --git a/shared/components/PageGrid/page-grid.tsx b/shared/components/PageGrid/page-grid.tsx
index 2af68eac06..90154aa97f 100644
--- a/shared/components/PageGrid/page-grid.tsx
+++ b/shared/components/PageGrid/page-grid.tsx
@@ -40,10 +40,9 @@ const classForSpan = (prefix: string | null, value: PageGridSpanValue): string =
   }
 
   if (value === "fill") {
-    // Generates xrpl-grid__col or xrpl-grid__col-md (based on documentation)
-    // Note: The documentation states 'xrpl-grid__col' for fill, and 'xrpl-grid__col-{breakpoint}' for fill
-    // The implementation below aligns with the documentation's example logic:
-    return prefix ? `xrpl-grid__col${prefixStr}` : "xrpl-grid__col";
+    // Generates xrpl-grid__col-fill or xrpl-grid__col-md-fill
+    // This allows us to distinguish between "no span" and "span='fill'" in CSS
+    return `xrpl-grid__col${prefixStr}-fill`;
   }
 
   // Generates xrpl-grid__col-6 or xrpl-grid__col-md-6
diff --git a/static/css/devportal2024-v1.css b/static/css/devportal2024-v1.css
index 7e0f23bddc..4b134cbb65 100644
--- a/static/css/devportal2024-v1.css
+++ b/static/css/devportal2024-v1.css
@@ -13715,13 +13715,15 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
 }
 .xrpl-grid__col {
   box-sizing: border-box;
+  flex: auto;
   flex-shrink: 0;
   width: 100%;
   max-width: 100%;
 }
 
-.xrpl-grid__col {
+.xrpl-grid__col-fill {
   flex: 1 0 0;
+  width: auto;
 }
 
 .xrpl-grid__col-1 {
@@ -14022,8 +14024,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
 }
 
 @media (min-width: 576px) {
-  .xrpl-grid__col-sm {
+  .xrpl-grid__col-sm-fill {
     flex: 1 0 0;
+    width: auto;
   }
   .xrpl-grid__col-sm-1 {
     flex: 0 0 auto;
@@ -14087,8 +14090,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
   }
 }
 @media (min-width: 576px) {
-  .xrpl-grid__col-md {
+  .xrpl-grid__col-md-fill {
     flex: 1 0 0;
+    width: auto;
   }
   .xrpl-grid__col-md-1 {
     flex: 0 0 auto;
@@ -14152,8 +14156,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
   }
 }
 @media (min-width: 992px) {
-  .xrpl-grid__col-lg {
+  .xrpl-grid__col-lg-fill {
     flex: 1 0 0;
+    width: auto;
   }
   .xrpl-grid__col-lg-1 {
     flex: 0 0 auto;
@@ -14245,8 +14250,9 @@ h1:hover .hover_anchor, .h1:hover .hover_anchor, h2:hover .hover_anchor, .h2:hov
   }
 }
 @media (min-width: 1280px) {
-  .xrpl-grid__col-xl {
+  .xrpl-grid__col-xl-fill {
     flex: 1 0 0;
+    width: auto;
   }
   .xrpl-grid__col-xl-1 {
     flex: 0 0 auto;