Skip to content

feat(frontend): compact board and review spacing#3078

Merged
Pulkit7070 merged 1 commit into
AgentWrapper:mainfrom
Hardik180704:feat/compact-ui-spacing
Jul 24, 2026
Merged

feat(frontend): compact board and review spacing#3078
Pulkit7070 merged 1 commit into
AgentWrapper:mainfrom
Hardik180704:feat/compact-ui-spacing

Conversation

@Hardik180704

Copy link
Copy Markdown
Collaborator

Closes #2882

Hey @Pulkit7070 and @codebanditssss, this tightens up the spacing across the board and review surfaces without changing their behavior.

What changed:

  • made board headers and session cards more compact
  • reduced spacing in the Summary and Reviews panels
  • tightened the files toolbar, file rows, and diff container
  • switched inspector tabs to accessible icon-only controls on narrow rails so they do not overflow
  • added focused spacing assertions to the existing component tests

Checked with:

  • npm run typecheck
  • npm run typecheck:e2e
  • npx vitest run — 1,038 tests passed
  • CI=true npm run test:e2e:renderer — 20 tests passed
  • Prettier and git diff --check
  • visual checks at normal and narrow desktop widths
  • Electron desktop launch

@Pulkit7070 Pulkit7070 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Reviewed. This is a clean, behavior-preserving spacing pass and it is the right PR for #2882 (that issue is still open; nothing else has done this work).

What I checked:

  • The changes are padding/gap/height class reductions only (h-13 to h-11, py-2 to py-1, gap-3 to gap-2, px-4 to px-3, min-h-11 to min-h-10, diff min-height 220 to 180, and a single tokens.css value). No logic or DOM-structure changes, so behavior is unaffected.
  • The icon-only inspector tabs on narrow rails are done accessibly: the label span is hidden with @max-[350px]/inspector:hidden, but you added aria-label and title on the button, so the accessible name is preserved when the text is not shown. That is the correct pattern for icon-only controls.
  • CI is green here (test, format, scan, renderer-smoke), which now includes the typecheck gate on main, so the full vitest suite and typecheck pass.

One coordination note, not a defect. This touches surfaces that other open PRs also edit, so expect merge conflicts depending on order:

  • SessionInspector.tsx and SessionInspector.test.tsx also change in #3053 (two-section Reviews tab). That is the highest-overlap one, since both restructure the inspector tabs/Reviews area. Whichever lands second will need a rebase.
  • SessionsBoard.tsx overlaps #2997 (scrollbars) and tokens.css is touched by a few PRs.

No behavioral issues found. The spacing values themselves are a visual judgment call best confirmed at normal and narrow widths, which the description says was done.

@Hardik180704

Copy link
Copy Markdown
Collaborator Author

Visual verification for #2882 — compact board cards after the spacing pass. Statuses, titles, branches, and PR details remain visible while the cards use less vertical space.

Compact AO board layout after the #2882 spacing pass

@Pulkit7070 Pulkit7070 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Approving. Behavior-preserving spacing changes only, the icon-only inspector tabs keep their accessible name via aria-label and title, and CI is green including the typecheck gate on main. Note that this and #3053 both edit SessionInspector.tsx, so whichever merges second will need a rebase.

@Pulkit7070
Pulkit7070 merged commit 83580e2 into AgentWrapper:main Jul 24, 2026
4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Audit and tighten excess padding in AO UI surfaces

2 participants