refactor(cxl-ui): fix cxl-stats layout for team dashboard

conversionxl · Nov 14, 2023 · d9850c0 · d9850c0
1 parent 49e8993
commit d9850c0
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 9 deletions.
diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-header.scss b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss
@@ -21,7 +21,10 @@
     @media #{mq.$small} {
       display: flex;
       justify-content: space-between;
-      padding: var(--lumo-space-l) 0;
+    }
+
+    @media #{mq.$large} {
+      padding: var(--lumo-space-xl) 0;
     }
   }
 

diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss b/packages/cxl-ui/scss/cxl-dashboard-team-stats.scss
@@ -20,10 +20,13 @@
     @include mixins.pesudo-element-full-width(var(--cxl-color-light-gray));
 
     @media #{mq.$small} {
-      padding: var(--lumo-space-xl) 0;
       padding-bottom: calc(var(--lumo-space-xl) + var(--lumo-space-l));
     }
 
+    @media #{mq.$large} {
+      padding: var(--lumo-space-xl) 0;
+    }
+
     header {
       display: flex;
       justify-content: space-between;
@@ -53,6 +56,7 @@
       display: flex;
       flex-direction: column-reverse;
       justify-content: space-between;
+      gap: var(--lumo-space-l);
 
       .progress {
         min-width: 280px;

diff --git a/packages/cxl-ui/scss/cxl-stats.scss b/packages/cxl-ui/scss/cxl-stats.scss
@@ -4,23 +4,19 @@
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: var(--lumo-space-m);
-  padding: var(--lumo-space-xl) var(--lumo-space-m) var(--lumo-space-m);
-
-  @media #{mq.$small} {
-    padding: var(--lumo-space-xl) var(--lumo-space-l) var(--lumo-space-l);
-  }
 
   @media #{mq.$medium} {
-    grid-template-columns: repeat(4, 1fr);
+    display: flex;
   }
 }
 
 :host([theme~="cxl-stats-dashboard-header"]) {
-  margin-top: var(--lumo-space-m);
   padding: 0;
+  margin-top: var(--lumo-space-m);
   border: 0;
 
   @media #{mq.$medium} {
+    padding-top: var(--lumo-space-s);
     margin-top: 0;
     gap: var(--lumo-space-l);
   }