Refine mobile settings action layout markers

Releasing 1.0.20

src/modules/features/SettingDialogue/PanePatches.ts

@@ -9,7 +9,7 @@ import { Logger } from "@vrtmrz/livesync-commonlib/compat/common/logger";
 import { LiveSyncSetting as Setting } from "./LiveSyncSetting.ts";
 import type { ObsidianLiveSyncSettingTab } from "./ObsidianLiveSyncSettingTab.ts";
 import type { PageFunctions } from "./SettingPane.ts";
-import { visibleOnly } from "./SettingPane.ts";
+import { markSettingRowWithSubsequentButtons, markSubsequentButton, visibleOnly } from "./SettingPane.ts";
 import { PouchDB } from "@vrtmrz/livesync-commonlib/compat/pouchdb/pouchdb-browser";
 import { ExtraSuffixIndexedDB } from "@vrtmrz/livesync-commonlib/compat/common/types";
 import { migrateDatabases } from "./settingUtils.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 = markSettingRowWithSubsequentButtons(new Setting(paneEl));
         const dateEl = setting.controlEl.createSpan();
         setting
             .addText((text) => {
@@ -215,6 +215,9 @@ export function panePatches(this: ObsidianLiveSyncSettingTab, paneEl: HTMLElemen
             })
             .setAuto("maxMTimeForReflectEvents")
             .addApplyButton(["maxMTimeForReflectEvents"]);
+        if (setting.applyButtonComponent) {
+            markSubsequentButton(setting.applyButtonComponent);
+        }
 
         this.addOnSaved("maxMTimeForReflectEvents", async (key) => {
             const buttons = ["Restart Now", "Later"] as const;

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

@@ -12,17 +12,26 @@ const remediationHarness = vi.hoisted(() => {
         onChange: vi.fn(),
         setValue: vi.fn(),
     };
+    const addButtonClass = vi.fn();
+    const setClass = vi.fn();
 
     return {
+        addButtonClass,
         createSpan,
         dateElement,
         inputEl,
+        setClass,
         textComponent,
     };
 });
 
 vi.mock("./LiveSyncSetting.ts", () => ({
     LiveSyncSetting: class LiveSyncSetting {
+        applyButtonComponent = {
+            buttonEl: {
+                addClass: remediationHarness.addButtonClass,
+            },
+        };
         controlEl = {
             createSpan: remediationHarness.createSpan,
         };
@@ -36,6 +45,11 @@ vi.mock("./LiveSyncSetting.ts", () => ({
             return this;
         }
 
+        setClass(value: string): this {
+            remediationHarness.setClass(value);
+            return this;
+        }
+
         addApplyButton(): this {
             return this;
         }
@@ -93,5 +107,7 @@ 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-row-with-subsequent-buttons");
+        expect(remediationHarness.addButtonClass).toHaveBeenCalledWith("sls-setting-subsequent-button");
     });
 });

src/modules/features/SettingDialogue/PaneRemoteConfig.ts

@@ -11,7 +11,12 @@ import { Menu, type ButtonComponent } from "@/deps.ts";
 import { $msg } from "@/common/translation";
 import { LiveSyncSetting as Setting } from "./LiveSyncSetting.ts";
 import type { ObsidianLiveSyncSettingTab } from "./ObsidianLiveSyncSettingTab.ts";
-import { setButtonDestructiveState, type PageFunctions } from "./SettingPane.ts";
+import {
+    markSettingRowWithSubsequentButtons,
+    markSubsequentButton,
+    setButtonDestructiveState,
+    type PageFunctions,
+} from "./SettingPane.ts";
 // import { visibleOnly } from "./SettingPane.ts";
 import InfoPanel from "./InfoPanel.svelte";
 import { writable } from "svelte/store";
@@ -105,10 +110,10 @@ 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 = markSettingRowWithSubsequentButtons(new Setting(paneEl).setName("Configure E2EE"));
             setupButton
                 .addButton((button) =>
-                    setButtonDestructiveState(button)
+                    setButtonDestructiveState(markSubsequentButton(button))
                         .onClick(async () => {
                             const setupManager = this.core.getModule(SetupManager);
                             const originalSettings = getSettingsFromEditingSettings(this.editingSettings);
@@ -118,7 +123,7 @@ export function paneRemoteConfig(
                         .setButtonText("Configure")
                 )
                 .addButton((button) =>
-                    setButtonDestructiveState(button)
+                    setButtonDestructiveState(markSubsequentButton(button))
                         .onClick(async () => {
                             const setupManager = this.core.getModule(SetupManager);
                             const originalSettings = getSettingsFromEditingSettings(this.editingSettings);

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

@@ -1,7 +1,9 @@
 import { afterEach, describe, expect, it, vi } from "vitest";
 
 const runtime = vi.hoisted(() => ({
+    buttonClasses: [] as string[],
     panels: [] as Array<{ destroy: ReturnType<typeof vi.fn> }>,
+    settingClasses: [] as string[],
 }));
 
 vi.mock("@vrtmrz/livesync-commonlib/compat/common/types", () => ({
@@ -30,7 +32,25 @@ vi.mock("./LiveSyncSetting.ts", () => ({
             return this;
         }
 
-        addButton() {
+        setClass(value: string) {
+            runtime.settingClasses.push(value);
+            return this;
+        }
+
+        addButton(callback: (button: unknown) => void) {
+            const button = {
+                buttonEl: {
+                    addClass: (value: string) => runtime.buttonClasses.push(value),
+                    classList: { toggle: vi.fn() },
+                },
+                onClick() {
+                    return this;
+                },
+                setButtonText() {
+                    return this;
+                },
+            };
+            callback(button);
             return this;
         }
 
@@ -85,7 +105,9 @@ function createPanelElement(): HTMLElement {
 }
 
 afterEach(() => {
+    runtime.buttonClasses.length = 0;
     runtime.panels.length = 0;
+    runtime.settingClasses.length = 0;
     vi.clearAllMocks();
 });
 
@@ -96,7 +118,13 @@ describe("paneRemoteConfig", () => {
             register: vi.fn((callback: () => unknown) => callbacks.push(callback)),
             unload: vi.fn(() => callbacks.splice(0).forEach((callback) => callback())),
         };
-        const addPanel = vi.fn((_parent: HTMLElement, _heading: string) => Promise.resolve(createPanelElement()));
+        const addPanel = vi.fn((_parent: HTMLElement, heading: string) => ({
+            then(callback: (paneEl: HTMLElement) => void) {
+                if (heading === "E2EE Configuration") {
+                    callback(createPanelElement());
+                }
+            },
+        }));
         const host = {
             editingSettings: { remoteConfigurations: {} },
             core: { settings: { remoteConfigurations: {} } },
@@ -105,6 +133,8 @@ 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-row-with-subsequent-buttons");
+        expect(runtime.buttonClasses).toEqual(["sls-setting-subsequent-button", "sls-setting-subsequent-button"]);
 
         lifetimeComponent.unload();
 

src/modules/features/SettingDialogue/SettingPane.ts

@@ -6,7 +6,7 @@ import {
     type ConfigLevel,
 } from "@vrtmrz/livesync-commonlib/compat/common/types";
 import type { AllSettingItemKey, AllSettings } from "./settingConstants";
-import type { ButtonComponent } from "@/deps.ts";
+import type { ButtonComponent, Setting } from "@/deps.ts";
 
 export const combineOnUpdate = (func1: OnUpdateFunc, func2: OnUpdateFunc): OnUpdateFunc => {
     return () => ({
@@ -58,6 +58,18 @@ export function setButtonDestructiveState(button: ButtonComponent, isDestructive
     return button;
 }
 
+/** Marks a setting row whose selected action buttons may wrap onto separate lines. */
+export function markSettingRowWithSubsequentButtons<T extends Setting>(setting: T): T {
+    setting.setClass("sls-setting-row-with-subsequent-buttons");
+    return setting;
+}
+
+/** Marks an action button which may wrap onto a later line in its setting row. */
+export function markSubsequentButton(button: ButtonComponent): ButtonComponent {
+    button.buttonEl.addClass("sls-setting-subsequent-button");
+    return button;
+}
+
 export function visibleOnly(cond: () => boolean): OnUpdateFunc {
     return () => ({
         visibility: cond(),

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

@@ -1,6 +1,6 @@
-import type { ButtonComponent } from "@/deps.ts";
+import type { ButtonComponent, Setting } from "@/deps.ts";
 import { describe, expect, it, vi } from "vitest";
-import { setButtonDestructiveState } from "./SettingPane.ts";
+import { markSettingRowWithSubsequentButtons, markSubsequentButton, setButtonDestructiveState } from "./SettingPane.ts";
 
 type CompatibleButton = ButtonComponent & {
     setDestructive?: () => ButtonComponent;
@@ -10,6 +10,7 @@ type CompatibleButton = ButtonComponent & {
 function createButton(overrides: Partial<CompatibleButton> = {}): CompatibleButton {
     return {
         buttonEl: {
+            addClass: vi.fn(),
             classList: {
                 toggle: vi.fn(),
             },
@@ -18,6 +19,30 @@ function createButton(overrides: Partial<CompatibleButton> = {}): CompatibleButt
     } as unknown as CompatibleButton;
 }
 
+function createSetting(): Setting {
+    return {
+        setClass: vi.fn().mockReturnThis(),
+    } as unknown as Setting;
+}
+
+describe("markSettingRowWithSubsequentButtons", () => {
+    it("marks only the supplied setting row as containing subsequent actions", () => {
+        const setting = createSetting();
+
+        expect(markSettingRowWithSubsequentButtons(setting)).toBe(setting);
+        expect(setting.setClass).toHaveBeenCalledWith("sls-setting-row-with-subsequent-buttons");
+    });
+});
+
+describe("markSubsequentButton", () => {
+    it("marks only the supplied button as a subsequent action", () => {
+        const button = createButton();
+
+        expect(markSubsequentButton(button)).toBe(button);
+        expect(button.buttonEl.addClass).toHaveBeenCalledWith("sls-setting-subsequent-button");
+    });
+});
+
 describe("setButtonDestructiveState", () => {
     it("uses the native destructive-button API when it is available", () => {
         const setDestructive = vi.fn();

styles.css

@@ -536,14 +536,31 @@ div.workspace-leaf-content[data-type="bases"] .livesync-status {
 }
 
 .sls-setting-panel-title {
-    position: sticky;
     font-size: medium;
-    top: 2.5em;
     background-color: var(--background-secondary-alt);
     border-radius: 10px;
     padding: 0.5em 1em;
 }
 
+body.is-mobile .sls-setting button {
+    max-width: 100%;
+    white-space: normal;
+}
+
+body.is-mobile .sls-setting-row-with-subsequent-buttons {
+    flex-wrap: wrap;
+}
+
+body.is-mobile .sls-setting-row-with-subsequent-buttons .setting-item-control {
+    min-width: 0;
+    flex: 1 1 100%;
+    flex-wrap: wrap;
+}
+
+body.is-mobile .sls-setting .sls-setting-subsequent-button {
+    flex: 1 1 12rem;
+}
+
 .active-pane .sls-setting-panel-title {
     border: 1px solid var(--interactive-accent);
 }

test/e2e-obsidian/scripts/settings-ui.ts

@@ -1,8 +1,12 @@
 import { mkdir } from "node:fs/promises";
 import { VER } from "@vrtmrz/livesync-commonlib/compat/common/types";
 import { discoverObsidianCli, requireObsidianBinary } from "../runner/environment.ts";
-import { waitForLiveSyncCoreReady } from "../runner/liveSyncWorkflow.ts";
-import { assertMobileDialogueLayout, setObsidianMobileTestMode } from "../runner/mobileUi.ts";
+import { createE2eObsidianDeviceLocalState, waitForLiveSyncCoreReady } from "../runner/liveSyncWorkflow.ts";
+import {
+    assertMobileDialogueLayout,
+    setObsidianMobileTestMode,
+    setObsidianMobileTestModeBeforePluginStart,
+} from "../runner/mobileUi.ts";
 import { startObsidianLiveSyncSession, type ObsidianLiveSyncSession } from "../runner/session.ts";
 import {
     allowPendingObsidianTestVaultOpenAction,
@@ -160,39 +164,194 @@ async function setConfiguredStateForLandingInspection(page: Page, configured: bo
     }, configured);
 }
 
-async function captureDeclarativeMobileLanding(): Promise<string | undefined> {
+async function captureDeclarativeMobileSettings(): Promise<
+    | {
+          landingPage: string;
+          maintenance: string;
+          patches: string;
+          remoteConfiguration: string;
+      }
+    | undefined
+> {
     const port = obsidianRemoteDebuggingPort();
-    await setObsidianMobileTestMode(port, true, uiTimeoutMs);
-    try {
-        return await withObsidianPage(port, async (page) => {
-            const settingsNavigator = await openLiveSyncSettings(page, uiTimeoutMs);
-            if (settingsNavigator.renderer !== "declarative") {
-                await settingsNavigator.close();
-                return undefined;
-            }
-            await settingsNavigator.returnToCatalogue();
-            await scrollDeclarativeLandingToTop(settingsNavigator.dialogue, true);
-            await assertDeclarativeLandingOrder(settingsNavigator.dialogue, true);
-            const remoteConfiguration = settingsNavigator.dialogue
-                .locator(".setting-item-name")
-                .filter({ hasText: "Remote Configuration" })
-                .first();
-            await remoteConfiguration.waitFor({ state: "visible", timeout: uiTimeoutMs });
-            const path = `${diagnosticsDirectory}/settings-declarative-landing-mobile.png`;
-            await settingsNavigator.dialogue.screenshot({ ...settingsScreenshotOptions, path });
-            const remotePosition = await remoteConfiguration.evaluate((element) => {
-                const bounds = element.getBoundingClientRect();
-                return { top: bounds.top, bottom: bounds.bottom, viewportHeight: window.innerHeight };
-            });
-            if (remotePosition.top < 0 || remotePosition.bottom > remotePosition.viewportHeight) {
-                throw new Error("Remote Configuration was not visible at the top of the mobile settings landing page.");
-            }
+    return await withObsidianPage(port, async (page) => {
+        const settingsNavigator = await openLiveSyncSettings(page, uiTimeoutMs);
+        if (settingsNavigator.renderer !== "declarative") {
             await settingsNavigator.close();
-            return path;
+            return undefined;
+        }
+        await settingsNavigator.returnToCatalogue();
+        await scrollDeclarativeLandingToTop(settingsNavigator.dialogue, true);
+        await assertDeclarativeLandingOrder(settingsNavigator.dialogue, true);
+        const remoteConfiguration = settingsNavigator.dialogue
+            .locator(".setting-item-name")
+            .filter({ hasText: "Remote Configuration" })
+            .first();
+        await remoteConfiguration.waitFor({ state: "visible", timeout: uiTimeoutMs });
+        const path = `${diagnosticsDirectory}/settings-declarative-landing-mobile.png`;
+        await settingsNavigator.dialogue.screenshot({ ...settingsScreenshotOptions, path });
+        const remotePosition = await remoteConfiguration.evaluate((element) => {
+            const bounds = element.getBoundingClientRect();
+            return { top: bounds.top, bottom: bounds.bottom, viewportHeight: window.innerHeight };
         });
-    } finally {
-        await setObsidianMobileTestMode(port, false, uiTimeoutMs);
-    }
+        if (remotePosition.top < 0 || remotePosition.bottom > remotePosition.viewportHeight) {
+            throw new Error("Remote Configuration was not visible at the top of the mobile settings landing page.");
+        }
+
+        const remotePage = await settingsNavigator.openPage("Remote Configuration");
+        const e2eeHeading = remotePage
+            .locator("h4.sls-setting-panel-title")
+            .filter({ hasText: "E2EE Configuration" })
+            .first();
+        const e2eeActions = remotePage.locator(".setting-item").filter({
+            has: settingsNavigator.page.getByText("Configure E2EE", { exact: true }),
+        });
+        await e2eeHeading.waitFor({ state: "visible", timeout: uiTimeoutMs });
+        await e2eeActions.waitFor({ state: "visible", timeout: uiTimeoutMs });
+
+        const layoutFailures: string[] = [];
+        const actionLayout = await e2eeActions.evaluate((setting) => {
+            const control = setting.querySelector<HTMLElement>(".setting-item-control");
+            if (control === null) throw new Error("The E2EE action row did not contain a control group.");
+            const settingBounds = setting.getBoundingClientRect();
+            const buttonBounds = Array.from(control.querySelectorAll("button")).map((button) =>
+                button.getBoundingClientRect()
+            );
+            return {
+                controlClientWidth: control.clientWidth,
+                controlScrollWidth: control.scrollWidth,
+                rightmostButton: Math.max(...buttonBounds.map((bounds) => bounds.right)),
+                settingRight: settingBounds.right,
+            };
+        });
+        if (
+            actionLayout.controlScrollWidth > actionLayout.controlClientWidth + 1 ||
+            actionLayout.rightmostButton > actionLayout.settingRight + 1
+        ) {
+            layoutFailures.push(`the E2EE actions overflowed their setting row (${JSON.stringify(actionLayout)})`);
+        }
+
+        await remotePage.evaluate((content) => {
+            content.scrollTop = content.scrollHeight - content.clientHeight;
+            content.dispatchEvent(new Event("scroll", { bubbles: true }));
+        });
+        await settingsNavigator.page.waitForTimeout(50);
+        const panelLayout = await e2eeHeading.evaluate((heading) => {
+            const infoPanel = heading.parentElement?.querySelector<HTMLElement>(".info-panel");
+            if (infoPanel === null || infoPanel === undefined) {
+                throw new Error("The E2EE section did not contain its information panel.");
+            }
+            const headingBounds = heading.getBoundingClientRect();
+            const infoBounds = infoPanel.getBoundingClientRect();
+            return {
+                headingBottom: headingBounds.bottom,
+                headingPosition: getComputedStyle(heading).position,
+                headingTop: headingBounds.top,
+                infoBottom: infoBounds.bottom,
+                infoTop: infoBounds.top,
+            };
+        });
+        if (
+            panelLayout.headingBottom > panelLayout.infoTop + 1 &&
+            panelLayout.headingTop < panelLayout.infoBottom - 1
+        ) {
+            layoutFailures.push(`the E2EE section heading overlapped its contents (${JSON.stringify(panelLayout)})`);
+        }
+        const remotePath = `${diagnosticsDirectory}/settings-declarative-remote-mobile.png`;
+        await settingsNavigator.dialogue.screenshot({ ...settingsScreenshotOptions, path: remotePath });
+        if (layoutFailures.length > 0) {
+            throw new Error(`The mobile Remote Configuration layout was invalid: ${layoutFailures.join("; ")}.`);
+        }
+
+        const maintenancePage = await settingsNavigator.openPage("Maintenance");
+        const markResolvedButton = maintenancePage
+            .locator(".op-warn button")
+            .filter({ hasText: "I've made a backup, mark this device 'resolved'" })
+            .first();
+        await markResolvedButton.evaluate((button) => {
+            const warning = button.closest<HTMLElement>(".op-warn");
+            if (warning === null) throw new Error("The Maintenance recovery action had no warning container.");
+            warning.removeClass("sls-setting-hidden");
+        });
+        await markResolvedButton.waitFor({ state: "visible", timeout: uiTimeoutMs });
+        await markResolvedButton.scrollIntoViewIfNeeded();
+        const maintenanceLayout = await markResolvedButton.evaluate((button) => {
+            const content = button.closest<HTMLElement>(".vertical-tab-content");
+            if (content === null) throw new Error("The Maintenance button was outside the settings content.");
+            const buttonBounds = button.getBoundingClientRect();
+            const contentBounds = content.getBoundingClientRect();
+            return {
+                buttonLeft: buttonBounds.left,
+                buttonRight: buttonBounds.right,
+                contentLeft: contentBounds.left,
+                contentRight: contentBounds.right,
+                rootClientWidth: document.documentElement.clientWidth,
+                rootScrollWidth: document.documentElement.scrollWidth,
+            };
+        });
+        const maintenancePath = `${diagnosticsDirectory}/settings-declarative-maintenance-mobile.png`;
+        await settingsNavigator.dialogue.screenshot({ ...settingsScreenshotOptions, path: maintenancePath });
+        if (
+            maintenanceLayout.buttonLeft < maintenanceLayout.contentLeft - 1 ||
+            maintenanceLayout.buttonRight > maintenanceLayout.contentRight + 1 ||
+            maintenanceLayout.rootScrollWidth > maintenanceLayout.rootClientWidth + 1
+        ) {
+            layoutFailures.push(
+                `the Maintenance recovery action overflowed the settings pane (${JSON.stringify(maintenanceLayout)})`
+            );
+        }
+
+        const patchesPage = await settingsNavigator.openPage("Patches");
+        const remediationSetting = patchesPage.locator(".setting-item").filter({
+            has: settingsNavigator.page.locator('input[type="datetime-local"]'),
+        });
+        await remediationSetting.waitFor({ state: "visible", timeout: uiTimeoutMs });
+        await remediationSetting.scrollIntoViewIfNeeded();
+        const patchesLayout = await remediationSetting.evaluate((setting) => {
+            const content = setting.closest<HTMLElement>(".vertical-tab-content");
+            const control = setting.querySelector<HTMLElement>(".setting-item-control");
+            if (content === null || control === null) {
+                throw new Error("The Patches remediation row was incomplete.");
+            }
+            const applyButton = control.querySelector<HTMLElement>("button");
+            if (applyButton === null) throw new Error("The Patches remediation row did not contain Apply.");
+            const settingBounds = setting.getBoundingClientRect();
+            const contentBounds = content.getBoundingClientRect();
+            const buttonBounds = applyButton.getBoundingClientRect();
+            return {
+                buttonRight: buttonBounds.right,
+                contentRight: contentBounds.right,
+                controlClientWidth: control.clientWidth,
+                controlScrollWidth: control.scrollWidth,
+                rootClientWidth: document.documentElement.clientWidth,
+                rootScrollWidth: document.documentElement.scrollWidth,
+                settingRight: settingBounds.right,
+            };
+        });
+        const patchesPath = `${diagnosticsDirectory}/settings-declarative-patches-mobile.png`;
+        await settingsNavigator.dialogue.screenshot({ ...settingsScreenshotOptions, path: patchesPath });
+        if (
+            patchesLayout.buttonRight > patchesLayout.settingRight + 1 ||
+            patchesLayout.buttonRight > patchesLayout.contentRight + 1 ||
+            patchesLayout.controlScrollWidth > patchesLayout.controlClientWidth + 1 ||
+            patchesLayout.rootScrollWidth > patchesLayout.rootClientWidth + 1
+        ) {
+            layoutFailures.push(
+                `the Patches remediation actions overflowed their setting row (${JSON.stringify(patchesLayout)})`
+            );
+        }
+
+        if (layoutFailures.length > 0) {
+            throw new Error(`The mobile settings layout was invalid: ${layoutFailures.join("; ")}.`);
+        }
+        await settingsNavigator.close();
+        return {
+            landingPage: path,
+            maintenance: maintenancePath,
+            patches: patchesPath,
+            remoteConfiguration: remotePath,
+        };
+    });
 }
 
 async function openSettingsInitialisationDialogueForInspection(isP2P: boolean): Promise<void> {
@@ -795,6 +954,72 @@ async function verifyPendingSettingsInitialisationFlow(): Promise<{ choice: stri
     });
 }
 
+function createSettingsPluginData(settingsOnlyRun: boolean): Record<string, unknown> {
+    return {
+        doctorProcessedVersion: settingsOnlyRun ? "1.0.0" : "0.25.27",
+        isConfigured: true,
+        liveSync: false,
+        versionUpFlash: settingsOnlyRun ? "" : compatibilityReviewMessage,
+        notifyThresholdOfRemoteStorageSize: 0,
+        syncOnStart: false,
+        syncOnSave: false,
+        syncOnEditorSave: false,
+        syncOnFileOpen: false,
+        syncAfterMerge: false,
+        periodicReplication: false,
+        handleFilenameCaseSensitive: false,
+        useAdvancedMode: false,
+        usePowerUserMode: false,
+        useEdgeCaseMode: false,
+    };
+}
+
+async function captureDeclarativeMobileSettingsInFreshSession(
+    binary: string,
+    cliBinary: string
+): Promise<
+    | {
+          landingPage: string;
+          maintenance: string;
+          patches: string;
+          remoteConfiguration: string;
+      }
+    | undefined
+> {
+    // Enter mobile mode before LiveSync first loads so Obsidian fires the
+    // mobile settings-registration lifecycle used by a real mobile start-up.
+    const vault = await createTemporaryVault();
+    let session: ObsidianLiveSyncSession | undefined;
+    try {
+        session = await startObsidianLiveSyncSession({
+            binary,
+            cliBinary,
+            vault,
+            startupGraceMs: Number(process.env.E2E_OBSIDIAN_STARTUP_GRACE_MS ?? 1000),
+            pluginData: {
+                ...createSettingsPluginData(true),
+                useAdvancedMode: true,
+                useEdgeCaseMode: true,
+                usePowerUserMode: true,
+            },
+            localStorageEntries: createE2eObsidianDeviceLocalState(vault.name),
+            lifecycle: {
+                beforePluginStart: async ({ remoteDebuggingPort }) => {
+                    await setObsidianMobileTestModeBeforePluginStart(remoteDebuggingPort, true, uiTimeoutMs);
+                },
+            },
+        });
+        await waitForLiveSyncCoreReady(cliBinary, session.cliEnv);
+        await resumePendingCompatibilityReviewForSettings();
+        return await captureDeclarativeMobileSettings();
+    } finally {
+        if (session) {
+            await session.app.stop();
+        }
+        await vault.dispose();
+    }
+}
+
 async function main(): Promise<void> {
     const binary = requireObsidianBinary();
     const cli = discoverObsidianCli();
@@ -804,29 +1029,14 @@ async function main(): Promise<void> {
     const vault = await createTemporaryVault();
     await mkdir(diagnosticsDirectory, { recursive: true });
     let session: ObsidianLiveSyncSession | undefined;
+    let settingsRenderer: "declarative" | "imperative" | undefined;
     try {
         session = await startObsidianLiveSyncSession({
             binary,
             cliBinary: cli.binary,
             vault,
             startupGraceMs: Number(process.env.E2E_OBSIDIAN_STARTUP_GRACE_MS ?? 1000),
-            pluginData: {
-                doctorProcessedVersion: settingsOnly ? "1.0.0" : "0.25.27",
-                isConfigured: true,
-                liveSync: false,
-                versionUpFlash: settingsOnly ? "" : compatibilityReviewMessage,
-                notifyThresholdOfRemoteStorageSize: 0,
-                syncOnStart: false,
-                syncOnSave: false,
-                syncOnEditorSave: false,
-                syncOnFileOpen: false,
-                syncAfterMerge: false,
-                periodicReplication: false,
-                handleFilenameCaseSensitive: false,
-                useAdvancedMode: false,
-                usePowerUserMode: false,
-                useEdgeCaseMode: false,
-            },
+            pluginData: createSettingsPluginData(settingsOnly),
             lifecycle: settingsOnly
                 ? {
                       afterLaunch: async ({ remoteDebuggingPort }) => {
@@ -843,11 +1053,9 @@ async function main(): Promise<void> {
             await verifyCompatibilityReview();
             await verifyConfigDoctorFollowsCompatibilityReview();
         }
-        const settingsRenderer = await verifyEffectiveSettings();
+        settingsRenderer = await verifyEffectiveSettings();
         const initialisation = await verifyPendingSettingsInitialisationFlow();
         const p2pInitialisation = await captureP2PSettingsInitialisationDialogue();
-        const mobileLanding = settingsRenderer === "declarative" ? await captureDeclarativeMobileLanding() : undefined;
-        if (mobileLanding) console.log(`Declarative mobile settings landing page: ${mobileLanding}`);
         console.log(
             `Pending-settings initialisation screenshots: ${initialisation.choice}, ${initialisation.fallback}, ${p2pInitialisation}`
         );
@@ -858,6 +1066,17 @@ async function main(): Promise<void> {
         }
         await vault.dispose();
     }
+
+    const mobileSettings =
+        settingsRenderer === "declarative"
+            ? await captureDeclarativeMobileSettingsInFreshSession(binary, cli.binary)
+            : undefined;
+    if (mobileSettings) {
+        console.log(`Declarative mobile settings landing page: ${mobileSettings.landingPage}`);
+        console.log(`Declarative mobile Remote Configuration page: ${mobileSettings.remoteConfiguration}`);
+        console.log(`Declarative mobile Maintenance page: ${mobileSettings.maintenance}`);
+        console.log(`Declarative mobile Patches page: ${mobileSettings.patches}`);
+    }
 }
 
 main().catch((error: unknown) => {

updates.md

@@ -12,6 +12,12 @@ Earlier releases remain available in the 1.0 release history, the 1.0 preview hi
 
 ## Unreleased
 
+### Interface and translation
+
+#### Fixed
+
+- Remote Configuration section headings no longer overlap their contents when scrolling on mobile. Action buttons in Remote Configuration, Maintenance, and Patches now remain inside the settings pane on narrow screens.
+
 ## 1.0.20
 
 ~~1.0.19~~ was cancelled because prerelease validation exposed an incorrect warning at start-up.