From e2b413917fa410605824795059fe8253fb43634e Mon Sep 17 00:00:00 2001 From: Russell Ballestrini Date: Thu, 10 Jul 2025 16:34:33 -0400 Subject: [PATCH] fix: improve settings panel and button overflow issues - Increase settings panel top offset from 60px to 80px to avoid header - Remove max-height: 40vh restriction on settings panel - Add overflow hidden and text-overflow ellipsis to buttons - Change grid-auto-columns to minmax(0, max-content) for proper sizing - Ensure buttons don't expand beyond their content width --- src/.uncloseai-modal-pico.css.swp | Bin 0 -> 45056 bytes src/uncloseai-modal-builtin.css | 9 ++++++--- src/uncloseai-modal-pico.css | 12 +++++++----- 3 files changed, 13 insertions(+), 8 deletions(-) create mode 100644 src/.uncloseai-modal-pico.css.swp diff --git a/src/.uncloseai-modal-pico.css.swp b/src/.uncloseai-modal-pico.css.swp new file mode 100644 index 0000000000000000000000000000000000000000..e4574ee483779c4266622b2665a0e2450f70e8fb GIT binary patch literal 45056 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 literal 0 HcmV?d00001 diff --git a/src/uncloseai-modal-builtin.css b/src/uncloseai-modal-builtin.css index 5b43540..5e1e75e 100644 --- a/src/uncloseai-modal-builtin.css +++ b/src/uncloseai-modal-builtin.css @@ -100,7 +100,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] { display: none; overflow-y: auto; position: absolute; - top: 60px; + top: 80px; left: 0; right: 0; bottom: 0; @@ -131,7 +131,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings { border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: grid; grid-auto-flow: column; - grid-auto-columns: minmax(120px, 1fr); + grid-auto-columns: minmax(0, max-content); gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; @@ -693,6 +693,9 @@ dialog#tts-modal { color: var(--uncloseai-primary-text, #495057); transition: all 0.2s; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; } .uncloseai-btn-primary:hover { @@ -876,7 +879,7 @@ dialog#tts-modal { display: none; overflow-y: auto; position: absolute; - top: 60px; + top: 80px; left: 0; right: 0; bottom: 0; diff --git a/src/uncloseai-modal-pico.css b/src/uncloseai-modal-pico.css index 4617b45..29cd392 100644 --- a/src/uncloseai-modal-pico.css +++ b/src/uncloseai-modal-pico.css @@ -115,7 +115,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] { display: none; overflow-y: auto; position: absolute; - top: 60px; + top: 80px; left: 0; right: 0; bottom: 0; @@ -146,7 +146,7 @@ dialog#uncloseai-embedded-modal[data-theme="light"] .uncloseai-modal-settings { border-bottom: 1px solid rgba(0, 0, 0, 0.1); display: grid; grid-auto-flow: column; - grid-auto-columns: minmax(120px, 1fr); + grid-auto-columns: minmax(0, max-content); gap: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; @@ -268,7 +268,7 @@ dialog#translate-modal { border: none; border-radius: 8px; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); - background: white; + /*background: white;*/ overflow: auto; /* Override PicoCSS flex layout */ @@ -743,6 +743,9 @@ dialog#tts-modal { color: var(--uncloseai-primary-text, #495057); transition: all 0.2s; white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + min-width: 0; } .uncloseai-btn-primary:hover { @@ -925,7 +928,6 @@ dialog#tts-modal { border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; padding: 16px !important; display: none !important; - max-height: 40vh !important; overflow-y: auto !important; } @@ -1262,4 +1264,4 @@ dialog#uncloseai-embedded-modal[data-theme="dark"] .user-message { .widget-translate-dropdown .option:hover { background: #f5f5f5; -} \ No newline at end of file +}