From 9340c410ff77be67682f1ec924885580998a5145 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Mon, 30 Jun 2025 13:21:15 -0400
Subject: [PATCH] align labels and dropdowns horizontally using grid layout

---
 uncloseai.js | 57 ++++++++++++++++++++++++++++++++++------------------
 1 file changed, 37 insertions(+), 20 deletions(-)

diff --git a/uncloseai.js b/uncloseai.js
index 235e05e..5d4f874 100644
--- a/uncloseai.js
+++ b/uncloseai.js
@@ -918,19 +918,21 @@ function createFloatingAIButton() {
     floatingButton.style.cssText = `
       position: fixed;
       bottom: 20px;
-      right: 20px;
-      width: 120px;
-      height: 50px;
-      border-radius: 25px;
+      right: 10px;
+      width: 110px;
+      height: 45px;
+      border-radius: 22px;
       background: ${isDark ? '#ffffff' : '#000000'};
       border: 2px solid ${isDark ? '#000000' : '#ffffff'};
       color: ${isDark ? '#000000' : '#ffffff'};
       font-family: 'ChunkFiveRegular', monospace;
-      font-size: 14px;
+      font-size: 13px;
       cursor: pointer;
       box-shadow: 0 4px 12px rgba(0,0,0,0.3);
       z-index: 1000;
       transition: all 0.3s ease;
+      max-width: calc(100vw - 20px);
+      box-sizing: border-box;
     `;
   }
   
@@ -983,10 +985,12 @@ function openHermesModal() {
   const modal = document.createElement('dialog');
   modal.id = 'hermes-modal';
   modal.open = true;
-  modal.style.zIndex = '2000';
-  modal.style.position = 'fixed';
+  
   if (USE_CUSTOM_STYLING) {
-    modal.style.cssText += `
+    modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
       width: 90%;
       max-width: 800px;
       height: 80%;
@@ -995,13 +999,23 @@ function openHermesModal() {
       border-radius: 16px;
       box-shadow: 0 20px 40px rgba(0,0,0,0.3);
       background: white;
+      z-index: 2000;
+      margin: auto;
     `;
   } else {
-    modal.style.cssText += `
+    modal.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
       width: 100%;
       height: 100%;
       min-width: 0;
       max-width: none;
+      border: none;
+      background: transparent;
+      z-index: 2000;
+      margin: 0;
+      padding: 0;
     `;
   }
 
@@ -1009,8 +1023,8 @@ function openHermesModal() {
   if (USE_CUSTOM_STYLING) {
     article.style.cssText = `
       height: 100%;
-      display: flex;
-      flex-direction: column;
+      display: grid;
+      grid-template-rows: auto auto 1fr auto;
       margin: 0;
       padding: 0;
     `;
@@ -1036,8 +1050,8 @@ function openHermesModal() {
       background: linear-gradient(45deg, #667eea 0%, #764ba2 100%);
       color: white;
       padding: 16px 20px;
-      display: flex;
-      justify-content: space-between;
+      display: grid;
+      grid-template-columns: 1fr auto;
       align-items: center;
     `;
   } else {
@@ -1127,18 +1141,19 @@ function openHermesModal() {
     controls.style.cssText = `
       padding: 16px 20px;
       border-bottom: 1px solid #e0e0e0;
-      display: flex;
+      display: grid;
+      grid-template-columns: auto 1fr auto 1fr;
       gap: 12px;
-      flex-wrap: wrap;
       align-items: center;
     `;
   } else {
     controls.className = 'uncloseai-controls';
     controls.style.cssText = `
       display: grid;
-      grid-template-columns: 1fr;
+      grid-template-columns: auto 1fr auto 1fr;
       gap: 12px;
       padding: 0.5rem;
+      align-items: center;
     `;
   }
   
@@ -1206,9 +1221,9 @@ function openHermesModal() {
   const actionButtons = document.createElement('div');
   if (USE_CUSTOM_STYLING) {
     actionButtons.style.cssText = `
-      display: flex;
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
       gap: 8px;
-      flex-wrap: wrap;
     `;
   } else {
     actionButtons.className = 'uncloseai-button-group';
@@ -1262,8 +1277,10 @@ function openHermesModal() {
   actionButtons.appendChild(ttsBtn);
   actionButtons.appendChild(refreshBtn);
   
+  // Make action buttons span all columns
+  actionButtons.style.gridColumn = 'span 4';
+  
   controls.appendChild(actionButtons);
-  controls.appendChild(voiceBreak);
   controls.appendChild(modelLabel);
   controls.appendChild(modelSelect);
   controls.appendChild(voiceLabel);
@@ -1273,7 +1290,7 @@ function openHermesModal() {
   const chatArea = document.createElement('div');
   if (USE_CUSTOM_STYLING) {
     chatArea.style.cssText = `
-      flex: 1;
+      grid-row: 3;
       padding: 20px;
       overflow-y: auto;
       border-bottom: 1px solid #e0e0e0;