Fix mobile settings layout overflow

src/modules/features/SettingDialogue/ObsidianLiveSyncSettingTab.ts

@@ -82,6 +82,14 @@ import { isP2PMainRemote } from "@/common/remoteConfiguration.ts";
 // For creating a document
 // const toc = new Set<string>();
 
+function registerLiveSyncSettingsModal(component: Component, containerEl: HTMLElement | undefined): void {
+    if (!containerEl) return;
+    const modalEl = containerEl.closest<HTMLElement>(".modal.mod-settings");
+    if (!modalEl) return;
+    modalEl.addClass("sls-setting-modal");
+    component.register(() => modalEl.removeClass("sls-setting-modal"));
+}
+
 export class ObsidianLiveSyncSettingTab extends PluginSettingTab {
     plugin: ObsidianLiveSyncPlugin;
     private _lifetimeComponent?: Component;
@@ -701,6 +709,7 @@ export class ObsidianLiveSyncSettingTab extends PluginSettingTab {
     private renderCustomPage(page: SettingPage, entry: SettingsPageEntry): Component {
         if (requireApiVersion("1.13.0")) {
             const component = this.beginRenderScope(() => page.display());
+            registerLiveSyncSettingsModal(component, this.containerEl);
             this.isShown = true;
             page.title = entry.name();
             page.containerEl.empty();
@@ -1083,8 +1092,9 @@ export class ObsidianLiveSyncSettingTab extends PluginSettingTab {
     private displayImperative(): void {
         const changeDisplay = this.changeDisplay.bind(this);
         // Make sure the page-owned component is loaded for markdown rendering in panes.
-        this.beginRenderScope(() => this.displayImperative());
+        const component = this.beginRenderScope(() => this.displayImperative());
         const { containerEl } = this;
+        registerLiveSyncSettingsModal(component, containerEl);
         this.screenElements = {};
         if (this._editingSettings == undefined || this.initialSettings == undefined) {
             this.reloadAllSettings();

src/modules/features/SettingDialogue/PanePatches.ts

@@ -177,7 +177,7 @@ export function panePatches(this: ObsidianLiveSyncSettingTab, paneEl: HTMLElemen
         new Setting(paneEl).autoWireToggle("disableCheckingConfigMismatch");
     });
     void addPanel(paneEl, "Remediation").then((paneEl) => {
-        const setting = new Setting(paneEl);
+        const setting = new Setting(paneEl).setClass("sls-setting-mobile-wrap-controls");
         const dateEl = setting.controlEl.createSpan();
         setting
             .addText((text) => {

src/modules/features/SettingDialogue/PanePatches.unit.spec.ts

@@ -12,11 +12,13 @@ const remediationHarness = vi.hoisted(() => {
         onChange: vi.fn(),
         setValue: vi.fn(),
     };
+    const setClass = vi.fn();
 
     return {
         createSpan,
         dateElement,
         inputEl,
+        setClass,
         textComponent,
     };
 });
@@ -36,6 +38,11 @@ vi.mock("./LiveSyncSetting.ts", () => ({
             return this;
         }
 
+        setClass(value: string): this {
+            remediationHarness.setClass(value);
+            return this;
+        }
+
         addApplyButton(): this {
             return this;
         }
@@ -93,5 +100,6 @@ describe("panePatches remediation setting", () => {
         expect(createSpan).not.toHaveBeenCalled();
         expect(remediationHarness.createSpan).toHaveBeenCalledOnce();
         expect(remediationHarness.dateElement.textContent).toBe("No limit configured");
+        expect(remediationHarness.setClass).toHaveBeenCalledWith("sls-setting-mobile-wrap-controls");
     });
 });

src/modules/features/SettingDialogue/PaneRemoteConfig.ts

@@ -105,7 +105,9 @@ export function paneRemoteConfig(
         void addPanel(paneEl, "E2EE Configuration", () => {}).then((paneEl) => {
             const infoPanel = new SveltePanel(InfoPanel, paneEl, E2EESummaryWritable);
             this.lifetimeComponent.register(() => infoPanel.destroy());
-            const setupButton = new Setting(paneEl).setName("Configure E2EE");
+            const setupButton = new Setting(paneEl)
+                .setName("Configure E2EE")
+                .setClass("sls-setting-mobile-wrap-controls");
             setupButton
                 .addButton((button) =>
                     setButtonDestructiveState(button)

src/modules/features/SettingDialogue/PaneRemoteConfig.unit.spec.ts

@@ -30,6 +30,10 @@ vi.mock("./LiveSyncSetting.ts", () => ({
             return this;
         }
 
+        setClass() {
+            return this;
+        }
+
         addButton() {
             return this;
         }