feat: fix out of display components on mobile #5380 (#5399)

Author: ffischbach-ino

src/components/CookieNotice/CookieNotice.scss

@@ -13,6 +13,13 @@
 
 .cookie-notice__buttons {
   display: flex;
+  flex-wrap: wrap;
+  gap: $spacing--xs;
+  margin-top: $spacing--base;
+
+  @media (max-width: 768px) {
+    flex-direction: column-reverse;
+  }
 }
 
 .cookie-notice__button {
@@ -26,19 +33,21 @@
     @extend .cookie-notice__button;
     background: $blue--500;
     color: $gray--000;
-    margin: 0 0 $spacing--base $spacing--base;
   }
   &-decline {
     @extend .cookie-notice__button;
     background: $gray--300;
     color: $navy--700;
-    margin: 0 0 $spacing--base $spacing--base;
   }
   &-cookie-policy {
     @extend .cookie-notice__button;
     background: $gray--300;
     color: $navy--700;
-    margin: 0 auto $spacing--base 0;
+    flex: 1;
+
+    @media (max-width: 768px) {
+      flex: none;
+    }
   }
 }
 

src/components/Templates/AccessSettings/AccessSettings.scss

@@ -6,12 +6,14 @@
   display: flex;
   justify-content: center;
   align-items: center;
+  overflow-y: auto;
 }
 
 .access-settings {
   display: flex;
   flex-direction: column;
   gap: $spacing--xl;
+  overflow-y: auto;
 
   width: 37%;
 
@@ -45,9 +47,13 @@
 }
 
 @media screen and (max-width: $breakpoint--smartphone) {
-  .access-settings {
-    width: 75%;
+  .access-settings__wrapper {
+    padding: $spacing--xs;
+  }
 
+  .access-settings {
+    height: 90%;
+    width: 85%;
     gap: $spacing--md;
 
     padding: $spacing--xl $spacing--base $spacing--base $spacing--base;