lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-08-23 22:47:19 +00:00
Code Issues Actions 6 Packages Projects Releases Wiki Activity

Fix clipped app tiles and soften files header hover styling

Browse Source 
Apps tab: tile rows only budget one label line, so two-line app names
made flexbox shrink the icon box into a landscape crop and clip the
label mid-glyph. Clamp labels to a single line and exempt the icon box
from flex shrinking.

Files tab: header hover states (nav arrows, breadcrumbs, action
buttons) now use a neutral #EEE chip and no longer recolor the glyph;
nav arrows also render at full opacity when enabled.
This commit is contained in:
jelveh
2026-07-18 21:27:24 -07:00
parent fdcc2e301b
commit c225fabbd4
1 changed files with 10 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/css/dashboard.css
+10 -11
View File
@@ -1454,7 +1454,6 @@ body.myapps-reordering .myapps-tile {
}
.dashboard .path-btn {
opacity: 0.6;
width: 28px;
cursor: pointer;
border-radius: 5px;
@@ -1464,9 +1463,8 @@ body.myapps-reordering .myapps-tile {
@media (hover: hover) {
.dashboard .path-btn:hover {
filter: invert(1) hue-rotate(180deg);
background-color: var(--select-color);
opacity: 1;
background-color: #EEE;
border-color: #EEE;
}
}
@@ -1475,10 +1473,12 @@ body.myapps-reordering .myapps-tile {
filter: invert(1) hue-rotate(180deg);
}
@media (hover: hover) {
/* The hover chip is light (#EEE) even in dark mode, so the icon must
drop its dark-mode inversion to stay readable on it. */
.path-btn:hover {
filter: invert(0) hue-rotate(0deg);
background-color: var(--select-color);
opacity: 1;
background-color: #EEE;
border-color: #EEE;
}
}
}
@@ -1513,8 +1513,8 @@ body.myapps-reordering .myapps-tile {
@media (hover: hover) {
.dashboard-section-files .header .path-action-btn:hover {
color: var(--dashboard-background);
background-color: var(--select-color);
background-color: #EEE;
border-color: #EEE;
}
}
@@ -1543,9 +1543,8 @@ body.myapps-reordering .myapps-tile {
@media (hover: hover) {
.dashboard-section-files .header .path .dirname:hover {
color: var(--dashboard-background);
background-color: var(--select-color);
border: 1px solid var(--select-color);
background-color: #EEE;
border-color: #EEE;
}
}