From 219a2eda265b0113840843b95a81ad44d9974afb Mon Sep 17 00:00:00 2001
From: Jacob Pihl <jacob@reload.dk>
Date: Fri, 17 Nov 2023 15:45:40 +0100
Subject: [PATCH] Improved mobile styling for banner

The previous styling did not handle small screens very well. This both takes care for smaller devices and cleans up some CSS.
---
 .../pause-reservation/pause-reservation.scss  | 24 +++++++++----------
 1 file changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/stories/Library/pause-reservation/pause-reservation.scss b/src/stories/Library/pause-reservation/pause-reservation.scss
index 24e32968d..3e5f93e86 100644
--- a/src/stories/Library/pause-reservation/pause-reservation.scss
+++ b/src/stories/Library/pause-reservation/pause-reservation.scss
@@ -17,6 +17,12 @@
     flex-wrap: wrap;
     width: 100%;
     align-items: center;
+    justify-content: center;
+    gap: $s-sm;
+
+    @include breakpoint-xs {
+      justify-content: start;
+    }
 
     &__reservation-icon {
       justify-content: center;
@@ -27,28 +33,22 @@
 
     &__text {
       @extend %text-body-large;
-      @extend %pl-8;
     }
 
     &__badge {
       background-color: $c-global-primary;
-      @extend %pl-8;
-      @extend %pr-8;
-      @extend %pt-4;
-      @extend %pb-4;
+      padding: $s-xs $s-sm;
       @extend %text-body-medium-medium;
-      margin-left: 32px;
-
-      @include breakpoint-s {
-        margin-left: 8px;
-      }
     }
 
     &__button {
       display: flex;
       flex: 1;
-      justify-content: flex-end;
-      @extend %ml-8;
+      justify-content: center;
+
+      @include breakpoint-xs {
+        justify-content: flex-end;
+      }
     }
   }
 }