fix: site wide banner

Author: yasinmiran

src/components/admin/AdminApp.tsx

@@ -561,6 +561,7 @@ function FieldInput({
                             </div>
                         )}
                     </div>
+                    <p className="text-xs text-gray-500 mt-1">Type and press Enter to add, or select from suggestions.</p>
                 </div>
             );
         }

src/components/site-banner.astro

@@ -4,7 +4,6 @@ import banner from "../data/banner.json";
 const { visible, message } = banner;
 if (!visible || !message) return;
 
-// Minimal inline markdown: **bold**, *italic*, [link](url)
 function renderInlineMarkdown(md: string): string {
     return md
         .replace(/\*\*(.+?)\*\*/g, '<strong class="font-semibold">$1</strong>')
@@ -14,13 +13,30 @@ function renderInlineMarkdown(md: string): string {
 ---
 
 <div
-    class="relative z-[60] bg-accent text-white text-center text-sm py-2.5 px-6"
+    id="site-banner"
+    class="sticky top-0 z-[60] bg-accent text-white text-sm"
     role="status"
 >
-    <div class="mx-auto max-w-5xl flex items-center justify-center gap-3">
+    <div class="mx-auto max-w-7xl px-6 py-2 flex items-center justify-center gap-3 relative">
         <svg class="h-4 w-4 shrink-0 opacity-80" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true">
             <path stroke-linecap="round" stroke-linejoin="round" d="M10.34 15.84c-.688-.06-1.386-.09-2.09-.09H7.5a4.5 4.5 0 1 1 0-9h.75c.704 0 1.402-.03 2.09-.09m0 9.18c.253.962.584 1.892.985 2.783.247.55.06 1.21-.463 1.511l-.657.38c-.551.318-1.26.117-1.527-.461a20.845 20.845 0 0 1-1.44-4.282m3.102.069a18.03 18.03 0 0 1-.59-4.59c0-1.586.205-3.124.59-4.59m0 9.18a23.848 23.848 0 0 1 8.835 2.535M10.34 6.66a23.847 23.847 0 0 0 8.835-2.535m0 0A23.74 23.74 0 0 0 18.795 3m.38 1.125a23.91 23.91 0 0 1 1.014 5.395m-1.014 8.855c-.118.38-.245.754-.38 1.125m.38-1.125a23.91 23.91 0 0 0 1.014-5.395m0-3.46c.495.413.811 1.035.811 1.73 0 .695-.316 1.317-.811 1.73m0-3.46a24.347 24.347 0 0 1 0 3.46" />
         </svg>
         <p set:html={renderInlineMarkdown(message)} />
+        <button
+            onclick="document.getElementById('site-banner').remove(); sessionStorage.setItem('banner-dismissed','1')"
+            class="absolute right-3 p-1 rounded-md text-white/60 hover:text-white hover:bg-white/10 transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-white/50"
+            aria-label="Dismiss announcement"
+        >
+            <svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" aria-hidden="true">
+                <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+            </svg>
+        </button>
     </div>
 </div>
+
+<script is:inline>
+    if (sessionStorage.getItem('banner-dismissed') === '1') {
+        const b = document.getElementById('site-banner');
+        if (b) b.remove();
+    }
+</script>