From ec9853be45b3c18ca007ca0b977ba3935b38bf10 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Tue, 1 Jul 2025 22:04:21 -0400
Subject: [PATCH] fix(ui): remove unwanted model dropdowns and standardize
 hermes modal

- Remove automatic model dropdown creation that was breaking blog layout
- Update Hermes modal to use 95vw sizing like other modals
- Add showModal() and backdrop click handling for consistency
- Use transform-based centering for proper mobile positioning
- All modals now have consistent sizing and behavior
---
 src/ui.js    | 52 ++++++++++++++++++++++++++++++----------------------
 uncloseai.js |  2 --
 2 files changed, 30 insertions(+), 24 deletions(-)

diff --git a/src/ui.js b/src/ui.js
index 357bea0..9f8eb62 100644
--- a/src/ui.js
+++ b/src/ui.js
@@ -484,38 +484,34 @@ export async function openHermesModal() {
 	// Create modal using dialog element like TTS modal
 	const modal = document.createElement("dialog");
 	modal.id = "hermes-modal";
-	modal.open = true;
+	modal.style.position = "fixed";
+	modal.style.zIndex = "2000";
 
 	if (USE_CUSTOM_STYLING) {
-		modal.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 90%;
+		modal.style.cssText += `
+      width: 95vw;
       max-width: 800px;
-      height: 90%;
-      max-height: 700px;
+      max-height: 95vh;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
       border: none;
       border-radius: 16px;
       box-shadow: 0 20px 40px rgba(0,0,0,0.3);
       background: white;
-      z-index: 2000;
-      margin: auto;
+      margin: 0;
+      overflow: auto;
     `;
 	} else {
-		modal.style.cssText = `
-      position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100vh;
-      height: 100dvh;
-      min-width: 0;
-      border: none;
-      background: transparent;
-      z-index: 2000;
+		modal.style.cssText += `
+      width: 95vw;
+      max-width: 800px;
+      max-height: 95vh;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
       margin: 0;
-      padding: 0;
+      overflow: auto;
     `;
 	}
 
@@ -1172,6 +1168,18 @@ Format: Start with "Greetings! I'm Hermes..." and make it sound natural and enga
 
 	// Show the modal first, then load intro asynchronously
 	document.body.appendChild(modal);
+	
+	// Use showModal() for proper mobile support and backdrop
+	modal.showModal();
+	
+	// Close modal when clicking backdrop
+	modal.addEventListener('click', (e) => {
+		if (e.target === modal) {
+			modal.close();
+			document.body.removeChild(modal);
+			hermesModalOpen = false;
+		}
+	});
 
 	// Load Hermes introduction asynchronously after modal is shown
 	addHermesIntroduction().catch((error) => {
diff --git a/uncloseai.js b/uncloseai.js
index a7d059c..7bedf07 100644
--- a/uncloseai.js
+++ b/uncloseai.js
@@ -132,8 +132,6 @@ window.addEventListener("load", () => {
 	}
 	
 	UI.initializeSystem();
-	Models.createModelSelectionDropdown();
-	Models.addRefreshModelsButton();
 });
 
 // Export helper functions for class-based integrations