Repository navigation
Controls: Share button sizing and the select across pages - #66
Merged
Merged
Conversation
Profile, project and package pages restated the 32px button box in their page stylesheets, and the package filters carried the theme's only styled select as profile-specific rules. Those buttons now use theme-control, with a theme-control-wide variant for the 16px padding GitHub keeps on profile pages, and the select moves to components/common/select as theme-select. Page stylesheets keep only layout. The contributing guide states when to use native button classes, theme-control and theme-icon-button, and a test keeps template selects on the shared one. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
whereareiam
added
the
change
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Stacked on #65 (the two touch adjacent lines in three templates). Review the second commit only; once #65 merges this retargets to
dev.Profile, project and package pages restated the standard 32px button box in their page stylesheets, and the package filters carried the theme's only styled select as profile-specific rules.
Changes
button theme-control. A newtheme-control-widegives the 16px inline padding GitHub keeps on profile pages; the default stays 12px, which GitHub uses on its organization repository list. Their page rules shrink to layout (flex,box-shadow).profile-selectbecomescomponents/common/select(theme-selectinsidetheme-select-wrap), loaded with the other shared controls. The mobile full-width behaviour stays in the profile stylesheet as layout.CONTRIBUTING.mdnow says when to use Forgejo's nativeui buttonclasses (anything Forgejo already renders),theme-control(buttons the theme adds) andtheme-icon-button(icon-only). A test keeps every template<select>on the shared one.Left alone on purpose: rules that size buttons rendered by Forgejo's own markup (profile avatar card actions, the Actions run header, natively rendered project controls). Those buttons are not in theme templates, so a class cannot be added to them.
Visual result
Intended to be unchanged. Computed size, position, padding, typography, border, background and colour of every affected button and select were compared before and after in the dev preview at 1440px and 390px across profile repositories, stars, projects, packages, package versions, organization overview, organization repositories and Actions: 27 of 28 measurements are identical. The one difference is the profile "New repository" button, 1px wider (155px to 156px) from the shared control's 8px icon gap.
Reference values from github.com: 32px buttons use 5px 16px on profile pages and 0 12px on the organization repository list; small buttons are 28px.
Checks
bun commitpasses (386 tests on top of Search: Use one shared field across pages #65).http://localhost:3000, Forgejo 16.0.3), with a generic package uploaded locally so the package pages render their filters: search, select and submit share one 32px row on desktop, and wrap without horizontal overflow at 390px.🤖 Generated with Claude Code