Pull actions in from the extreme edges and match #main width

app/assets/stylesheets/_global.css

@@ -63,6 +63,10 @@
     --tray-size: var(--footer-height);
   }
 
+  /* Layout */
+  --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
+  --main-width: 1400px;
+
   /* Z-index */
   --z-events-column-header: 1;
   --z-events-day-header: 3;

app/assets/stylesheets/card-columns.css

@@ -12,7 +12,7 @@
     --bubble-size: 3.5rem;
 
     container-type: inline-size;
-    max-inline-size: 1400px;
+    max-inline-size: var(--main-width);
 
     @media (max-width: 639px) {
       --bubble-gap: -0.5rem;

app/assets/stylesheets/header.css

@@ -13,7 +13,7 @@
       "menu menu menu"
       "actions-start title actions-end";
     max-inline-size: 100dvw;
-    padding: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--inline-space);
+    padding: calc(var(--block-space-half) + env(safe-area-inset-top)) var(--main-padding);
     view-transition-name: header;
 
     /* Change the grid size depending on how many buttons are present */
@@ -25,6 +25,12 @@
       row-gap: var(--block-space-half);
     }
 
+    &:has(~ #main .card-columns) {
+      inline-size: 100dvw;
+      margin-inline: auto;
+      max-inline-size: var(--main-width);
+    }
+
     nav {
       grid-area: menu;
       margin-inline: auto;

app/assets/stylesheets/layout.css

@@ -9,8 +9,6 @@
   }
 
   :where(#main) {
-    --main-padding: clamp(var(--inline-space), 3vw, calc(var(--inline-space) * 3));
-
     inline-size: 100dvw;
     margin-inline: auto;
     max-inline-size: 100dvw;

app/assets/stylesheets/popup.css

@@ -32,7 +32,6 @@
     }
 
     #header:has(&) {
-      max-inline-size: 100vw;
       position: relative;
       z-index: 5;
     }