From e7f90a266de737c1e4aaa92d4d10b7a73bf2a6c1 Mon Sep 17 00:00:00 2001
From: Russell Ballestrini <russell.ballestrini@gmail.com>
Date: Thu, 10 Jul 2025 16:27:31 -0400
Subject: [PATCH] fix: repair grid layout issues from conversion

- Use grid-auto-flow: column for horizontal button layouts
- Fix controls and message actions to display horizontally
- Add theme-aware background colors for settings panel
- Move settings panel top position to avoid covering header
- Ensure all button text stays within button boundaries
---
 src/uncloseai-modal-builtin.css | 29 ++++++++++++++++++-----------
 src/uncloseai-modal-pico.css    | 24 +++++++++++++++++-------
 2 files changed, 35 insertions(+), 18 deletions(-)

diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css
index 7f3833e..5b43540 100644
--- a/src/uncloseai-modal-builtin.css
+++ b/src/uncloseai-modal-builtin.css
@@ -96,17 +96,14 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
 
 /* Settings panel */
 .uncloseai-modal-settings {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 16px;
   display: none;
   overflow-y: auto;
   position: absolute;
-  top: 0;
+  top: 60px;
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--uncloseai-content-background, #f8f9fa);
   z-index: 10;
 }
 
@@ -117,13 +114,24 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
   align-content: start;
 }
 
+/* Dark theme settings panel */
+dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-modal-settings {
+  background: rgb(26, 26, 26);
+}
+
+/* Light theme settings panel */
+dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
+  background: rgb(255, 255, 255);
+}
+
 /* Controls */
 .uncloseai-modal-controls {
   padding: 8px 16px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(120px, 1fr);
   gap: 8px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
@@ -655,7 +663,8 @@ dialog#tts-modal {
 
 .uncloseai-flex-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(auto, max-content));
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
   align-items: center;
   gap: 8px;
 }
@@ -792,7 +801,8 @@ dialog#tts-modal {
 .uncloseai-message-actions {
   margin-top: 8px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(auto, max-content));
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
   gap: 8px;
   opacity: 0.8;
   justify-content: end;
@@ -862,17 +872,14 @@ dialog#tts-modal {
 
 /* Settings panel */
 .uncloseai-modal-settings {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 16px;
   display: none;
   overflow-y: auto;
   position: absolute;
-  top: 0;
+  top: 60px;
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--uncloseai-content-background, #f8f9fa);
   z-index: 10;
 }
 
diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css
index ce4fe8a..4617b45 100644
--- a/src/uncloseai-modal-pico.css
+++ b/src/uncloseai-modal-pico.css
@@ -111,17 +111,14 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
 
 /* Settings panel */
 .uncloseai-modal-settings {
-  border-top: 1px solid rgba(0, 0, 0, 0.1);
-  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   padding: 16px;
   display: none;
   overflow-y: auto;
   position: absolute;
-  top: 0;
+  top: 60px;
   left: 0;
   right: 0;
   bottom: 0;
-  background: var(--uncloseai-content-background, #f8f9fa);
   z-index: 10;
 }
 
@@ -132,13 +129,24 @@ dialog#uncloseai-embedded-modal[data-theme="light"] {
   align-content: start;
 }
 
+/* Dark theme settings panel */
+dialog#uncloseai-embedded-modal[data-theme="dark"] .uncloseai-modal-settings {
+  background: rgb(26, 26, 26);
+}
+
+/* Light theme settings panel */
+dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings {
+  background: rgb(255, 255, 255);
+}
+
 /* Controls */
 .uncloseai-modal-controls {
   padding: 8px 16px;
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
+  grid-auto-flow: column;
+  grid-auto-columns: minmax(120px, 1fr);
   gap: 8px;
   overflow-x: auto;
   -webkit-overflow-scrolling: touch;
@@ -705,7 +713,8 @@ dialog#tts-modal {
 
 .uncloseai-flex-row {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(auto, max-content));
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
   align-items: center;
   gap: 8px;
 }
@@ -842,7 +851,8 @@ dialog#tts-modal {
 .uncloseai-message-actions {
   margin-top: 8px;
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(auto, max-content));
+  grid-auto-flow: column;
+  grid-auto-columns: max-content;
   gap: 8px;
   opacity: 0.8;
   justify-content: end;