Update claim card status tag to accomodate long status names.

DFE-Digital · Oct 10, 2024 · 526b00c · 526b00c
1 parent 9946691
commit 526b00c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 2 deletions.
diff --git a/app/assets/stylesheets/components/_all.scss b/app/assets/stylesheets/components/_all.scss
@@ -8,6 +8,6 @@
 @import "organisation_list_item";
 @import "phase_banner";
 @import "primary_navigation";
-@import "secondary_navigation";
 @import "search_results";
+@import "secondary_navigation";
 @import "typography";
diff --git a/app/assets/stylesheets/components/claim/card.scss b/app/assets/stylesheets/components/claim/card.scss
@@ -8,9 +8,14 @@
 
   .claim-card__header {
     display: flex;
+    flex-direction: row;
     justify-content: space-between;
     align-items: flex-start;
-    gap: govuk-spacing(2);
+    gap: govuk-spacing(1) govuk-spacing(2);
+
+    @include govuk-media-query($until: desktop) {
+      flex-direction: column;
+    }
 
     .claim-card__header__name {
       display: flex;
@@ -43,4 +48,12 @@
       margin-bottom: govuk-spacing(1);
     }
   }
+
+  .govuk-tag {
+    @include govuk-font($size: 16);
+
+    @include govuk-media-query($until: desktop) {
+      margin-bottom: govuk-spacing(1);
+    }
+  }
 }