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>
This commit is contained in:
Ali 2026-04-20 12:48:53 +00:00
parent 5e78072b0a
commit 38bee59283
2 changed files with 77 additions and 3 deletions

View File

@ -873,6 +873,80 @@ textarea.form-control:focus,
box-shadow: none !important; 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) Icon Animations Shared (all themes)
========================================================================== */ ========================================================================== */

View File

@ -581,12 +581,12 @@
[data-jey-theme="chrome"] .modal-content { [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; 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: 1px solid #999 !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;
box-shadow: box-shadow:
6px 6px 24px rgba(0,0,0,0.25), 6px 6px 24px rgba(0,0,0,0.25),
-3px -3px 8px rgba(255,255,255,0.15), -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 { [data-jey-theme="chrome"] .modal-header {