From 00491052cf0bf47c8a7c940b0d58d72c90b36a23 Mon Sep 17 00:00:00 2001
From: Abraham <anubra266@gmail.com>
Date: Wed, 17 Jun 2026 14:37:20 -0700
Subject: [PATCH] fix(prop-panel): scroll-aware popover height + explicit Done
 button (#1937)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Two of the four strands in the PRD-7058 cluster — the two with clear
scope. #3 (Align broken) did not reproduce once #2 was fixed; the
reporter had no path to reach the Align field through the un-
scrollable popover. #4 (drag-resize for image/PDF) is a separate
feature and lands in its own PR.

  1. **#2 popup scroll** — `max-h-[calc(100vh-2rem)]` ignored the
     popover's top position, so a popover positioned 200px down the
     viewport was capped at the FULL viewport height — overflowed off-
     screen and never engaged its internal scroller. Switch to
     `max-h-[var(--radix-popper-available-height)]`, which Radix's
     Popper plugin pre-computes as "height available between the
     anchor and the chosen-side viewport edge." The popover now caps
     at the actual available space, so its `overflow-y-auto` engages
     and every advanced prop becomes reachable.
  2. **#1 silent dismiss** — add an explicit "Done" button at the
     bottom of the popover, separated from the form by a top border.
     PropPanel still auto-saves on every keystroke / select change
     (the button doesn't gate the write); the affordance gives users
     the psychological closure UX research flagged was missing
     ("I just write, and it just, like, disappears"). Click closes
     the popover; the existing `onCloseAutoFocus` editor-refocus path
     handles focus restore.

GitOrigin-RevId: 1e721d365b69fee7904d4d88c8c8e9303add8a99
---
 .../editor/extensions/JsxComponentView.tsx    | 25 ++++++++++++++++++-
 packages/app/src/locales/en/messages.po       |  1 +
 packages/app/src/locales/pseudo/messages.po   |  1 +
 3 files changed, 26 insertions(+), 1 deletion(-)

diff --git a/packages/app/src/editor/extensions/JsxComponentView.tsx b/packages/app/src/editor/extensions/JsxComponentView.tsx
index ed6fd8a8b..1ee0c14bd 100644
--- a/packages/app/src/editor/extensions/JsxComponentView.tsx
+++ b/packages/app/src/editor/extensions/JsxComponentView.tsx
@@ -62,6 +62,7 @@ import {
 import type { ReactNode } from 'react';
 import { useEffect, useRef, useState } from 'react';
 import { ErrorBoundary, type FallbackProps } from 'react-error-boundary';
+import { Button } from '@/components/ui/button';
 import { hashFromDocName } from '@/lib/doc-hash';
 import {
   Popover,
@@ -1067,7 +1068,7 @@ export function JsxComponentView({ node, editor, extension, getPos, selected }:
           side={showPlaceholder ? 'bottom' : 'right'}
           align={showPlaceholder ? 'center' : 'start'}
           sideOffset={showPlaceholder ? -4 : 8}
-          className="w-64 p-3 z-[60] overflow-y-auto subtle-scrollbar max-h-[calc(100vh-2rem)] overscroll-contain"
+          className="w-64 p-3 z-[60] overflow-y-auto subtle-scrollbar max-h-[var(--radix-popper-available-height)] overscroll-contain"
           onCloseAutoFocus={
             isSelfClosingLeaf
               ? (e) => {
@@ -1121,6 +1122,28 @@ export function JsxComponentView({ node, editor, extension, getPos, selected }:
               markUserTyping();
             }}
           />
+          {/* Explicit confirmation affordance. PropPanel auto-saves on
+              every keystroke / select change (`onChange` above runs the
+              `setNodeMarkup` dispatch) — the button doesn't gate the
+              save, it gives users the psychological closure UX research
+              flagged was missing (PRD-7058 #1: "I just write, and it
+              just, like, disappears" — without a confirm affordance
+              authors interpret the auto-dismiss-on-outside-click as
+              losing their changes, even though the changes already
+              landed). Click closes the popover; the
+              `onCloseAutoFocus`-driven editor refocus above handles
+              the focus restore. */}
+          <div className="mt-3 flex justify-end border-t border-border pt-2">
+            <Button
+              type="button"
+              size="sm"
+              variant="ghost"
+              onClick={() => setPopoverOpen(false)}
+              className="h-7 px-3 text-xs"
+            >
+              <Trans>Done</Trans>
+            </Button>
+          </div>
         </PopoverContent>
       )}
     </Popover>
diff --git a/packages/app/src/locales/en/messages.po b/packages/app/src/locales/en/messages.po
index 9c0374aa6..b07003d2e 100644
--- a/packages/app/src/locales/en/messages.po
+++ b/packages/app/src/locales/en/messages.po
@@ -1898,6 +1898,7 @@ msgstr "Don't see <0>Skills</0>? Enable <1>Settings <2/> Capabilities <3/> Code
 
 #: src/components/InstallInClaudeDesktopDialog.tsx
 #: src/components/PublishToGitHubDialog.tsx
+#: src/editor/extensions/JsxComponentView.tsx
 #: src/editor/slash-command/items.tsx
 msgid "Done"
 msgstr "Done"
diff --git a/packages/app/src/locales/pseudo/messages.po b/packages/app/src/locales/pseudo/messages.po
index 43bd4d807..53e583ef5 100644
--- a/packages/app/src/locales/pseudo/messages.po
+++ b/packages/app/src/locales/pseudo/messages.po
@@ -1893,6 +1893,7 @@ msgstr ""
 
 #: src/components/InstallInClaudeDesktopDialog.tsx
 #: src/components/PublishToGitHubDialog.tsx
+#: src/editor/extensions/JsxComponentView.tsx
 #: src/editor/slash-command/items.tsx
 msgid "Done"
 msgstr ""