From fda6fb0eca436762617327ee28ca49b5bc11d1d4 Mon Sep 17 00:00:00 2001 From: Federico Jaramillo Martinez Date: Wed, 3 Jun 2026 21:21:22 +0200 Subject: [PATCH] fix: keep mobile tab badges inline --- .changeset/mobile-tab-icons.md | 2 +- src/client/src/components/appShell/AppMobileMainTabs.ts | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.changeset/mobile-tab-icons.md b/.changeset/mobile-tab-icons.md index fbd4b8d..812276b 100644 --- a/.changeset/mobile-tab-icons.md +++ b/.changeset/mobile-tab-icons.md @@ -2,4 +2,4 @@ "@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. diff --git a/src/client/src/components/appShell/AppMobileMainTabs.ts b/src/client/src/components/appShell/AppMobileMainTabs.ts index abf6562..8c85b3a 100644 --- a/src/client/src/components/appShell/AppMobileMainTabs.ts +++ b/src/client/src/components/appShell/AppMobileMainTabs.ts @@ -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; } @media (max-width: 760px) { .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; } .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-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; } } `; }