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 { 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 { 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() { /> - -

- {t("max_content_width.apply_changes_description")}