fix: center signin and register page logos #164

Merged

forgejo_admin merged 1 commit from 163-fix-logo-centering into main

2026-03-28 23:03:30 +00:00

forgejo_admin commented

2026-03-28 22:59:08 +00:00

Owner

Summary

Signin and register page logos were left-aligned because the global img { display: block } rule makes text-align: center on the parent ineffective. Added margin: 0 auto for proper block-element centering on both .signin-logo and .reg-logo.

Changes

src/app.css — .signin-logo: changed margin-bottom: 1rem to margin: 0 auto 1rem
src/app.css — .reg-logo: added display: block; margin: 0 auto 1rem replacing margin-bottom: 1rem

Test Plan

Visit /signin — logo should be horizontally centered within the header
Visit /register — logo should be horizontally centered within the header
Verify at mobile (375px) and desktop (1280px) viewports

Review Checklist

CSS-only change, no HTML modifications
Both logo classes updated consistently
No regressions to other img elements (scoped to .signin-logo and .reg-logo)

None

Closes #163

## Summary Signin and register page logos were left-aligned because the global `img { display: block }` rule makes `text-align: center` on the parent ineffective. Added `margin: 0 auto` for proper block-element centering on both `.signin-logo` and `.reg-logo`. ## Changes - `src/app.css` — `.signin-logo`: changed `margin-bottom: 1rem` to `margin: 0 auto 1rem` - `src/app.css` — `.reg-logo`: added `display: block; margin: 0 auto 1rem` replacing `margin-bottom: 1rem` ## Test Plan - Visit `/signin` — logo should be horizontally centered within the header - Visit `/register` — logo should be horizontally centered within the header - Verify at mobile (375px) and desktop (1280px) viewports ## Review Checklist - [x] CSS-only change, no HTML modifications - [x] Both logo classes updated consistently - [x] No regressions to other img elements (scoped to `.signin-logo` and `.reg-logo`) ## Related Notes - None ## Related Closes #163

forgejo_admin added 1 commit

2026-03-28 22:59:08 +00:00

fix: center signin and register page logos

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

a260252faa

Both logos were left-aligned because global img{display:block} makes
text-align:center ineffective. Added margin:0 auto for proper block
element centering, matching playground prototype.

Closes #163

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>

forgejo_admin commented

2026-03-28 23:02:05 +00:00

Author

Owner

PR #164 Review

DOMAIN REVIEW

Tech stack: SvelteKit / CSS (pure CSS, no Tailwind)

Fix correctness: The global img { display: block } rule (line 96 of app.css) makes text-align: center on parent containers ineffective for centering images. The margin: 0 auto approach is the correct CSS technique for centering block-level elements. Both .reg-logo and .signin-logo now use margin: 0 auto 1rem which replaces the previous margin-bottom: 1rem while adding horizontal auto-centering.

Scope: Single file changed (src/app.css), +3/-2 lines. Both logo classes updated. No HTML changes needed -- this is purely a CSS fix.

Consistency note: .reg-logo gets an explicit display: block declaration while .signin-logo does not. This is fine -- the global img rule already applies display: block to all images, so both will center correctly. The explicit declaration on .reg-logo is redundant but makes the centering intent self-documenting at the component level.

BLOCKERS

None.

NITS

Redundant display: block on .reg-logo: The global img { display: block } (line 96) already applies this. The .signin-logo change does not add it, creating a minor inconsistency between the two classes. Either both should have the explicit display: block (for self-documentation) or neither should (since the global rule covers it). Not blocking -- the rendered behavior is identical either way.

SOP COMPLIANCE

Branch named after issue (163-fix-logo-centering references issue #163)
PR body follows template (Summary, Changes, Test Plan, Related)
Related references issue (Closes #163)
No secrets committed
No scope creep (single CSS file, two targeted class changes)
Commit message is descriptive

PROCESS OBSERVATIONS

Clean, minimal fix. Low change failure risk -- CSS-only, scoped to two classes, no logic changes. No deployment frequency impact. Visual validation per the test plan (signin + register pages at mobile and desktop viewports) is the appropriate verification method for this type of change.

VERDICT: APPROVED

## PR #164 Review ### DOMAIN REVIEW **Tech stack**: SvelteKit / CSS (pure CSS, no Tailwind) **Fix correctness**: The global `img { display: block }` rule (line 96 of `app.css`) makes `text-align: center` on parent containers ineffective for centering images. The `margin: 0 auto` approach is the correct CSS technique for centering block-level elements. Both `.reg-logo` and `.signin-logo` now use `margin: 0 auto 1rem` which replaces the previous `margin-bottom: 1rem` while adding horizontal auto-centering. **Scope**: Single file changed (`src/app.css`), +3/-2 lines. Both logo classes updated. No HTML changes needed -- this is purely a CSS fix. **Consistency note**: `.reg-logo` gets an explicit `display: block` declaration while `.signin-logo` does not. This is fine -- the global `img` rule already applies `display: block` to all images, so both will center correctly. The explicit declaration on `.reg-logo` is redundant but makes the centering intent self-documenting at the component level. ### BLOCKERS None. ### NITS 1. **Redundant `display: block` on `.reg-logo`**: The global `img { display: block }` (line 96) already applies this. The `.signin-logo` change does not add it, creating a minor inconsistency between the two classes. Either both should have the explicit `display: block` (for self-documentation) or neither should (since the global rule covers it). Not blocking -- the rendered behavior is identical either way. ### SOP COMPLIANCE - [x] Branch named after issue (`163-fix-logo-centering` references issue #163) - [x] PR body follows template (Summary, Changes, Test Plan, Related) - [x] Related references issue (`Closes #163`) - [x] No secrets committed - [x] No scope creep (single CSS file, two targeted class changes) - [x] Commit message is descriptive ### PROCESS OBSERVATIONS Clean, minimal fix. Low change failure risk -- CSS-only, scoped to two classes, no logic changes. No deployment frequency impact. Visual validation per the test plan (signin + register pages at mobile and desktop viewports) is the appropriate verification method for this type of change. ### VERDICT: APPROVED