Core 2.58.1: settings conflict buttons stay on screen on a phone

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",

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());

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)}
       />
-      <Modal.Body className="max-h-[60vh] overflow-y-auto">
+      <Modal.Body className="min-h-0 overflow-y-auto">
         {differences.length > 0 && described !== null && (
           <>
             <div className="mb-3 flex flex-wrap items-center justify-between gap-2">
@@ -190,8 +193,11 @@ export function CloudSettingsConflictDialog({
           </div>
         )}
       </Modal.Body>
-      <Modal.Footer className="items-center">
-        <div className="mr-auto text-xs text-ink-500">
+      {/* 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). */}
+      <Modal.Footer className="flex-wrap items-center">
+        <div className="mr-auto min-w-0 flex-1 basis-48 text-xs text-ink-500">
           This device&rsquo;s settings stay in use until you decide.
         </div>
         <Button variant="ghost" disabled={busy} onClick={onClose}>

packages/bridge-contract/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zennotes/bridge-contract",
   "private": true,
-  "version": "2.58.0",
+  "version": "2.58.1",
   "type": "module",
   "exports": {
     "./bridge": "./src/bridge.ts",

packages/shared-domain/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@zennotes/shared-domain",
   "private": true,
-  "version": "2.58.0",
+  "version": "2.58.1",
   "type": "module",
   "exports": {
     "./*": "./src/*.ts"