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

packages/app/src/components/debug-bar.tsx

@@ -66,7 +66,7 @@ function Cell(props: {
     <div
       classList={{
         "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,
         "min-h-[42px] w-full flex-col rounded-[8px] px-0.5 py-1": !props.inline,
         "col-span-2": !!props.wide && !props.inline,
@@ -74,21 +74,29 @@ function Cell(props: {
     >
       <div
         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={{
-          "uppercase leading-none font-bold tabular-nums": true,
-          "text-[11px]": !!props.inline,
-          "text-[13px] sm:text-[14px]": !props.inline,
-          "text-text-on-critical-base": !!props.bad,
-          "opacity-70": !!props.dim,
-        }}
-      >
-        {props.value}
+        <div
+          classList={{
+            "text-[10px] leading-none font-black uppercase tracking-[0.04em] opacity-70": true,
+          }}
+        >
+          {props.label}
+        </div>
+        <div
+          classList={{
+            "uppercase leading-none font-bold tabular-nums": true,
+            "text-[11px]": !!props.inline,
+            "text-[13px] sm:text-[14px]": !props.inline,
+            "text-text-on-critical-base": !!props.bad,
+            "opacity-70": !!props.dim,
+          }}
+        >
+          {props.value}
+        </div>
       </div>
     </div>
   )
@@ -116,15 +124,25 @@ function FocusCell(props: { active: boolean; inline?: boolean; onClick: () => vo
       aria-pressed={props.active}
       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,
-        "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,
         "bg-surface-raised-base text-text-strong": props.active,
       }}
       onClick={props.onClick}
     >
-      <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
+        classList={{
+          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>
     </button>
   )