lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-08-28 08:56:58 +00:00
Code Issues Actions 3 Packages Projects Releases Wiki Activity

fix(gui): keep the folder name field from inheriting input[type=text] sizing

Browse Source 
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.
This commit is contained in:
Nariman Jelveh
2026-08-07 20:42:38 -07:00
parent 8643a84f7c
commit 1af0ce2d55
1 changed files with 12 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/css/dashboard.css
+12 -1
View File
@@ -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 {