Narrow mobile settings layout fix

src/modules/features/SettingDialogue/ObsidianLiveSyncSettingTab.ts

@@ -82,14 +82,6 @@ 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;
@@ -709,7 +701,6 @@ 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();
@@ -1092,9 +1083,8 @@ 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.
-        const component = this.beginRenderScope(() => this.displayImperative());
+        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).setClass("sls-setting-mobile-wrap-controls");
+        const setting = new Setting(paneEl).setClass("sls-setting-subsequent-buttons");
         const dateEl = setting.controlEl.createSpan();
         setting
             .addText((text) => {

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

@@ -100,6 +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");
+        expect(remediationHarness.setClass).toHaveBeenCalledWith("sls-setting-subsequent-buttons");
     });
 });

src/modules/features/SettingDialogue/PaneRemoteConfig.ts

@@ -107,7 +107,7 @@ export function paneRemoteConfig(
             this.lifetimeComponent.register(() => infoPanel.destroy());
             const setupButton = new Setting(paneEl)
                 .setName("Configure E2EE")
-                .setClass("sls-setting-mobile-wrap-controls");
+                .setClass("sls-setting-subsequent-buttons");
             setupButton
                 .addButton((button) =>
                     setButtonDestructiveState(button)

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

@@ -2,6 +2,7 @@ import { afterEach, describe, expect, it, vi } from "vitest";
 
 const runtime = vi.hoisted(() => ({
     panels: [] as Array<{ destroy: ReturnType<typeof vi.fn> }>,
+    settingClasses: [] as string[],
 }));
 
 vi.mock("@vrtmrz/livesync-commonlib/compat/common/types", () => ({
@@ -30,7 +31,8 @@ vi.mock("./LiveSyncSetting.ts", () => ({
             return this;
         }
 
-        setClass() {
+        setClass(value: string) {
+            runtime.settingClasses.push(value);
             return this;
         }
 
@@ -90,6 +92,7 @@ function createPanelElement(): HTMLElement {
 
 afterEach(() => {
     runtime.panels.length = 0;
+    runtime.settingClasses.length = 0;
     vi.clearAllMocks();
 });
 
@@ -109,6 +112,7 @@ describe("paneRemoteConfig", () => {
 
         paneRemoteConfig.call(host as never, {} as HTMLElement, { addPanel } as never);
         await vi.waitFor(() => expect(runtime.panels).toHaveLength(1));
+        expect(runtime.settingClasses).toContain("sls-setting-subsequent-buttons");
 
         lifetimeComponent.unload();