[whereareiam]

What changes

All settings areas (repository, personal, organization and site administration) now share GitHub's settings layout. I compared them against GitHub's repository, personal and organization settings at 1316 and 375px. One shared component, components/common/settings, does this. Each area's layout marks its container with .theme-settings; Forgejo's own menu and form markup stays underneath, so collapsible groups and forms keep working.

Layout and navigation

Area	Before	After (GitHub)
Nav	Text-only menu with a "Settings" title	An icon per page, group labels (Access, Code and automation, Security, Integrations), GitHub's blue bar beside the current page, collapsible groups with the chevron on the right; 256px wide, 40px from the page
Repository settings	Repository heading with Watch, Fork and Star above	Only the tabs, as on GitHub
Personal and site administration	"User settings" / "Admin settings" menu title	GitHub's context header above the nav: avatar with name and login and a Profile button, or the site administration icon
Sections	Every section in a bordered box	GitHub's subhead (24px over a border) with forms flat beneath it; lists and tables keep a box
Lists	Whole sections boxed, descriptions and empty messages inside list rows, add forms in separate boxes	GitHub's Box: content rows draw the box, Forgejo's description rows become flat paragraphs above it, tables are boxed alone, add forms sit flat below in one row
Empty lists	Bare text ("There are no secrets yet.") or a row in the box	GitHub's empty state, a shared component: bordered box, centred 16px semibold title
Mirror settings, tag protection, indexers	Text flush to a box, forms inside table rows, nested boxes	Description, then the list or empty state, then the form; indexers as box rows with the action on the right
Danger zone	Grey box with inset row separators	Red-bordered box with full-width rows and 32px danger buttons; account and organization deletion stay flat under the red heading with a danger flash
Collaborators	Two boxed lists with search forms in their footers	GitHub's page: the repository's visibility with a "Manage visibility" link, a "Direct access" summary, "Manage access" with people and teams as box rows or empty states with an icon, and "Add collaborator" / "Add team" dialogs
Profile and organization profile	Avatar form below the profile form	Two columns: the form on the left, the 200px picture with its upload on the right (one column on phones)
Emails	A list inside a box, the add form in a second box	Emails as box rows; "Add email address" input with its button beside it
SSH and GPG keys, hidden comment types	No empty state; checkboxes above their titles	"There are no SSH/GPG keys associated with your account." empty states; checkboxes in the gutter beside their titles

Controls

Control	Before	After (GitHub)
Labels	Regular weight, or beside the field	14px semibold on their own line, 6px above the control
Inputs	35px, 8px padding, full width	440×32, 5px 12px padding, GitHub's inset shadow and accent focus ring
Select	38px	32px on the button surface with a caret
Checkboxes and radios	A field label beside a checkbox ("Template" then "Make repository a template"), 14px boxes with a 6px radius, radio choices in a row	GitHub's design: the browser's 13px box in a 20px gutter, a semibold title beside it, the note beneath; a field label in front of a checkbox becomes the title and the checkbox's label its note (Units: "Issues" over "Enable repository issue tracker"); radio groups list one choice per line. Template and Visibility use a shared checkbox component with Forgejo's descriptions as notes
Notes	Mixed sizes, sometimes beside the field	12px muted, under the control
Buttons	34–36px, weight 400; primary buttons grey in settings	32px, weight 500; green primary buttons as on GitHub ("Update profile")

Shared components: components/common/settings (layout and form styles, context header, checkbox, empty state). Empty states use Forgejo's own strings in collaborators, protected branches and tags, deploy keys, secrets, variables, runners, blocked users, push mirrors, package cleanup rules and authorized integrations. The shared webhook list (repository, organization, personal, site administration) becomes a description with box rows.

Forgejo's checkbox and radio markup is kept, because its scripts rely on it (units toggling their sub-options, for example). The new look comes from CSS grid placement; only repository Template and Visibility are re-templated.

Forgejo writes fields in three ways: .field with a label beside the control, a label wrapping the control in a fieldset, or such a label straight in the form. All three get the same look. The org-only settings rules in organization.css that duplicated this are removed. The group labels are in English because Forgejo has no strings for them.

Before and after

Dark mode, in the dev preview.

Repository settings: before	after

Personal settings: before	after

Organization settings: before	after

Site administration: before	after

Branches: before	after

Tag protection: before	after

Collaborators: before	after

Account: before	after

SSH and GPG keys: before	after

Checks

• bun run bundle and bunx vitest run (406 tests) pass; Prettier is clean.
• bun run lint fails on dev too, because typescript-eslint does not support the installed TypeScript 7.
• Checked in the preview:
  • Repository: general (mirrors, signing, administrator settings, danger zone), units, collaborators, branches, tags, webhooks (with a hook, including its delete dialog), deploy keys, Actions runners, secrets and variables.
  • Personal: profile, account, appearance, security, SSH/GPG keys, applications, authorized integrations, organizations, repositories, packages, blocked users.
  • Organization: options, webhooks, labels, applications, repositories, runners, delete.
  • Site administration: dashboard, users, user edit, organizations, authentication sources, webhooks, configuration, cron tasks, notices.
  • Phone width (375px): fields go full width, the nav sits above the page, no sideways scroll.

Preview: http://localhost:3000/acme/webapp/settings

🤖 Generated with Claude Code