Skip to content

Code: Matched GitHub's sidebar layout and hover states - #96

Merged
whereareiam merged 1 commit into
devfrom
fix/repo-home-sidebar
Oct 22, 2026
Merged

whereareiam merged 1 commit into
devfrom
fix/repo-home-sidebar

Conversation

@whereareiam

@whereareiam whereareiam commented Oct 22, 2026 •

Copy link
Copy Markdown
Owner

What changes

The repository Code tab sidebar now matches GitHub's, measured on github.com at the same 1280px width, including hover states.

Area Before After (GitHub)
Website link Grey Accent blue, underline on hover
Topics 24px pills, 4px apart 26px pills (12px semibold, 2px 12px), 2px/8px gaps, solid blue on hover
About gear Near-white, grey background on hover Muted, turns blue on hover with no background
Metadata README and size rows, "2 Stars / 2 Watchers / 0 Forks", 26px rows No README or size rows, Forgejo's plural "2 stars / 2 watchers / 0 forks", 8px between 21px rows
Releases Counter at the far right, "+ N releases" link Counter beside the heading, no extra link, Latest badge with the success border
Packages Empty state with 2px between its lines; "Publish your first package" for everyone No gap between the lines; the first step only for people who can publish packages
Languages Visible heading, 1px segment gaps, 16px legend gaps Visually hidden heading, 2px gaps and 3px radius, 8px dots, 12px legend gaps
Spacing 8px flex gaps plus margins Divider, 16px, heading, 12px, content, as on GitHub

Contributors and the license, contributing and code of conduct rows are not added: Forgejo exposes no data for them on this page.

Before and after

Dark mode, 1280px wide, acme/webapp in the dev preview.

Before After
Repository sidebar before Repository sidebar after

Checks

  • bun vitest: 406 tests pass (one source assertion updated to the new legend values); tsc -b and Prettier pass.
  • Compared element positions, fonts and colours with GitHub's sidebar at 1280px, and hover states of the website link, topics, gear, metadata rows and section headings.
  • Checked mobile (390px) and light mode in the dev preview.
  • bun lint could not run locally: the installed typescript-eslint does not support TypeScript 7.

🤖 Generated with Claude Code

@whereareiam whereareiam added bug Fixes a bug that shipped in a release change Changed look, templates or compatibility and removed bug Fixes a bug that shipped in a release labels Oct 22, 2026
Measured against github.com at the same width:

- About: 12px between description, website and topics, 8px between
  metadata rows; the website link is accent blue and underlines on hover;
  topic pills are 26px tall with 2px/8px gaps; the gear is muted and turns
  blue on hover without a background.
- Metadata: "N stars / N watchers / N forks" from Forgejo's plural
  strings; the README and repository size rows are gone, as on GitHub.
- Releases: the counter sits beside the heading, the Latest badge uses the
  success border, and the "+ N releases" link is dropped.
- Packages: the empty state keeps its two lines without a gap, and the
  "Publish your first package" step is only offered to people who can
  publish, as on GitHub.
- Languages: the heading is visually hidden, the bar has 2px-separated
  segments with a 3px radius, and the legend uses 8px dots and 12px gaps.
- Sections share GitHub's rhythm: divider, 16px, heading, 12px, content.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@whereareiam
whereareiam force-pushed the fix/repo-home-sidebar branch from 5744047 to 5eb088b Compare October 22, 2026 16:16
@whereareiam
whereareiam merged commit 33402f6 into dev Oct 22, 2026
14 checks passed
@whereareiam
whereareiam deleted the fix/repo-home-sidebar branch October 22, 2026 16:52
@whereareiam whereareiam changed the title Repository: Match GitHub's Code tab sidebar layout and hover states Code: Matched GitHub's sidebar layout and hover states Oct 23, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

change Changed look, templates or compatibility

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant