From 786298d6e285de66c3e274065a55bf4e3f926425 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Pawe=C5=82=20Kopoci=C5=84ski?= <pawel@kopocinski.pl>
Date: Thu, 11 Jan 2024 11:47:50 +0100
Subject: [PATCH] refactor(cxl-ui): cxl-certificate-header[completed]
 credential adjustments

Adjust width of the content and credential depending on the screen size.
---
 .../cxl-ui/scss/cxl-certificate-header.scss   | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/packages/cxl-ui/scss/cxl-certificate-header.scss b/packages/cxl-ui/scss/cxl-certificate-header.scss
index de4d92ada..e633ef4d8 100644
--- a/packages/cxl-ui/scss/cxl-certificate-header.scss
+++ b/packages/cxl-ui/scss/cxl-certificate-header.scss
@@ -101,15 +101,39 @@
 }
 
 :host([theme~="completed"]) {
+  &::before {
+    display: none;
+  }
+
   color: var(--lumo-shade);
   background-color: var(--lumo-tint);
 
-  @media #{mq.$medium} {
-    @include mixins.pesudo-element-full-width(var(--lumo-tint));
+  .container {
+    @media #{mq.$small} {
+      display: block;
+    }
+
+    @media #{mq.$medium} {
+      display: flex;
+      justify-content: space-between;
+      gap: var(--lumo-space-m);
+    }
   }
 
   .credential {
     padding-top: 0;
     border-top: none;
+
+    @media #{mq.$small} {
+      max-width: var(--cxl-hero-certificate-max-width);
+    }
+
+    @media #{mq.$medium} {
+      max-width: calc( var(--cxl-hero-certificate-max-width) / 2 );
+    }
+
+    @media #{mq.$large} {
+      max-width: var(--cxl-hero-certificate-max-width);
+    }
   }
 }