diff --git a/.changeset/right-aligned-machine-status.md b/.changeset/right-aligned-machine-status.md new file mode 100644 index 0000000..ac8e108 --- /dev/null +++ b/.changeset/right-aligned-machine-status.md @@ -0,0 +1,5 @@ +--- +"@jmfederico/pi-web": patch +--- + +Align the desktop machine badge status to the right edge of the badge. diff --git a/src/client/src/components/MachineSwitcher.ts b/src/client/src/components/MachineSwitcher.ts index c32383c..f983409 100644 --- a/src/client/src/components/MachineSwitcher.ts +++ b/src/client/src/components/MachineSwitcher.ts @@ -272,7 +272,7 @@ export class MachineSwitcher extends LitElement implements KeyboardNavigableSect .machine-switcher { min-width: 0; } .machine-switcher-button { box-sizing: border-box; width: 100%; min-width: 0; display: flex; align-items: center; gap: 6px; border: 1px solid var(--pi-border); border-radius: 999px; background: var(--pi-surface); color: var(--pi-text); padding: 5px 8px; cursor: pointer; text-align: left; } .machine-switcher-button:hover, .machine-switcher-button:focus-visible { border-color: var(--pi-accent); background: var(--pi-selection-bg); } - .machine-switcher-text { min-width: 0; display: grid; gap: 1px; } + .machine-switcher-text { flex: 1 1 auto; min-width: 0; display: grid; gap: 1px; } .machine-switcher-kicker { color: var(--pi-muted); font-size: 10px; line-height: 1; text-transform: uppercase; letter-spacing: .02em; } .machine-switcher-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; line-height: 1.2; } .machine-status { flex: 0 0 auto; color: var(--pi-muted); font-size: 11px; }