From 1af0ce2d55e87863936e4434f23025cd4cfbac41 Mon Sep 17 00:00:00 2001 From: Nariman Jelveh Date: Fri, 7 Aug 2026 20:42:38 -0700 Subject: [PATCH] fix(gui): keep the folder name field from inheriting input[type=text] sizing MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit style.css styles every input[type=text] with `width: 100%` and grows it to `padding: 7px; border: 2px` on focus. `input.myapps-group-name` matches at the same specificity, so it only wins the properties it actually declares — width was never one of them, and the focus rule declared neither padding nor border width. The name field therefore spanned the entire folder card (so its hover and focus chip read as a full-width bar rather than the name) and grew 8px taller the moment it was clicked, shoving the folder's app grid down. Spell the three out, in both the resting and the focus rule — the same trap .myapps-search already documents next door. --- src/gui/src/css/dashboard.css | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/gui/src/css/dashboard.css b/src/gui/src/css/dashboard.css index 150b984a5..217c60b5b 100644 --- a/src/gui/src/css/dashboard.css +++ b/src/gui/src/css/dashboard.css @@ -1306,8 +1306,17 @@ body.myapps-reordering .myapps-tile.myapps-tile-merge-armed .myapps-tile-icon { } input.myapps-group-name { + /* style.css's input[type=text] rules match this box at the SAME + specificity, so only what is spelled out here wins. width, padding and + border have to be stated (twice — the focus rule below faces + input[type=text]:focus, which sets padding 7px / border 2px): left + unstated, the name field stretches across the whole card and its box + grows 8px taller the moment it is clicked, shoving the folder's grid + down. Same trap .myapps-search documents. */ -webkit-appearance: none; appearance: none; + box-sizing: border-box; + width: auto; max-width: 100%; padding: 4px 10px; border: 1px solid transparent; @@ -1328,8 +1337,10 @@ input.myapps-group-name { } input.myapps-group-name:focus { - background: var(--dashboard-card-background); + padding: 4px 10px; + border-width: 1px; border-color: var(--select-color); + background: var(--dashboard-card-background); } .myapps-group-panel-grid {