Merge pull request #1101 from maykinmedia/fix/1811-warning-header-icon

💄 [#1811] Fix spacing warning-header text
maykinmedia · Mar 20, 2024 · 62e7777 · 62e7777
2 parents ca2fca6 + 3f77976
commit 62e7777
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 3 deletions.
diff --git a/src/open_inwoner/components/templates/components/Header/WarningHeader.html b/src/open_inwoner/components/templates/components/Header/WarningHeader.html
@@ -9,7 +9,7 @@
 
 <div class="warning-header">
     <div class="warning-header__container">
-        <span class="warning-header__icon">{% icon icon="error_outlined" icon_position="after" outlined=True %}</span>
+        <span class="warning-header__icon">{% icon icon="error_outlined" outlined=True %}</span>
         <span class="warning-header__text">{{ warning_banner_text }}</span>
     </div>
 </div>
diff --git a/src/open_inwoner/scss/components/WarningHeader/WarningHeader.scss b/src/open_inwoner/scss/components/WarningHeader/WarningHeader.scss
@@ -7,14 +7,16 @@
     display: flex;
     align-items: flex-start;
     padding: 0;
-    margin: 0 auto;
+    margin: 0;
 
     @media (min-width: 768px) {
       max-width: var(--container-width);
+      margin: 0
+        max((100vw - var(--container-width)) / 2 - 7px, var(--spacing-large));
     }
 
     .warning-header__text {
-      padding: var(--spacing-small);
+      padding: var(--spacing-tiny) 0 0 0;
     }
 
     *[class*='icon'],