From 3d65bddfd319d77d6022ac184a46f107acf55473 Mon Sep 17 00:00:00 2001
From: SongshGeo <songshgeo@gmail.com>
Date: Mon, 4 May 2026 22:17:28 +0200
Subject: [PATCH] fix: :bug: force metadata modal min-height to prevent
 collapse

Apply min-height/max-height via plugin global stylesheet on .modal and
.modal-content directly, since Svelte scoped styles can't reach the
outer modal box. Also swap empty-state icon to a valid Lucide name.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/view/metadata-modal/MetadataModal.svelte | 30 ++++++++------------
 src/view/metadata-modal/index.ts             |  6 +++-
 styles.css                                   | 12 ++++++++
 3 files changed, 29 insertions(+), 19 deletions(-)

diff --git a/src/view/metadata-modal/MetadataModal.svelte b/src/view/metadata-modal/MetadataModal.svelte
index 24982b6..7e93f8e 100644
--- a/src/view/metadata-modal/MetadataModal.svelte
+++ b/src/view/metadata-modal/MetadataModal.svelte
@@ -221,13 +221,12 @@
 </script>
 
 <div class="metadata-modal-root">
-  <h1 class="modal-heading">Project Metadata</h1>
   {#if loading}
     <p class="muted">Loading metadata…</p>
   {:else if !fileExists}
     <div class="empty-state">
       <div class="empty-icon">
-        <Icon iconName="file-plus" />
+        <Icon iconName="documents" />
       </div>
       <h2 class="empty-title">No metadata yet</h2>
       <p class="empty-message">
@@ -409,15 +408,6 @@
     margin: 0 auto;
   }
 
-  .modal-heading {
-    display: block;
-    margin: 0 0 var(--size-4-4) 0;
-    font-size: var(--font-ui-large);
-    font-weight: 700;
-    color: var(--text-normal);
-    text-align: left;
-  }
-
   .muted {
     color: var(--text-muted);
   }
@@ -593,23 +583,27 @@
     flex-direction: column;
     align-items: center;
     text-align: center;
-    padding: var(--size-4-8) var(--size-4-4) var(--size-4-6);
+    padding: var(--size-4-8) var(--size-4-4);
     gap: var(--size-4-3);
+    min-height: 320px;
+    box-sizing: border-box;
+  }
+  .empty-state > * {
+    flex-shrink: 0;
   }
   .empty-icon {
     display: flex;
     align-items: center;
     justify-content: center;
-    width: 64px;
-    height: 64px;
+    width: 56px;
+    height: 56px;
     border-radius: 50%;
     background: var(--background-modifier-hover);
     color: var(--text-muted);
-    margin-bottom: var(--size-4-1);
   }
   .empty-icon :global(svg) {
-    width: 28px;
-    height: 28px;
+    width: 26px;
+    height: 26px;
   }
   .empty-title {
     margin: 0;
@@ -630,7 +624,7 @@
   .empty-actions {
     display: flex;
     gap: var(--size-4-2);
-    margin-top: var(--size-4-3);
+    margin-top: var(--size-4-2);
   }
 
   code {
diff --git a/src/view/metadata-modal/index.ts b/src/view/metadata-modal/index.ts
index 43497a1..1da0878 100644
--- a/src/view/metadata-modal/index.ts
+++ b/src/view/metadata-modal/index.ts
@@ -14,7 +14,11 @@ export default class MetadataModal extends Modal {
   }
 
   onOpen(): void {
-    const { contentEl } = this;
+    const { contentEl, titleEl, modalEl } = this;
+    titleEl.empty();
+    contentEl.empty();
+    modalEl.addClass("longform-metadata-modal");
+    contentEl.addClass("longform-metadata-modal-content");
     const target = contentEl.createDiv("longform-metadata-modal-root");
 
     const context = appContext(this);
diff --git a/styles.css b/styles.css
index 25d27b7..935b1dc 100644
--- a/styles.css
+++ b/styles.css
@@ -17,3 +17,15 @@
   margin-left: var(--size-4-2);
   color: var(--text-muted);
 }
+
+.longform-metadata-modal {
+  min-height: 360px;
+  height: auto;
+  max-height: 85vh;
+}
+
+.longform-metadata-modal-content {
+  min-height: 320px;
+  height: auto;
+  overflow-y: auto;
+}