diff --git a/web/styles/app_variables.css b/web/styles/app_variables.css
index 83be4c82c7..7b32656fca 100644
--- a/web/styles/app_variables.css
+++ b/web/styles/app_variables.css
@@ -659,23 +659,12 @@
     /* Banner grid layout variables */
     --banner-horizontal-padding: 0.8125em; /* 13px at 16px/1em */
     --banner-vertical-padding: 0.3125em; /* 5px at 16px/1em */
-    --banner-grid-template-areas-lg: ". . . . . . banner-close-button banner-close-button"
-        ". . banner-label . banner-action-buttons . banner-close-button banner-close-button"
-        ". . . . . . banner-close-button banner-close-button";
-    --banner-grid-template-columns-lg: var(--banner-horizontal-padding) 0 auto
-        minmax(0, 1fr) auto 0 minmax(0, auto) var(--banner-horizontal-padding);
-    --banner-grid-template-rows-lg: 0.3125em auto 0.3125em; /* 5px at 16px/1em */
-    --banner-grid-template-areas-md: ". . . . banner-close-button banner-close-button"
-        ". . banner-label banner-label banner-close-button banner-close-button"
-        ". banner-action-buttons banner-action-buttons banner-action-buttons banner-close-button banner-close-button"
-        ". . . . banner-close-button banner-close-button";
-    --banner-grid-template-columns-md: var(--banner-horizontal-padding) 0
-        minmax(auto, 1fr) 0 minmax(0, auto) var(--banner-horizontal-padding);
-    --banner-grid-template-rows-md: 0.3125em auto auto 0.3125em; /* 5px at 16px/1em */
-    --banner-grid-template-areas-sm: ". . . . banner-close-button banner-close-button"
-        ". . banner-label banner-label banner-close-button banner-close-button"
-        ". banner-action-buttons banner-action-buttons banner-action-buttons banner-close-button banner-close-button"
-        ". . . . banner-close-button banner-close-button";
+    --banner-grid-template-areas: " . . banner-close-button banner-close-button"
+        ". banner-content banner-close-button banner-close-button"
+        ". . banner-close-button banner-close-button";
+    --banner-grid-template-columns: var(--banner-horizontal-padding)
+        minmax(0, 1fr) minmax(0, auto) var(--banner-horizontal-padding);
+    --banner-grid-template-rows: 0.3125em auto 0.3125em; /* 5px at 16px/1em */
 
     /* Popup banner related variables */
     --popup-banner-translate-y-distance: 100px;
diff --git a/web/styles/banners.css b/web/styles/banners.css
index e91a4eba00..f245e6852c 100644
--- a/web/styles/banners.css
+++ b/web/styles/banners.css
@@ -5,10 +5,10 @@
 .banner {
     box-sizing: border-box;
     display: grid;
-    grid-template: var(--banner-grid-template-rows-lg) / var(
-            --banner-grid-template-columns-lg
+    grid-template: var(--banner-grid-template-rows) / var(
+            --banner-grid-template-columns
         );
-    grid-template-areas: var(--banner-grid-template-areas-lg);
+    grid-template-areas: var(--banner-grid-template-areas);
     place-items: start;
     border: 1px solid;
     border-radius: 6px;
@@ -30,8 +30,22 @@
     }
 }
 
+.banner-content {
+    grid-area: banner-content;
+    display: flex;
+    align-items: flex-start;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 0 0.625em; /* 10px at 16px/1em */
+}
+
 .banner-label {
-    grid-area: banner-label;
+    /* We allow the banner label to grow and shrink, and set
+       the flex basis to 60% of the query container's width.
+       When the width of the banner label goes below this
+       flex basis value, the banner action buttons are wrapped
+       on to the next line.  */
+    flex: 1 1 60cqw;
     /* The padding and line-height values for the banner label
        are identical to those of the action buttons', to match
        the height of both of these elements. This is required to
@@ -44,10 +58,9 @@
 }
 
 .banner-action-buttons {
-    grid-area: banner-action-buttons;
     display: flex;
+    flex-wrap: wrap;
     gap: 0.5em; /* 8px at 16px/1em */
-    margin-left: 0.625em; /* 10px at 16px/1em */
 }
 
 .banner-close-button {
@@ -62,52 +75,69 @@
 }
 
 .navbar-alert-banner {
-    grid-template-columns:
-        var(--banner-horizontal-padding) minmax(0, 1fr)
-        auto 0 auto minmax(0, 1fr) minmax(0, auto) var(
-            --banner-horizontal-padding
-        );
     border: unset;
     border-bottom: 1px solid;
     border-radius: 0;
     place-items: start center;
-}
 
-.navbar-alert-banner .banner-action-buttons {
-    justify-content: center;
-}
+    .banner-content {
+        justify-content: center;
+        flex-wrap: nowrap;
+    }
 
-@container banner (width >= 44em) and (width < 63em) {
-    .navbar-alert-banner[data-process="desktop-notifications"] {
-        grid-template: var(--banner-grid-template-rows-md) / var(
-                --banner-grid-template-columns-md
-            );
-        grid-template-areas: var(--banner-grid-template-areas-md);
-        text-align: center;
+    .banner-label {
+        /* Reset to initial value */
+        flex: 0 1 auto;
+    }
+
+    .banner-action-buttons {
+        flex-wrap: nowrap;
     }
 }
 
-@container banner (width < 44em) {
-    .banner {
-        grid-template: var(--banner-grid-template-rows-md) / var(
-                --banner-grid-template-columns-md
-            );
-        grid-template-areas: var(--banner-grid-template-areas-md);
+/* This utility class defines the structure of the medium-type
+   navbar banners where the banner action buttons are placed
+   below the banner label. This utility class is required since
+   unlike the normal banners, the navbar counterparts have
+   horizontally centered elements, wherein the flex-basis logic
+   won't apply and we need to manually apply these properties
+   based on the container size queries below. */
+.navbar-alert-medium-banner {
+    .banner-content {
+        flex-direction: column;
+        align-items: center;
+    }
+
+    .banner-label {
+        text-align: center;
     }
 
     .banner-action-buttons {
         flex-wrap: wrap;
-        margin-left: 0;
+        justify-content: center;
     }
+}
 
+@container banner (width >= 44em) and (width < 63em) {
+    .navbar-alert-banner[data-process="desktop-notifications"] {
+        @extend .navbar-alert-medium-banner;
+    }
+}
+
+@container banner (width < 44em) {
     .navbar-alert-banner {
-        text-align: center;
+        @extend .navbar-alert-medium-banner;
     }
 }
 
 @container banner (width < 25em) {
-    .banner {
-        grid-template-areas: var(--banner-grid-template-areas-sm);
+    .banner-content {
+        flex-direction: column;
+    }
+
+    .banner-label {
+        /* Reset to initial value */
+        flex: 0 1 auto;
     }
 
     .banner-action-buttons {
diff --git a/web/templates/components/banner.hbs b/web/templates/components/banner.hbs
index 38995e459d..7b3a08f32e 100644
--- a/web/templates/components/banner.hbs
+++ b/web/templates/components/banner.hbs
@@ -1,15 +1,17 @@
 <div {{#if process}}data-process="{{process}}"{{/if}} class="{{#if custom_classes}}{{custom_classes}} {{/if}}banner banner-{{intent}}">
-    <span class="banner-label">
-        {{label}}
-    </span>
-    <span class="banner-action-buttons">
-        {{#each buttons}}
-            {{#if this.intent}}
-                {{> action_button .}}
-            {{else}}
-                {{> action_button . intent=../intent}}
-            {{/if}}
-        {{/each}}
+    <span class="banner-content">
+        <span class="banner-label">
+            {{label}}
+        </span>
+        <span class="banner-action-buttons">
+            {{#each buttons}}
+                {{#if this.intent}}
+                    {{> action_button .}}
+                {{else}}
+                    {{> action_button . intent=../intent}}
+                {{/if}}
+            {{/each}}
+        </span>
     </span>
     {{#if close_button}}
         {{> icon_button custom_classes="banner-close-action banner-close-button" icon="close" intent=intent}}