From 4063229982526c4d00cb20035b4d2ebac7f18d27 Mon Sep 17 00:00:00 2001
From: Adorian Doran <adorian@esevo.ro>
Date: Thu, 30 Oct 2025 00:49:02 +0200
Subject: [PATCH] client: allow changing the max content width option without a
 frontend reload

---
 apps/client/src/widgets/containers/root_container.ts  | 11 +++++++++++
 .../src/widgets/type_widgets/options/appearance.tsx   |  4 ----
 apps/server/src/routes/index.ts                       |  1 -
 3 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/apps/client/src/widgets/containers/root_container.ts b/apps/client/src/widgets/containers/root_container.ts
index 2e532ac3d..4ab82ffdc 100644
--- a/apps/client/src/widgets/containers/root_container.ts
+++ b/apps/client/src/widgets/containers/root_container.ts
@@ -31,6 +31,7 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
             window.visualViewport?.addEventListener("resize", () => this.#onMobileResize());
         }
 
+        this.#setMaxContentWidth(options.getInt("maxContentWidth") ?? 0);
         this.#setMotion(options.is("motionEnabled"));
         this.#setShadows(options.is("shadowsEnabled"));
         this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
@@ -52,14 +53,24 @@ export default class RootContainer extends FlexContainer<BasicWidget> {
         if (loadResults.isOptionReloaded("backdropEffectsEnabled")) {
             this.#setBackdropEffects(options.is("backdropEffectsEnabled"));
         }
+
+        if (loadResults.isOptionReloaded("maxContentWidth")) {
+            this.#setMaxContentWidth(options.getInt("maxContentWidth") ?? 0);
+        }
     }
 
+
     #onMobileResize() {
         const currentViewportHeight = getViewportHeight();
         const isKeyboardOpened = (currentViewportHeight < this.originalViewportHeight);
         this.$widget.toggleClass("virtual-keyboard-opened", isKeyboardOpened);
     }
 
+    #setMaxContentWidth(width: number) {
+        width = Math.max(width, 640);
+        document.body.style.setProperty("--preferred-max-content-width", `${width}px`);
+    }
+
     #setMotion(enabled: boolean) {
         document.body.classList.toggle("motion-disabled", !enabled);
         jQuery.fx.off = !enabled;
diff --git a/apps/client/src/widgets/type_widgets/options/appearance.tsx b/apps/client/src/widgets/type_widgets/options/appearance.tsx
index 20ace18f7..7a6431f35 100644
--- a/apps/client/src/widgets/type_widgets/options/appearance.tsx
+++ b/apps/client/src/widgets/type_widgets/options/appearance.tsx
@@ -299,10 +299,6 @@ function MaxContentWidth() {
                     />
                 </FormGroup>
             </Column>
-
-            <p>
-                {t("max_content_width.apply_changes_description")} <Button text={t("max_content_width.reload_button")} size="micro" onClick={reloadFrontendApp} />
-            </p>
         </OptionsSection>
     )
 }
diff --git a/apps/server/src/routes/index.ts b/apps/server/src/routes/index.ts
index ea4821e3a..cde9885f0 100644
--- a/apps/server/src/routes/index.ts
+++ b/apps/server/src/routes/index.ts
@@ -57,7 +57,6 @@ function index(req: Request, res: Response) {
         isDev,
         isMainWindow: view === "mobile" ? true : !req.query.extraWindow,
         isProtectedSessionAvailable: protectedSessionService.isProtectedSessionAvailable(),
-        maxContentWidth: Math.max(640, parseInt(options.maxContentWidth)),
         triliumVersion: packageJson.version,
         assetPath,
         appPath,