ceos/opencode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(app): align debug gutter text (#39782)

Browse source
This commit is contained in:
Luke Parker 2026-07-31 11:46:36 +10:00 • committed by GitHub
commit e024e2ef92
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 36 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

54
packages/app/src/components/debug-bar.tsx
View file

@ -66,7 +66,7 @@ function Cell(props: {
<div <div
classList={{ classList={{
"flex min-w-0 items-center": true, "flex min-w-0 items-center": true,
"min-h-[20px] w-fit flex-row justify-start gap-1.5 px-1.5 py-0.5 text-left": !!props.inline, "min-h-[20px] w-fit justify-start px-1.5 py-0.5 text-left": !!props.inline,
"justify-center text-center": !props.inline, "justify-center text-center": !props.inline,
"min-h-[42px] w-full flex-col rounded-[8px] px-0.5 py-1": !props.inline, "min-h-[42px] w-full flex-col rounded-[8px] px-0.5 py-1": !props.inline,
"col-span-2": !!props.wide && !props.inline, "col-span-2": !!props.wide && !props.inline,
@ -74,21 +74,29 @@ function Cell(props: {
> >
<div <div
classList={{ classList={{
"text-[10px] leading-none font-black uppercase tracking-[0.04em] opacity-70": true, "flex min-w-0": true,
"-translate-y-px items-baseline gap-1.5": !!props.inline,
"flex-col items-center": !props.inline,
}} }}
> >
{props.label} <div
</div> classList={{
<div "text-[10px] leading-none font-black uppercase tracking-[0.04em] opacity-70": true,
classList={{ }}
"uppercase leading-none font-bold tabular-nums": true, >
"text-[11px]": !!props.inline, {props.label}
"text-[13px] sm:text-[14px]": !props.inline, </div>
"text-text-on-critical-base": !!props.bad, <div
"opacity-70": !!props.dim, classList={{
}} "uppercase leading-none font-bold tabular-nums": true,
> "text-[11px]": !!props.inline,
{props.value} "text-[13px] sm:text-[14px]": !props.inline,
"text-text-on-critical-base": !!props.bad,
"opacity-70": !!props.dim,
}}
>
{props.value}
</div>
</div> </div>
</div> </div>
) )
@ -116,15 +124,25 @@ function FocusCell(props: { active: boolean; inline?: boolean; onClick: () => vo
aria-pressed={props.active} aria-pressed={props.active}
classList={{ classList={{
"flex min-w-0 items-center font-mono uppercase hover:bg-surface-raised-base focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-border-focus": true, "flex min-w-0 items-center font-mono uppercase hover:bg-surface-raised-base focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-[-2px] focus-visible:outline-border-focus": true,
"min-h-[20px] w-fit flex-row justify-start gap-1.5 rounded px-1.5 py-0.5 text-left": !!props.inline, "min-h-[20px] w-fit justify-start rounded px-1.5 py-0.5 text-left": !!props.inline,
"min-h-[42px] w-full flex-col justify-center rounded-[8px] px-0.5 py-1 text-center": !props.inline, "min-h-[42px] w-full flex-col justify-center rounded-[8px] px-0.5 py-1 text-center": !props.inline,
"bg-surface-raised-base text-text-strong": props.active, "bg-surface-raised-base text-text-strong": props.active,
}} }}
onClick={props.onClick} onClick={props.onClick}
> >
<span class="text-[10px] leading-none font-black tracking-[0.04em] opacity-70">FOCUS</span> <span
<span classList={{ "leading-none font-bold": true, "text-[11px]": !!props.inline, "text-[13px]": !props.inline }}> classList={{
{props.active ? "ON" : "OFF"} flex: true,
"-translate-y-px items-baseline gap-1.5": !!props.inline,
"flex-col items-center": !props.inline,
}}
>
<span class="text-[10px] leading-none font-black tracking-[0.04em] opacity-70">FOCUS</span>
<span
classList={{ "leading-none font-bold": true, "text-[11px]": !!props.inline, "text-[13px]": !props.inline }}
>
{props.active ? "ON" : "OFF"}
</span>
</span> </span>
</button> </button>
) )