Keep dialogs within the viewport height

BaseModal is now capped at the viewport height: header and footer stay
visible and the body scrolls. Wide dialogs make their body a flex column
so the macro/function editor fills it and its reference list scrolls on
its own on small screens.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/components/BaseModal.vue

@@ -48,11 +48,16 @@ watch(
   border: 1px solid var(--border);
   box-shadow: var(--shadow);
   overflow: hidden;
+  /* never taller than the viewport: header/footer stay put, the body scrolls */
+  max-height: calc(100dvh - 32px);
+  display: flex;
+  flex-direction: column;
 }
 .modal.wide {
   width: min(920px, calc(100vw - 32px));
 }
 header {
+  flex: none;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -73,8 +78,18 @@ h2 {
 .body {
   padding: 16px;
   font-size: 13px;
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow-y: auto;
+}
+/* wide dialogs lay out one full-height child (e.g. an editor + side panel)
+   that shrinks with the viewport and scrolls its own parts */
+.modal.wide .body {
+  display: flex;
+  flex-direction: column;
 }
 footer {
+  flex: none;
   display: flex;
   justify-content: flex-end;
   gap: 8px;