Skip to content

fix(web): hide provider device scrollbar

MacroscopeApp / Macroscope - UI Consistency completed Aug 27, 2026 in 11m 7s

UI Consistency: 1 minor issue found

Earlier findings on this PR are resolved; one small layout artifact remains.

  • apps/web/src/components/settings/ProviderSettingsPanel.tsx (L837): the list footer's border-t border-border/70 stacks against the last provider row's border-b border-border/60 (the row-level last:border-b-0 can never match because the footer is the column's last child), producing a 2px seam of two different border alphas. Suggested fix posted inline.

No primitive-ownership, accessibility, or Tailwind-ownership violations found in the changed lines.

Details

Note

Your check run agent prompt is: .macroscope/check-run-agents/ui-consistency.md
More information about how Check Run Agents work can be found in our Help Center.

Verified as addressed since previous pushes:

  • Tab strips (device strip in ProviderSettingsPanel.tsx, Models/Configuration strip in ProviderInstanceCard.tsx) now use aria-pressed rather than an unimplemented role="tab"/tabpanel contract, and carry cursor-pointer plus focus-visible:ring-2 focus-visible:ring-ring, matching the Button focus contract closely enough (raw tab elements are an accepted exception to the primitive rule).
  • The Models tab is hidden when driverOption === undefined, and visibleTab pins the panel to Configuration in that case, so no selectable-but-empty tab remains.
  • The Advanced disclosure uses the shared Collapsible/CollapsibleTrigger/CollapsibleContent primitives (components/ui/collapsible.tsx), restoring cursor-pointer, aria-expanded/aria-controls, and the panel height transition.
  • The refresh action is re-wrapped in Tooltip/TooltipPopup, consistent with other icon-micro settings actions; "Add provider" uses size="compact" instead of call-site geometry overrides.
  • Provider status is readable again in both modes: the list row renders the status dot plus headline, and the editor renders summary.headline + summary.detail for warning/error states.
  • providerStatus.ts moves the disabled dot from bg-amber-400 to the semantic bg-muted-foreground/50; PROVIDER_STATUS_STYLES has no other consumers, so no cross-surface color regression.
  • The device strip's scrollbar hiding ([-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden) matches the existing pattern in BrowserDeviceToolbar.tsx, PullRequestDetailPanel.tsx, and ui/scroll-area.tsx.
  • ConnectionStatusDot without tooltipText renders a span, so wrapping the tab in TooltipTrigger does not nest buttons; the status wording is available via the tooltip and an sr-only span.
  • No stale consumers of the removed isExpanded/onExpandedChange props; RedactedSensitiveText still has consumers in this file and in SourceControlSettings.tsx, so nothing became dead.
  • The "Health check interval" row now living inside a collapsed panel does not break settings search: it has no id and no entry in SETTINGS_SEARCH_ITEMS.

Noted but not reported: the underline tab treatment is now duplicated verbatim at three call sites across two files with no shared owner (the app's other horizontal tab strip uses ToggleGroup variant="segmented"). This was raised on an earlier push and the strips were deliberately converged inline rather than extracted; it remains a reasonable follow-up if a third surface adopts the treatment.


πŸ” Agent activity β€” 36 tool calls

πŸ’­ I'm checking the current PR head against prior review runs to see how the code evolved, noting that the device tabs now use horizontal overflow scrolling with the scrollbar hidden across browsers. This means the fade affordance for more content is gone, since hiding the scrollbar without a fade removes the visual cue that content extends further β€” this may be worth re-flagging depending on whether the fix is adequate. I also notice the refresh button tooltip was fixed per an earlier comment, and the editor status now shows a headline and detail on warning/error, but the auth email display remains removed, which was flagged before. Now I'm checking whether RedactedSensitiveText is dead code, since the auth email it displayed no longer appears anywhere β€” let me look at the other files to confirm.

1. git_tools β€” RedactedSensitiveText

2. browse_code β€” apps/web/src/components/settings/ProviderInstanceCard.tsx

πŸ’­ Wait, RedactedSensitiveText is still imported and used elsewhere in the file, so the diff only removed the ProviderAuthEmail helper, not that import. I want to check the rest of the file, lines 620-820 and the tabs area, to confirm.

3. browse_code β€” apps/web/src/components/settings/ProviderInstanceCard.tsx

πŸ’­ Good, the tabs now use aria-pressed instead of role="tab", with cursor-pointer and focus-visible ring added, addressing that earlier finding. Next I'll check the ProviderSettingsPanel's current state.

4. browse_code β€” apps/web/src/components/settings/ProviderSettingsPanel.tsx

πŸ’­ I'm thinking about the device tabs using horizontal overflow scroll with a hidden scrollbar, and recalling the repo guidance that scroll fades should use the shared virtualized-scroll-fade contract rather than a component-specific maskβ€”consistent with my earlier suggestion in that direction. Hiding the scrollbar entirely rather than adopting the shared fade contract seems like a real finding, since the rules require keeping the native scrollbar lane visible and opaque as the overflow affordance. I should check whether the codebase already has an established pattern for hiding scrollbars, like a no-scrollbar utility or scrollbar-width:none usage elsewhere.

5. git_tools β€” scrollbar-width:none|::-webkit-scrollbar]:hidden|-ms-overflow-style

6. git_tools β€” overflow-x-auto

πŸ’­ The scrollbar hiding matches existing precedent elsewhere in the codebase, so that's no longer a valid finding, and the lack of scroll fade is also consistent with those same components. I'm moving on to check the rest of ProviderSettingsPanel for any remaining issues.

7. browse_code β€” apps/web/src/components/settings/ProviderSettingsPanel.tsx

8. browse_code β€” apps/web/src/components/settings/ProviderSettingsPanel.tsx

πŸ’­ I'm checking whether the Collapsible primitive's trigger properly supports className and focus styling, and I'm also spotting a potential logic issue where readOnly forces the collapsible open regardless of the onOpenChange handler tied to advancedOpen.

9. browse_code β€” apps/web/src/components/ui/collapsible.tsx

πŸ’­ Good, the Collapsible primitive is being used correctly. Now I'm checking the status dot style change from amber to muted-foreground in providerStatus.ts β€” since this is a shared token, I need to see if other consumers of PROVIDER_STATUS_STYLES are affected by this change.

10. browse_code β€” apps/web/src/components/settings/providerStatus.ts

11. git_tools β€” PROVIDER_STATUS_STYLES|providerStatus

πŸ’­ I'm tracing how the warning dot color changed in providerStatus.ts, noting the diff shows the amber color being replaced with a muted foreground style at the current head.

12. browse_code β€” apps/web/src/components/settings/providerStatus.ts

πŸ’­ That disabled state change from an amber color to a semantic muted-foreground token looks like a genuine improvement, not worth flagging. Now I'm checking the ProviderInstanceCard's titleIconNode where the diff removed statusDotClassName and indicatorBackground props from ProviderInstanceIcon, verifying whether those props are still needed elsewhere or if removing the status dot indicator is safe.

13. git_tools β€” statusDotClassName|indicatorBackground

πŸ’­ I'm checking the editor status display logic for various provider statesβ€”covering cases like disabled providers, warning versus error statuses, and unauthenticated states where the server status might show "warning" instead of a distinct auth failure indicator. The authenticated email is no longer shown in the provider list row, just "Authenticated Β· label" nowβ€”that's a minor information loss but seems like an intentional product decision rather than a bug worth re-flagging, especially since the shared redacted-text component still has another active consumer elsewhere. I also verify the aria-pressed attribute placement on the select button versus the nested switch, and check the focus-visible ring styling against the overflow-hidden container. Continuing through remaining details: list mode correctly skips passing delete/header-action props since those are editor-only, the header title doesn't duplicate the version code, and selected-row fallback logic works fine given the settings component keys by environment ID. I also confirm that switching provider rows remounts the editor component (resetting the active tab to Configuration) since it's keyed by instance ID, and that device tabs now consistently use aria-pressed for accessibility. I'm now checking a few smaller items β€” verifying SettingsPageContainer accepts a width="expanded" prop, noting the "On" label in the list header is purely cosmetic, and confirming the Switch behaves correctly inside an inert readOnly wrapper in list mode. I also confirm "compact" is a valid Button size that was already adopted from a prior suggestion. The more substantive observation is that the editor's Models tab, Configuration tab, and device tab strip all repeat the same lengthy underline styling classes verbatim across three call sites β€” which conflicts with the guideline that repeated durable treatments should be extracted into a named primitive size or variant. Since a previous review flagged an inconsistency between two of these strips and the fix was just to copy-paste the class string a third time, I want to check whether a shared tab primitive already exists β€” looking at RightPanelTabs and the ui components folder for an existing tabs implementation before recommending consolidation.

14. git_tools β€” after:bg-primary

15. browse_code β€” apps/web/src/components/ui/*.tsx

πŸ’­ There's no Tabs primitive here, and I count three call sites across two files repeating the same underline-tab treatment. The rule favors a shared helper when a durable pattern repeats across multiple consumers, and three across two files fits that threshold reasonably well. I already flagged this concept in run 42f8f97, but they resolved it by duplicating rather than extracting a helper, so re-flagging feels borderline. Let me look for more concrete regressions instead. I'm checking whether focus rings on the list row buttons get clipped by the overflow-hidden container, whether the truncated three-line row content still fits, and whether removing the tooltipText prop from ConnectionStatusDot changes whether it renders as a button. If it does render a button internally even without tooltipText, that would create nested buttons inside the TooltipTrigger, which is invalid HTML and a genuine bug worth flagging.

16. git_tools β€” export function ConnectionStatusDot

17. browse_code β€” apps/web/src/components/ConnectionStatusDot.tsx

πŸ’­ Good, that resolves the tooltip issue without a nested button. Checking the device tab now: the tab button uses TooltipTrigger's render prop with a base button, which is fine, and the tooltip only shows status text while the label stays visible. I'm noting that the sr-only status span sits inside the button alongside other content, which I should verify doesn't cause duplication issues. Now I'll check whether SettingsPageContainer supports a width="expanded" prop and accepts a className.

18. git_tools β€” function SettingsPageContainer|width?:|expanded

19. git_tools β€” SettingsPageContainer

πŸ’­ I'm noticing the line numbers from grep seem to match the head commit rather than a different revision, which is confusing my assumption about which version git_grep defaults to searching. I should just re-run the grep with an explicit revision and directly view the file to confirm where the width prop actually lives.

20. git_tools β€” SettingsPageContainer

21. browse_code β€” apps/web/src/components/settings/settingsLayout.tsx

πŸ’­ Good, that's confirmed. Now I'm checking SettingsSection to see if nesting the two-pane grid works fine, and noting the deviceTabs strip has a full-bleed bottom border that's purely cosmetic. I'm also considering deeper issues, like how the Switch behaves for readOnly in list mode. Checking through more possibilities: the delete-then-fallback logic for selectedRow works fine, the environment test file covers both modes, and the fake table header for the provider list is fine under the semantic row exception since rows are buttons. I'm now looking at whether the fixed-width left column has a max-width constraint, since it needs to behave correctly when stacked below the lg breakpoint. I trace through the border logic on the row list: since last:border-b-0 only applies to the last row and the footer div comes after it as a sibling, the last row's bottom border never gets removed, so it stacks against the footer's top border creating a doubled line at that seam. That's a small but real visual inconsistency worth flagging, though I'm weighing whether it's significant enough to call out. Checking a few more spots: version code placement in list vs editor mode looks fine, and the tab strip styling with focus rings seems consistent. I want to verify the button focus-visible ring matches the shared Button component's convention, particularly around ring-offset usage, to make sure this custom tab button isn't diverging from the design system.

22. browse_code β€” apps/web/src/components/ui/button.tsx

πŸ’­ Comparing the focus ring styles between the standard Button component and the new raw buttons, the difference in offset is minor. I also check that the coarse-pointer hit target sizing is satisfied since the tab buttons and list row button are already tall enough, then move on to look for other patterns in the codebase. I'm curious whether RightPanelTabs uses a similar raw button pattern or something like ToggleGroup with data-state β€” if it matches the new strips' approach, there's no real divergence worth flagging.

23. browse_code β€” In apps/web/src, how are horizontal underline-style tab strips implemented (e.g. RightPanelTabs, ThreadTerminalDrawer tabs, DiagnosticsSettings tabs)? Show the class strings and whether any shared helper/component (e.g. a tab button helper or ToggleGroup) owns the active-underline treatment. I want to know if there is an existing shared owner for underline tab buttons.

πŸ’­ I notice the app already has an established pattern for horizontal tab strips using ToggleGroup with segmented variant, as seen in PullRequestDetailPanel. This PR instead introduces a hand-rolled underline tab style using raw buttons and aria-pressed, duplicated across three places in two files, effectively recreating a single-selection toggle control without a shared owner. Rereading the guidelines, raw tab elements are actually explicitly exempted from the "must use primitive" rule since they're semantic tabs β€” but the duplication rule still bites here, since the same treatment repeats at three call sites and should collapse into a named variant, like an underline option on Toggle or a small shared helper. I recall flagging this divergence back in run 42f8f97, and it looks like the codebase converged on duplication instead of consolidation, so I'll file a comment asking for a shared component. Now I'm walking through each part of the tab strip and settings panel to rule out real regressions: the tooltip wrapping around the tab button looks consistent with prior guidance, the switch inside the row doesn't overlap with the button's clickable area, the read-only mode intentionally forces the Advanced section open inside an inert container, and the loading/error path correctly renders device tabs within the settings section. I'm now checking the edge case where there are zero options and whether the tab strip disappears cleanly in that state. One thing that stands out is the "Add provider" button using a compact outline variant with text inside the header action slot, whereas other SettingsSection headers seem to favor icon-only buttons β€” I want to check the SettingsSection component itself to see if that slot has any geometry constraints that would make a text button look off.

24. browse_code β€” apps/web/src/components/settings/settingsLayout.tsx

πŸ’­ I'm noticing the device tabs only use px-3 while the section headers and rows use px-3 sm:px-4, causing a slight 4px misalignment at larger breakpoints. Also the main grid card has no horizontal padding at all, so it'll sit flush against the section edges while everything else is insetβ€”this could make it visually wider than the header and rows. I want to check if other settings pages like DiagnosticsSettings have precedent for bordered cards as direct children of SettingsSection to see how they handle this alignment.

25. git_tools β€” rounded-(lg|xl) border border-border

πŸ’­ I'm checking the wrapper around that bordered card in ConnectionsSettings.tsx to see if it's padded with the standard settings gutter margins, which would tell me whether the new full-bleed card breaks that layout convention.

26. browse_code β€” apps/web/src/components/settings/ConnectionsSettings.tsx

πŸ’­ I'm checking whether that bordered container sits inside a dialog rather than the settings gutter, so I want to verify other sections to see if full-bleed content typically appears directly under a section without the usual padding. The gutter alignment point feels too subjective to raise confidently, so I'll drop it. Instead I'm weighing the strongest finding: the new underline tab treatment appears across 3 call sites in 2 files with duplicated utility classes, introducing a second visual tab language alongside the app's existing segmented toggle pattern β€” that's worth flagging as a real duplication issue. But I need to check whether a prior review already raised this, since a past comment asked for a shared tab-button helper and the response only unified class strings rather than extracting a helper, so re-raising it risks being a duplicate comment on an already-addressed thread. Since the code did change in response to that earlier flag, a follow-up isn't strictly forbidden, but I'm inclined to skip nagging about pure duplication and instead keep searching for an actual regression in the current code. I'm scanning the list row's selector button and its pressed-state handling, provider enable/disable switches across list and editor modes, and delete behavior in editor mode β€” and I'm noticing the enable Switch only appears in the list row, not in the editor, which looks like a real behavioral gap worth digging into further. Also the disabled status style and list row dot sizing look consistent with prior conventions, and the list row doesn't surface the badge label for experimental/beta drivers, which seems like a minor omission. The fallback icon span correctly drops the relative class now that the absolute status dot is gone, and I'm checking whether the badge visibility prop is still wired correctly on the provider icon. Now I want to grep for any leftover references to isExpanded or onExpandedChange elsewhere in the repo, since those props were removed and stale consumers could break typechecking.

27. git_tools β€” ProviderInstanceCard|onExpandedChange|openInstanceDetails

πŸ’­ The aria-pressed usage on list-row selectors and tab strips looks fine per my earlier recommendation. The editor tab buttons with px-0 make the focus ring hug text tightly, a minor cosmetic issue, and the visibleTab logic correctly falls back to "configuration" when driverOption is undefined. I should check whether ProviderModelsSection carries its own layout assumptions now that it's moved into a tab panel with different padding than its previous collapsible spacing β€” likely fine, but I want to verify it doesn't have its own "Models" heading that would duplicate the new tab label.

28. git_tools β€” Models

πŸ’­ I notice ProviderModelsSection duplicates the "Models" label since it's now inside a Models tab panel itself β€” a minor cosmetic redundancy. I also see the scroll container is still capped at a small max-height with plain native scrolling despite now having a full pane to work with, but that's pre-existing behavior, not something introduced by this change. Stepping back to decide what's worth flagging: given prior findings already addressed the concrete accessibility issues, the remaining real candidate is the repeated underline-tab treatment across three call sites in two files, with no shared primitive and divergence from the app's existing segmented-toggle tab pattern elsewhere. I'll post one comment on the in-scope tab strip component, noting the other duplicate location too. But I recall raising a version of this same point in an earlier run about consolidating the tab-button styling β€” they partially responded by unifying the strings without extracting a shared helper, so repeating "now extract it" would just be nagging the same rejected suggestion, so I'll skip that one. Instead I'm focusing on a genuine new issue: a double border seam at the bottom of the provider list, since the footer's top border combines with the last row's bottom border in a way that the "last child, no border" rule never catches because the footer, not a row, is actually the last element. I want to trace through the DOM structure to confirm this before writing it up as a small, concrete inline comment. I'm also poking at whether the spacing utilities on the Advanced Collapsible section might be stacking margins unexpectedly, checking how the space-y utility and an explicit margin-top class interact and which one wins based on specificity. Still tracing space-y specificity... the margin math checks out to 12px gap without conflict. I'm also checking that the readOnly/advancedVisible interaction is fine since inert blocks clicks anyway, and confirming the CollapsibleTrigger uses raw Base UI markup rather than the Button component. Now I'm wondering about focus visibility on the Advanced trigger button β€” since it lacks an explicit focus-visible ring class, I need to check whether index.css defines a global focus-visible style that would cover it.

29. git_tools β€” focus-visible

πŸ’­ I want to check the global focus-visible reset in index.cssβ€”if outlines are stripped app-wide for interactive elements, the new Advanced CollapsibleTrigger button would lack any visible focus indicator, which is a real keyboard-accessibility regression introduced by this change.

30. browse_code β€” apps/web/src/index.css

πŸ’­ I realize outline-color still applies even though the shorthand only sets color, since browsers keep the default outline style/width and just recolor it β€” so the focus ring remains visible. No issue here after all. The only concrete finding so far is the doubled border seam, which feels minor enough that I hesitate to fail the check over it, though it does expose that a last:border-b-0 rule isn't doing anything. Before deciding, I want to check the responsive layout more closely β€” how the grid collapses below lg and whether the left column's border classes behave sensibly in that stacked state. Checking whether the settings panel is rendered inside a narrower container, like a modal, where the fixed-width sidebar plus editor could feel cramped, but it looks like the same width="expanded" pattern used elsewhere so that seems fine. I also want to verify accessibility isn't regressing β€” the old collapsed row used a heading element for the provider name, while the new list row uses plain spans, though the editor pane still keeps its heading, so that seems like an acceptable tradeoff. Now I'm checking that the list mode button's nested code and span elements don't violate HTML nesting rules β€” a block-level code element inside a span inside a button should still be valid. I'm also confirming the editor header structure is fine, that the Switch component likely has a proper focus ring, and that the deviceTabs node isn't accidentally rendered in two mutually exclusive branches. Then I start tracing into how AccessGatedProviderSettings behaves when access is editable or read-only. The bigger concern now is that the health-check interval row, previously always visible, is now wrapped in a Collapsible whose content unmounts when closed by default β€” meaning settings search could fail to jump to it if that row lacks a searchable id. I need to check whether that SettingsRow actually has a searchable setting spread applied to it.

31. browse_code β€” In apps/web/src/components/settings, how does settings search work (searchableSetting, settings search index/catalog)? Is there a search entry for the provider "Health check interval" setting or provider health refresh interval that navigates to a DOM id/hash inside ProviderSettingsPanel? List the catalog entries related to providers and how the target element id is resolved.

πŸ’­ No regression there overall, so the head commit looks reasonably clean aside from the double-border seam. I'm checking whether padding is consistent between the device tab strip, settings gutter, and the new bordered card, since rows carry their own horizontal padding to align with the section title but the card itself may lack a gutter. The card has no horizontal margin, so it sits full-bleed relative to the section title and "Add provider" button, breaking the previous settings gutter alignment. I want to compare this against how DiagnosticsSettings lays out its bordered cards with an "expanded" width to see if that's the established pattern or a genuine regression.

32. browse_code β€” apps/web/src/components/settings/DiagnosticsSettings.tsx

πŸ’­ Full-bleed section content already has precedent elsewhere, so that's not a real finding. The doubled divider seam is the only remaining concrete but marginal item, so I want to do one more pass over the ProviderSettingsPanel rows/selectedRow logic and check whether the ProviderLastChecked styling was actually meant for the header rather than the footer.

33. browse_code β€” apps/web/src/components/settings/ProviderSettingsPanel.tsx

34. browse_code β€” apps/web/src/components/settings/ProviderSettingsPanel.tsx

πŸ’­ I'm noticing that when ProviderLastChecked returns null, the readOnly footer ends up rendering as an empty bordered strip rather than hiding gracefully, and in the non-readOnly case the refresh button positioning also gets affected since it used to sit next to the "last checked" text in the header layout. After weighing this against the earlier findings, I don't think it rises to a strong regression β€” the doubled divider and duplicated underline-tab logic are both minor and already noted. Digging a bit more, I notice the list rows use one border opacity token while surrounding chrome uses a different one, so there's inconsistent divider opacity within the same card, which compounds with the double-border issue already flagged. I also checked keyboard ordering, hover opacity behavior on disabled rows, and status/summary fallback logic for disabled providers β€” all consistent with prior behavior, no new issues surfacing there. Now I'm weighing whether to flag the 1px border seam as a finding or return "All clear." Since it's a genuine but minor visual artifact and the check's guidance says findings shouldn't be marked "All clear" but also shouldn't be overstated as failure, I'm leaning toward reporting it neutrally as a small cosmetic note rather than a blocking issue. Actually, the tab treatment duplication is worth revisiting β€” the check explicitly calls out repeated durable geometry across call sites as a case for a named primitive, and here there are three copies of the same 14-utility tab styling plus a fourth existing tab strip using a segmented ToggleGroup elsewhere. That's ownership drift, not aesthetic nitpicking, so I think one consolidated comment on it is defensible even though the author seemingly made this choice twice already. Let me check whether the PR description or commit messages mention deliberately not extracting this, so I can see if there's context in the commits since the last review.

35. git_tools β€” a6797b3..34c7511

πŸ’­ The author has been quick to address each comment I raise, so this last fix was just the scrollbar issue. Since the remaining items are minor, I'll focus my next comment on the doubled divider and dead last:border-b-0, and probably still flag the tab duplication since it's directly covered by the check's rules and hasn't actually been resolved yet. Weighing the two remaining issues, I think it's better to post just the seam comment since it's a concrete, easily fixable visual defect, while the tab-ownership concern was already raised and declined. On the status question, I'm leaning toward "neutral" rather than "failure" since this is a single cosmetic nit rather than a clear regression risk, even though the check's guidance defaults toward failure when findings exist. Before posting, I want to verify the doubled-border claim by looking closer at the left column's border classes. Confirmed: the last row isn't the actual last child since the footer follows it, so the row's bottom border renders right against the footer's top border, creating a visible double rule. The simplest fix is removing the border-top from the footer elementβ€”I need to check whether that's safe when the rows list is empty, but since the header above still has its own bottom border, removing the footer's top border won't leave any section without a dividing line. Considering whether dropping the footer's border-t is truly the best fix versus adjusting the row border β€” removing border-t keeps the lighter row-divider rhythm intact, though it slightly changes the separator's alpha compared to the header. I'll go with suggesting the removal and note the alternative briefly in the comment. I'll settle on a neutral final state with a title and summary, then post the review.

36. modify_pr β€” Reviewed the provider settings rework for shared-primitive and Tailwind-ownership consistency. The concerns raised on earlier pushes look addressed: the tab strips now use aria-pressed (no half-implemented role="tab" contract) plus cursor-pointer and a focus-visible ring, the Advanced disclosure is back on the shared Collapsible/CollapsibleTrigger/CollapsibleContent primitives, the refresh action regained its Tooltip, the "Add provider" button uses the named compact size, the device strip hides its scrollbar with the same arbitrary-utility pattern already used by BrowserDeviceToolbar/PullRequestDetailPanel, and ConnectionStatusDot renders a span (no nested button) with the status wording surfaced via the wrapping tooltip. One small layout artifact left, noted inline.


Agent Credits: 436 credits