From 92fd4e1c0ddd5f7f1cdd114a4fac2d7b1dc1e082 Mon Sep 17 00:00:00 2001
From: Myles Lewando <myles.lewando@opendataservices.coop>
Date: Thu, 16 Apr 2026 13:28:27 +0100
Subject: [PATCH] fix: add named left and right columns to summary data card

---
 src/scss/components/data-card/_data-card.scss | 13 +++-
 .../components/data-card/data-card.stories.ts | 68 ++++++++++---------
 2 files changed, 47 insertions(+), 34 deletions(-)

diff --git a/src/scss/components/data-card/_data-card.scss b/src/scss/components/data-card/_data-card.scss
index 8c2c478..53246cc 100644
--- a/src/scss/components/data-card/_data-card.scss
+++ b/src/scss/components/data-card/_data-card.scss
@@ -102,11 +102,20 @@
   }
 
   &--columns {
-    display: grid;
-    grid-template-columns: repeat(4, 1fr);
+    display: flex;
     gap: 0.5rem;
   }
 
+  &--left,
+  &--right {
+    align-content: start;
+    column-gap: 1rem;
+    display: grid;
+    flex: 1;
+    grid-template-columns: auto 1fr;
+    row-gap: 0.5rem;
+  }
+
   &--column {
     font-size: 0.75rem;
     line-height: 2;
diff --git a/src/scss/components/data-card/data-card.stories.ts b/src/scss/components/data-card/data-card.stories.ts
index a478778..98393bc 100644
--- a/src/scss/components/data-card/data-card.stories.ts
+++ b/src/scss/components/data-card/data-card.stories.ts
@@ -150,40 +150,44 @@ export const Summary: Story = {
       </header>
       <div class="iati-data-card--body">
         <div class="iati-data-card--columns">
-          <div class="iati-data-card--column iati-data-card--column-title">
-            Datapoint name
-          </div>
-          <div class="iati-data-card--column">
-            <a href="#">link</a>
-          </div>
-          <div class="iati-data-card--column iati-data-card--column-title">
-            Datapoint name
-          </div>
-          <div class="iati-data-card--column">
-            <code>1</code> <code>2</code>
-          </div>
-          <div class="iati-data-card--column iati-data-card--column-title">
-            Datapoint name
-          </div>
-          <div class="iati-data-card--column">
-            <code>INLINE CODE BLOCK</code>
-          </div>
-          <div class="iati-data-card--column iati-data-card--column-title">
-            Datapoint name
-          </div>
-          <div class="iati-data-card--column">
-            <span class="iati-reference">reference_item</span>
-          </div>
-          <div class="iati-data-card--column iati-data-card--column-title">
-            Datapoint name
-          </div>
-          <div class="iati-data-card--column">
-            <code>ANOTHER INLINE CODE BLOCK</code>
+          <div class="iati-data-card--left">
+            <div class="iati-data-card--column iati-data-card--column-title">
+              Datapoint name
+            </div>
+            <div class="iati-data-card--column">
+              <a href="#">link</a>
+            </div>
+            <div class="iati-data-card--column iati-data-card--column-title">
+              Datapoint name
+            </div>
+            <div class="iati-data-card--column">
+              <code>INLINE CODE BLOCK</code>
+            </div>
+            <div class="iati-data-card--column iati-data-card--column-title">
+              Datapoint name
+            </div>
+            <div class="iati-data-card--column">
+              <code>ANOTHER INLINE CODE BLOCK</code>
+            </div>
+            <div class="iati-data-card--column iati-data-card--column-title">
+              Datapoint name
+            </div>
+            <div class="iati-data-card--column">
+              <code>1</code> <code>2</code>
+            </div>
           </div>
-          <div class="iati-data-card--column iati-data-card--column-title">
-            Datapoint name
+          <div class="iati-data-card--right">
+            <div class="iati-data-card--column iati-data-card--column-title">
+              Datapoint name
+            </div>
+            <div class="iati-data-card--column">
+              <span class="iati-reference">reference_item</span>
+            </div>
+            <div class="iati-data-card--column iati-data-card--column-title">
+              Datapoint name
+            </div>
+            <div class="iati-data-card--column">generic text</div>
           </div>
-          <div class="iati-data-card--column">generic text</div>
         </div>
         <div class="iati-data-card__stats">
           <div class="iati-data-card__stat">