From d9850c0e2556192db7844e1b0546ca070fdaf760 Mon Sep 17 00:00:00 2001
From: Raphael Mattos <raphael.mattos@contextaware.com.br>
Date: Mon, 13 Nov 2023 22:31:52 -0300
Subject: [PATCH] refactor(cxl-ui): fix cxl-stats layout for team dashboard

---
 packages/cxl-ui/scss/cxl-dashboard-team-header.scss |  5 ++++-
 packages/cxl-ui/scss/cxl-dashboard-team-stats.scss  |  6 +++++-
 packages/cxl-ui/scss/cxl-stats.scss                 | 10 +++-------
 3 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/packages/cxl-ui/scss/cxl-dashboard-team-header.scss b/packages/cxl-ui/scss/cxl-dashboard-team-header.scss
index 9934774a1..0ebbb21b8 100644
--- 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
index d2afd5561..6bbe866d5 100644
--- 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
index 3c3f10106..7624244ab 100644
--- 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);
   }