snowspeeder/pi-web
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: keep mobile tab badges inline

Browse Source
This commit is contained in:
Federico Jaramillo Martinez
2026-06-03 21:21:22 +02:00
parent 401dab69ad
commit fda6fb0eca
2 changed files with 3 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.changeset/mobile-tab-icons.md
+1 -1
View File
@@ -2,4 +2,4 @@
"@jmfederico/pi-web": patch "@jmfederico/pi-web": patch
--- ---
Use compact icons and initials for the mobile main tab bar so tabs are easier to fit without losing horizontal scrolling, and let workspace panel plugins provide custom SVG tab icons. Use compact icons, initials, and inline badges for the mobile main tab bar so tabs are easier to fit without losing horizontal scrolling, and let workspace panel plugins provide custom SVG tab icons.
src/client/src/components/appShell/AppMobileMainTabs.ts
+2 -2
View File
@@ -216,11 +216,11 @@ export class AppMobileMainTabs extends LitElement {
button { border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); color: var(--pi-text); padding: 7px 9px; cursor: pointer; } button { border: 1px solid var(--pi-border); border-radius: 8px; background: var(--pi-surface); color: var(--pi-text); padding: 7px 9px; cursor: pointer; }
@media (max-width: 760px) { @media (max-width: 760px) {
.mobile-tabs { gap: 4px; padding: 6px 8px; } .mobile-tabs { gap: 4px; padding: 6px 8px; }
.mobile-tabs button { position: relative; min-width: 40px; height: 36px; justify-content: center; gap: 0; padding: 0 10px; } .mobile-tabs button { min-width: 40px; height: 36px; justify-content: center; gap: 4px; padding: 0 8px; }
.mobile-tabs .navigation-tab { display: inline-flex; } .mobile-tabs .navigation-tab { display: inline-flex; }
.tab-fallback { display: inline-block; } .tab-fallback { display: inline-block; }
.tab-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } .tab-label { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; }
.tab-badge { position: absolute; top: 1px; right: 1px; min-width: 13px; padding: 0 3px; font-size: 10px; line-height: 13px; } .tab-badge { min-width: 13px; padding: 0 4px; font-size: 10px; line-height: 13px; }
} }
`; `;
} }