Skip to content

Code: Matched GitHub's branch row and README box - #98

Merged
whereareiam merged 1 commit into
devfrom
feat/code-page-github
Oct 22, 2026
Merged

whereareiam merged 1 commit into
devfrom
feat/code-page-github

Conversation

@whereareiam

@whereareiam whereareiam commented Oct 22, 2026 •

Copy link
Copy Markdown
Owner

Stacked on #97; review that first. This PR only contains the Code page changes.

What changes

The Code page's own controls now match GitHub, signed in, measured from 1280 down to 400px.

Area Before After (GitHub)
Branches and Tags Weight 400, no border Weight 500 with a semibold count and an invisible 1px border, so the icons line up with GitHub's
Code button "Code" label beside Add file, 14px caret Only the icon and a 16px caret beside Add file (49px); the label stays when there is no Add file
README box header One "README.md" tab and the edit pencil Underline tabs for README and, at the root, Code of conduct, Contributing, License and Security when those files exist; an outline menu listing the README's headings

Narrower screens

Width GitHub, and now this theme
1280px and up Full Add file button
Below 1280px Add file becomes a 34px "+"
Below 1080px The branch and tag counts go
Below 1012px Go to file becomes an 87px button
Below 544px Go to file and Add file move into the "…" menu (before: below 768px); the README box reaches the screen edges

The community-file tabs open the file instead of switching the box in place, because Forgejo does not render those files on this page. "Contributing", "Code of conduct" and "Security" are English (Forgejo has no strings for them); "README" and "License" are Forgejo's. "Branches/Tags" keep Forgejo's lowercase wording, which is translated.

The outline menu uses the shared dropdown; its items come from the rendered README's headings when it first opens, since Forgejo has no outline data.

Before and after

Dark mode, in the dev preview: the branch row and the README box header.

1280px: before after
Code page before Code page after
600px: before after
Branch row at 600px before Branch row at 600px after

Checks

  • bun vitest: 406 tests pass; tsc -b and Prettier pass.
  • Compared with GitHub at 1280, 1200, 1100, 1050, 1012, 900, 768, 600 and 400px; the outline links jump to the headings.
  • bun lint could not run locally: the installed typescript-eslint does not support TypeScript 7.

🤖 Generated with Claude Code

@whereareiam whereareiam added the change Changed look, templates or compatibility label Oct 22, 2026
@whereareiam
whereareiam changed the base branch from feat/repo-header-github to dev October 22, 2026 17:20
Measured against github.com (signed in) from 1280 down to 400px:

- Branches and Tags links: weight 500 with a 600 count, a 21px line and
  an invisible 1px border, so their icons sit where GitHub's do.
- The Code button collapses to its icon and caret (49px) beside Add file,
  with a 16px caret.
- The row narrows in GitHub's steps: Add file becomes a 34px "+" below
  1280px, the branch and tag counts go below 1080px, Go to file becomes
  an 87px button below 1012px, and both move into the "…" menu below
  544px instead of 768px.
- README box header: underline tabs for the README (Forgejo's "README")
  and, at the repository root, its code of conduct, contributing guide,
  license and security policy, which open the file; an outline menu
  (the shared dropdown) lists the rendered README's headings by level.
  Below 544px the README box reaches the screen edges.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
@whereareiam
whereareiam force-pushed the feat/code-page-github branch from 643d02d to a6bb3b6 Compare October 22, 2026 17:21
@whereareiam
whereareiam merged commit e83005b into dev Oct 22, 2026
7 checks passed
@whereareiam
whereareiam deleted the feat/code-page-github branch October 22, 2026 17:22
@whereareiam whereareiam changed the title Repository: Match GitHub's branch row and README box on the Code page Code: Matched GitHub's branch row and README box 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