diff --git a/app/globals.css b/app/globals.css
index c8fbe73d..60c2207b 100644
--- a/app/globals.css
+++ b/app/globals.css
@@ -107,9 +107,8 @@
     --highlight-3: 255, 205, 195;
 
     --list-marker-width: 36px;
-    --page-width-unitless: 624;
     --page-width-unitless: min(
-      var(--page-width-unitless),
+      var(--page-width-setting),
       calc(var(--leaflet-width-unitless) - 12)
     );
     --page-width-units: min(
@@ -134,7 +133,7 @@
     :root {
       /*picks between max width and screen width with 64px of padding*/
       --page-width-unitless: min(
-        var(--page-width-unitless),
+        var(--page-width-setting),
         calc(var(--leaflet-width-unitless) - 128)
       );
       --page-width-units: min(
diff --git a/components/ThemeManager/ThemeProvider.tsx b/components/ThemeManager/ThemeProvider.tsx
index e1084794..01e3ba65 100644
--- a/components/ThemeManager/ThemeProvider.tsx
+++ b/components/ThemeManager/ThemeProvider.tsx
@@ -204,7 +204,7 @@ export const BaseThemeProvider = ({
 
     // Set page width CSS variable
     el?.style.setProperty(
-      "--page-width-unitless",
+      "--page-width-setting",
       (pageWidth || 624).toString(),
     );
   }, [
@@ -238,7 +238,9 @@ export const BaseThemeProvider = ({
             : "color-mix(in oklab, rgb(var(--accent-contrast)), rgb(var(--bg-page)) 75%)",
           "--highlight-2": colorToString(highlight2, "rgb"),
           "--highlight-3": colorToString(highlight3, "rgb"),
+          "--page-width-setting": pageWidth || 624,
           "--page-width-unitless": pageWidth || 624,
+          "--page-width-units": `min(${pageWidth || 624}px, calc(100vw - 12px))`,
         } as CSSProperties
       }
     >