From 9dbbcdd39d293fd183ada538cecb3595adff2f79 Mon Sep 17 00:00:00 2001
From: Steven Straatemans <steven@straatemans.nl>
Date: Wed, 27 Nov 2024 16:01:18 +0100
Subject: [PATCH] fixes in loader

---
 .../SectionCard/SectionCard.stories.tsx       |  3 -
 .../src/patterns/SectionCard/style.css.ts     | 55 ++++++++++++++++---
 2 files changed, 46 insertions(+), 12 deletions(-)

diff --git a/packages/libs/kode-ui/src/patterns/SectionCard/SectionCard.stories.tsx b/packages/libs/kode-ui/src/patterns/SectionCard/SectionCard.stories.tsx
index 06b392c505..2d6f414dbd 100644
--- a/packages/libs/kode-ui/src/patterns/SectionCard/SectionCard.stories.tsx
+++ b/packages/libs/kode-ui/src/patterns/SectionCard/SectionCard.stories.tsx
@@ -155,7 +155,6 @@ export const withIcon: Story = {
     description: <>Our section is awesome</>,
     actions: <Actions />,
     children: 'This is the content for our section',
-    intent: 'info',
   },
   render: ({ stack, title, description, children, actions, intent }) => {
     return (
@@ -234,7 +233,6 @@ export const reverseBackground: Story = {
     description: <>Our section is awesome</>,
     actions: <Actions />,
     children: 'This is the content for our section',
-    intent: 'info',
   },
   render: ({ stack, title, description, children, actions, intent }) => {
     return (
@@ -270,7 +268,6 @@ export const noBackground: Story = {
     description: <>Our section is awesome</>,
     actions: <Actions />,
     children: 'This is the content for our section',
-    intent: 'info',
   },
   render: ({ stack, title, description, children, actions, intent }) => {
     return (
diff --git a/packages/libs/kode-ui/src/patterns/SectionCard/style.css.ts b/packages/libs/kode-ui/src/patterns/SectionCard/style.css.ts
index 068c1b1d81..365bb8e85e 100644
--- a/packages/libs/kode-ui/src/patterns/SectionCard/style.css.ts
+++ b/packages/libs/kode-ui/src/patterns/SectionCard/style.css.ts
@@ -5,10 +5,10 @@ export const headerClass = recipe({
     atoms({
       paddingInlineStart: 'n8',
       paddingBlockEnd: 'n8',
-
       paddingInlineEnd: 'lg',
       gap: 'md',
       alignItems: 'flex-start',
+      overflowX: 'hidden',
     }),
     {
       display: 'grid !important',
@@ -34,7 +34,18 @@ export const headerClass = recipe({
       horizontal: [
         responsiveStyle({
           xs: {
+            gridTemplateColumns: `1fr`,
+            gridTemplateRows: `max-content max-content max-content 1fr`,
+            gridTemplateAreas: `
+                  "header"
+                  "description"
+                  "actions"
+                  "fill"
+              `,
+          },
+          sm: {
             gridTemplateColumns: `2fr 1fr`,
+            gridTemplateRows: `max-content max-content`,
             gridTemplateAreas: `
                   "header actions"
                   "description actions"
@@ -52,13 +63,27 @@ export const headerClass = recipe({
           },
         }),
       ],
-      vertical: {
-        ridTemplateColumns: `2fr 1fr`,
-        gridTemplateAreas: `
+      vertical: [
+        responsiveStyle({
+          xs: {
+            gridTemplateColumns: `1fr`,
+            gridTemplateRows: `max-content max-content max-content 1fr`,
+            gridTemplateAreas: `
+                  "header"
+                  "description"
+                  "actions"
+                  "fill"
+              `,
+          },
+          sm: {
+            gridTemplateColumns: `2fr 1fr`,
+            gridTemplateAreas: `
                   "header actions"
                   "description actions"
               `,
-      },
+          },
+        }),
+      ],
     },
   },
 });
@@ -118,6 +143,9 @@ export const actionsClass = recipe({
       horizontal: [
         responsiveStyle({
           xs: {
+            justifyContent: 'flex-start',
+          },
+          sm: {
             justifyContent: 'flex-end',
           },
           md: {
@@ -125,9 +153,16 @@ export const actionsClass = recipe({
           },
         }),
       ],
-      vertical: {
-        justifyContent: 'flex-end',
-      },
+      vertical: [
+        responsiveStyle({
+          xs: {
+            justifyContent: 'flex-start',
+          },
+          sm: {
+            justifyContent: 'flex-end',
+          },
+        }),
+      ],
     },
   },
 });
@@ -178,6 +213,7 @@ export const iconWrapperClass = recipe({
       borderRadius: 'round',
       backgroundColor: 'layer.solid',
       border: 'normal',
+      borderColor: 'base.default',
     }),
     {
       boxSizing: 'border-box',
@@ -190,7 +226,8 @@ export const iconWrapperClass = recipe({
   variants: {
     isLoading: {
       true: {
-        border: 'none!important',
+        border: `${token('border.normal')} !important`,
+        borderColor: `${token('color.border.base.default')} !important`,
       },
       false: {},
     },