From 38bee592839f596a1f0d23459e222674aebe1d6c Mon Sep 17 00:00:00 2001
From: Ali <010109ali@gmail.com>
Date: Mon, 20 Apr 2026 12:48:53 +0000
Subject: [PATCH] desktop modal: fit-to-content, crisp text, matched border
 radius

Captions wrap to 2 lines with ellipsis inside grid track instead of
overflowing into neighbouring icons. Modal header loses its gradient
bar (title only). Body stops forcing an inner scrollbar when icons
fit. Chrome modal border switches from border-image (sharp rect) to
a plain 1px border that follows border-radius.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 jey_theme/public/css/shared.css       | 74 +++++++++++++++++++++++++++
 jey_theme/public/css/theme_chrome.css |  6 +--
 2 files changed, 77 insertions(+), 3 deletions(-)

diff --git a/jey_theme/public/css/shared.css b/jey_theme/public/css/shared.css
index a5bf11c..5b799da 100644
--- a/jey_theme/public/css/shared.css
+++ b/jey_theme/public/css/shared.css
@@ -873,6 +873,80 @@ textarea.form-control:focus,
         box-shadow: none !important;
 }
 
+/* ==========================================================================
+   Desktop Modal (module icons picker) — caption overflow + clean heading
+   ========================================================================== */
+
+/* Give the 4-col icon grid room between cells so captions don't collide */
+#desktop-modal .icons-container .icons {
+        gap: 12px 8px !important;
+        padding: 12px 0 !important;
+}
+
+/* Each icon: constrain to its grid track and center contents */
+#desktop-modal .desktop-icon {
+        min-width: 0 !important;
+        display: flex !important;
+        flex-direction: column !important;
+        align-items: center !important;
+        text-align: center !important;
+}
+
+/* Caption wraps to 2 lines max, truncates with ellipsis, never overflows column */
+#desktop-modal .desktop-icon .icon-caption {
+        width: 100% !important;
+        max-width: 100% !important;
+        padding: 0 4px !important;
+        margin-top: 14px !important;
+}
+
+#desktop-modal .desktop-icon .icon-title {
+        width: 100% !important;
+        max-width: 100% !important;
+        display: -webkit-box !important;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden !important;
+        text-overflow: ellipsis !important;
+        overflow-wrap: anywhere !important;
+        word-break: break-word !important;
+        line-height: 1.25 !important;
+        white-space: normal !important;
+}
+
+/* Strip the themed gradient/border off the desktop-modal header — title only, no bar */
+#desktop-modal .modal-header.desktop-modal-heading {
+        background: transparent !important;
+        border-bottom: 0 !important;
+        box-shadow: none !important;
+}
+
+#desktop-modal .modal-header.desktop-modal-heading .modal-title,
+#desktop-modal .modal-header.desktop-modal-heading .title-input-label span {
+        background: transparent !important;
+        box-shadow: none !important;
+        text-shadow: none !important;
+}
+
+/* Everything inside the desktop-modal renders text crisply — no inherited blur */
+#desktop-modal .icon-title,
+#desktop-modal .icon-caption {
+        text-shadow: none !important;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+}
+
+/* Grow to content: no inner scrollbar when icons fit */
+#desktop-modal .modal-body.desktop-modal-body {
+        overflow: visible !important;
+        max-height: none !important;
+}
+
+#desktop-modal .icons-container {
+        overflow: visible !important;
+        max-height: none !important;
+}
+
 /* ==========================================================================
    Icon Animations — Shared (all themes)
    ========================================================================== */
diff --git a/jey_theme/public/css/theme_chrome.css b/jey_theme/public/css/theme_chrome.css
index 0bc5bef..b845c49 100644
--- a/jey_theme/public/css/theme_chrome.css
+++ b/jey_theme/public/css/theme_chrome.css
@@ -581,12 +581,12 @@
 
 [data-jey-theme="chrome"] .modal-content {
         background: linear-gradient(45deg, #ccc 3%, #e8e8e8 12%, #d5d5d5 30%, #eee 50%, #d5d5d5 70%, #e8e8e8 88%, #ccc 97%) !important;
-        border: 2px solid transparent !important;
-        border-image: conic-gradient(from 140deg, #a0a0a0 0deg, #e8e8e8 40deg, #888 80deg, #ddd 120deg, #a0a0a0 170deg, #eee 210deg, #999 260deg, #d0d0d0 310deg, #a0a0a0 360deg) 1 !important;
+        border: 1px solid #999 !important;
         box-shadow:
                 6px 6px 24px rgba(0,0,0,0.25),
                 -3px -3px 8px rgba(255,255,255,0.15),
-                inset 0 1px 0 rgba(255,255,255,0.6) !important;
+                inset 0 1px 0 rgba(255,255,255,0.6),
+                inset 0 0 0 1px rgba(255,255,255,0.35) !important;
 }
 
 [data-jey-theme="chrome"] .modal-header {