Fix clipped icon-circle by moving scroll to the overlay

The dialog card had `max-height: calc(100vh - 64px)` and
`overflow-y: auto`, intended to handle tall forms. But the top
icon-circle is positioned at `top: -32px` — it sticks out above the
card. With `overflow-y: auto` on the card, that protruding icon was
being clipped, leaving the dialog looking like a plain rectangle
instead of the rounded card with the half-arc icon-circle on top
(matching the confirm-dialog look).

Move scroll handling to the overlay instead:

- `.dialog-overlay` now has `overflow-y: auto` so the viewport itself
  scrolls if the card is taller than the screen.
- `align-items: safe center` keeps short dialogs vertically centered
  but switches to top-aligned automatically when the card is tall —
  this is the modern CSS pattern that handles both cases.
- Top/bottom padding bumped to 48px so the icon-circle has space
  even when the dialog is positioned at the top of the scroll area.

- `.dialog-card` drops `max-height` and `overflow-y`, explicitly sets
  `overflow: visible` (with a comment explaining why it must stay
  visible) so the icon-circle is never clipped.

The card now matches the confirm-dialog visual contract exactly:
rounded 12px corners, the 64px icon-circle protruding 32px above the
card with its half-arc colored border.

Author: osameh15

src/runtime/components/InputDialog.vue

@@ -472,18 +472,24 @@ defineExpose({
   opacity: 0;
 }
 
-/* ----- Overlay ----- */
+/* ----- Overlay -----
+ * The overlay carries the scroll, NOT the card. The card stays
+ * `overflow: visible` so the icon-circle can protrude above it.
+ * `safe center` keeps short dialogs vertically centered while
+ * letting tall forms align to the top so the icon stays in view.
+ */
 .dialog-overlay {
   position: fixed;
   inset: 0;
   z-index: 10000;
   display: flex;
-  align-items: center;
+  align-items: safe center;
   justify-content: center;
-  padding: 16px;
+  padding: 48px 16px;
   background: rgba(15, 18, 24, 0.78);
   -webkit-backdrop-filter: blur(4px);
   backdrop-filter: blur(4px);
+  overflow-y: auto;
 }
 
 /* ----- Card ----- */
@@ -519,8 +525,10 @@ defineExpose({
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   box-sizing: border-box;
-  max-height: calc(100vh - 64px);
-  overflow-y: auto;
+  /* `overflow: visible` (default) — must NOT be `auto`/`hidden` or the
+   * top icon-circle (positioned at `top: -32px`) gets clipped. The
+   * overlay handles scrolling for long forms. */
+  overflow: visible;
 }
 
 .dialog-card:focus { outline: none; }