feat(ui): modal contract — pinned title+tabs, scrolling middle, pinned footer

BaseModal becomes a flex column: title row and the new #header slot
(tabs) stay fixed at the top, #footer (action buttons) fixed at the
bottom, only the default slot scrolls (default max-h 90vh unless the
caller sets one). Wallet Settings migrates: tabs pinned, four duplicated
in-pane Close rows collapse into one pinned footer that carries the
active tab's primary action.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

neode-ui/src/components/BaseModal.vue

@@ -8,10 +8,16 @@
         @click.self="close"
       >
         <div class="absolute inset-0 bg-black/60 backdrop-blur-md"></div>
+        <!-- Column layout (2026-07-22 modal contract): title row and the
+             optional #header slot (tabs) stay pinned at the top, the #footer
+             slot (action buttons) stays pinned at the bottom, and ONLY the
+             default slot scrolls. Callers that previously made the whole
+             card scroll via contentClass keep working — the inner region
+             simply never lets the card overflow. -->
         <div
           ref="modalRef"
-          class="glass-card p-6 w-full relative z-10"
-          :class="[maxWidth, contentClass]"
+          class="glass-card p-6 w-full relative z-10 flex flex-col"
+          :class="[maxWidth, contentClass, defaultMaxH]"
           role="dialog"
           aria-modal="true"
           @click.stop
@@ -28,8 +34,15 @@
               </svg>
             </button>
           </div>
-          <slot />
-          <slot name="footer" />
+          <div v-if="$slots.header" class="shrink-0">
+            <slot name="header" />
+          </div>
+          <div class="flex-1 min-h-0 overflow-y-auto">
+            <slot />
+          </div>
+          <div v-if="$slots.footer" class="shrink-0 pt-4">
+            <slot name="footer" />
+          </div>
         </div>
       </div>
     </Transition>
@@ -60,6 +73,13 @@ const emit = defineEmits<{
 const modalRef = ref<HTMLElement | null>(null)
 
 const zClass = computed(() => props.zIndex)
+// The pinned-footer layout needs a height bound or tall content pushes the
+// footer off-screen anyway. Callers that set their own max-h (e.g. the
+// Transactions modal's visual-viewport calc on mobile) keep authority —
+// adding a second max-h class would make the CSS winner order-dependent.
+const defaultMaxH = computed(() =>
+  props.contentClass.includes('max-h-') ? '' : 'max-h-[90vh]'
+)
 
 function close() {
   emit('close')