Card compact and expanded template

app/components/modals/Create/Create.view.tsx

@@ -11,6 +11,7 @@ export function CreateView({
   onClose,
   title,
   description,
+  headerContent,
   children,
   footerContent,
   showBackButton,
@@ -40,21 +41,23 @@ export function CreateView({
         aria-hidden="true"
       />
 
-      {/* Create Dialog */}
+      {/* Create Dialog: max-h ensures modal fits viewport; content scrolls inside */}
       <div
         ref={createRef}
         role="dialog"
         aria-modal="true"
         aria-label={ariaLabel}
         aria-labelledby={ariaLabelledBy}
-        className={`fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[var(--color-surface-default-primary)] rounded-[var(--radius-500,20px)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] w-[560px] max-h-[728px] flex flex-col overflow-hidden z-[9999] ${className}`}
+        className={`fixed left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-[var(--color-surface-default-primary)] rounded-[var(--radius-500,20px)] shadow-[0px_0px_48px_0px_rgba(0,0,0,0.1)] w-[560px] max-h-[90vh] flex min-h-0 flex-col overflow-hidden z-[9999] ${className}`}
       >
         {/* Header with close buttons */}
         <ModalHeader onClose={onClose} onMoreOptions={onClose} />
 
-        {/* Header Lockup Section (Sticky) */}
-        {(title || description) && (
-          <div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0 sticky top-[48px] z-[2]">
+        {/* Header: custom headerContent (when provided) or default title/description */}
+        {headerContent !== undefined ? (
+          <div className="shrink-0">{headerContent}</div>
+        ) : (title || description) ? (
+          <div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
             <ContentLockup
               title={title}
               description={description}
@@ -62,14 +65,14 @@ export function CreateView({
               alignment="left"
             />
           </div>
-        )}
+        ) : null}
 
-        {/* Content Area (Scrollable) */}
-        <div className="flex flex-col gap-[var(--spacing-scale-024)] px-[24px] pb-[96px] overflow-x-clip overflow-y-auto relative shrink-0 flex-1">
+        {/* Content Area (scrollable when content overflows) */}
+        <div className="scrollbar-design flex min-h-0 flex-1 flex-col gap-[var(--spacing-scale-024)] overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
           {children}
         </div>
 
-        {/* Footer */}
+        {/* Footer (always visible at bottom of modal) */}
         <ModalFooter
           showBackButton={showBackButton}
           showNextButton={showNextButton}