diff --git a/package-lock.json b/package-lock.json index 21e45f6c..8a07c322 100644 --- a/package-lock.json +++ b/package-lock.json @@ -16382,7 +16382,7 @@ }, "packages/app-core": { "name": "@zennotes/app-core", - "version": "2.58.0", + "version": "2.58.1", "dependencies": { "@codemirror/autocomplete": "^6.18.3", "@codemirror/commands": "^6.7.1", @@ -16469,14 +16469,14 @@ }, "packages/bridge-contract": { "name": "@zennotes/bridge-contract", - "version": "2.58.0", + "version": "2.58.1", "devDependencies": { "typescript": "^5.7.2" } }, "packages/shared-domain": { "name": "@zennotes/shared-domain", - "version": "2.58.0", + "version": "2.58.1", "dependencies": { "@zennotes/bridge-contract": "*", "lz-string": "^1.5.0" diff --git a/packages/app-core/package.json b/packages/app-core/package.json index 4165a109..f3b4003a 100644 --- a/packages/app-core/package.json +++ b/packages/app-core/package.json @@ -1,7 +1,7 @@ { "name": "@zennotes/app-core", "private": true, - "version": "2.58.0", + "version": "2.58.1", "type": "module", "exports": { "./main": "./src/main.tsx", diff --git a/packages/app-core/src/components/CloudSettingsConflictDialog.test.ts b/packages/app-core/src/components/CloudSettingsConflictDialog.test.ts index c32bd033..7d37f75c 100644 --- a/packages/app-core/src/components/CloudSettingsConflictDialog.test.ts +++ b/packages/app-core/src/components/CloudSettingsConflictDialog.test.ts @@ -125,6 +125,21 @@ describe("CloudSettingsConflictDialog", () => { expect(applied.folderIcons).toEqual({ "inbox:Projects": "bolt", "inbox:Archive": "archive" }); }); + it("keeps the buttons on a phone: a column where only the body scrolls, and a footer that wraps (Android #88)", () => { + // jsdom has no layout, so this pins the structure the fix depends on; the + // measured check at 360 to 393 px and 100 to 130 % text is in the release notes. + const panel = document.body.querySelector('[data-cloud-settings-conflict-dialog] [role="dialog"]') as HTMLElement; + expect(panel.className).toMatch(/\bflex\b/); + expect(panel.className).toMatch(/\bflex-col\b/); + expect(panel.className).toMatch(/max-h-\[88dvh\]/); + const [, body, footer] = [...panel.children] as HTMLElement[]; + expect(body.className).toMatch(/\bmin-h-0\b/); + expect(body.className).toMatch(/\boverflow-y-auto\b/); + expect(body.className).not.toMatch(/max-h-\[60vh\]/); + expect(footer.className).toMatch(/\bflex-wrap\b/); + expect(footer.contains(button(host, "Decide later"))).toBe(true); + }); + it("applies nothing when postponed", async () => { await act(async () => sectionChoice("Favorites", "Cloud").click()); await act(async () => button(host, "Decide later").click()); diff --git a/packages/app-core/src/components/CloudSettingsConflictDialog.tsx b/packages/app-core/src/components/CloudSettingsConflictDialog.tsx index 3455adc3..03dad4b8 100644 --- a/packages/app-core/src/components/CloudSettingsConflictDialog.tsx +++ b/packages/app-core/src/components/CloudSettingsConflictDialog.tsx @@ -118,7 +118,10 @@ export function CloudSettingsConflictDialog({ onClose={onClose} labelledBy={TITLE_ID} initialFocus={primary} - className="max-h-[88vh]" + // A column capped to the visible screen: only the body scrolls, so the + // header and the buttons stay on screen however many settings differ. + // Phones (Android #88) put the buttons past the sheet's edge otherwise. + className="flex max-h-[88dvh] flex-col" // The existing guards (vim leader, editor focus, overlay detection) key // on the first marker; the second names this dialog for its own tests. data={{ @@ -131,7 +134,7 @@ export function CloudSettingsConflictDialog({ titleId={TITLE_ID} description={describeQuestion(vaultName, described, differences)} /> - + {differences.length > 0 && described !== null && ( <>
@@ -190,8 +193,11 @@ export function CloudSettingsConflictDialog({
)}
- -
+ {/* The note keeps a readable width and the buttons wrap under it on a + narrow screen, instead of the note shrinking to nothing while the + buttons run past the edge (Android #88). */} + +
This device’s settings stay in use until you decide.