forgejo_admin/pal-e-api

Fork 1

feat: responsive nav, mobile breakpoints, CSS cleanup, pre-commit config #48

Merged

forgejo_admin merged 3 commits from 47-template-css-overhaul-pre-commit-hook-re into main

2026-02-27 16:24:40 +00:00

forgejo_admin commented

2026-02-27 09:20:56 +00:00

Owner

Summary

Restructure nav and add @media mobile breakpoint so all pages render correctly at 375px
Move all inline styles in nav, landing doc lists, and login form to proper CSS classes
Add .pre-commit-config.yaml with ruff format + ruff check to prevent recurring CI failures from unformatted agent code

Changes

base.html: Nav inline styles moved to CSS classes (.nav-auth, .user-email, .logout-btn, .login-link). @media (max-width: 600px) breakpoint — brand on own row, auth on own row right-aligned, reduced main padding/margin, card-grid single column, h1 size reduced.
landing.html: Tags wrapped in <div class="tag-row"> below titles. Section header inline styles moved to .section-header class.
login.html: All inline styles replaced with CSS classes (.login-form, .login-field, .login-label, .login-input, .login-submit, .login-message, .login-error).
.pre-commit-config.yaml: ruff-format + ruff check hooks, rev v0.9.7.

Test Plan

151 tests pass locally
All 5 playwright mobile tests pass at 375px viewport
ruff format and ruff check clean
No regressions in mermaid rendering, lightbox, auto-linked slugs

Review Checklist

Passed automated review-fix loop
No secrets committed
No unnecessary file changes
Commit messages are descriptive

issue-pal-e-docs-template-css-overhaul — the issue this PR addresses
plan-2026-02-27-responsive-design-mobile-ux — Phase 2

## Summary - Restructure nav and add `@media` mobile breakpoint so all pages render correctly at 375px - Move all inline styles in nav, landing doc lists, and login form to proper CSS classes - Add `.pre-commit-config.yaml` with ruff format + ruff check to prevent recurring CI failures from unformatted agent code ## Changes - `base.html`: Nav inline styles moved to CSS classes (`.nav-auth`, `.user-email`, `.logout-btn`, `.login-link`). `@media (max-width: 600px)` breakpoint — brand on own row, auth on own row right-aligned, reduced main padding/margin, card-grid single column, h1 size reduced. - `landing.html`: Tags wrapped in `<div class="tag-row">` below titles. Section header inline styles moved to `.section-header` class. - `login.html`: All inline styles replaced with CSS classes (`.login-form`, `.login-field`, `.login-label`, `.login-input`, `.login-submit`, `.login-message`, `.login-error`). - `.pre-commit-config.yaml`: ruff-format + ruff check hooks, rev v0.9.7. ## Test Plan - [x] 151 tests pass locally - [x] All 5 playwright mobile tests pass at 375px viewport - [x] `ruff format` and `ruff check` clean - [ ] No regressions in mermaid rendering, lightbox, auto-linked slugs ## Review Checklist - [ ] Passed automated review-fix loop - [ ] No secrets committed - [ ] No unnecessary file changes - [ ] Commit messages are descriptive ## Related Notes - `issue-pal-e-docs-template-css-overhaul` — the issue this PR addresses - `plan-2026-02-27-responsive-design-mobile-ux` — Phase 2

forgejo_admin added 1 commit

2026-02-27 09:20:56 +00:00

feat: responsive nav, mobile breakpoints, CSS cleanup, pre-commit config

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

3ba25108ac

- Move all inline styles from nav HTML to proper CSS classes (.nav-auth,
  .user-email, .logout-btn, .login-link)
- Add @media (max-width: 600px) breakpoint: brand on own row, nav links
  wrap below, auth right-aligned, reduced main padding/margin,
  single-column card grid, smaller h1
- landing.html: tags on their own line via .tag-row div, section headers
  use .section-header class instead of inline styles
- login.html: all inline styles moved to CSS classes (.login-form,
  .login-field, .login-label, .login-input, .login-submit, etc.)
- Add .pre-commit-config.yaml with ruff-format and ruff hooks (v0.9.7)

All 151 tests pass including 5 playwright mobile viewport tests.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

forgejo_admin commented

2026-02-27 09:22:57 +00:00

Author

Owner

PR Review — Round 1

BLOCKING

Remaining inline style in landing.html — Line <p class="meta" style="margin-top: 0.75rem;"> (the "View all repos" link) still has an inline style attribute. The whole point of this PR is to move inline styles to CSS classes. This one was partially addressed (the class="meta" was added) but the style="margin-top: 0.75rem;" was left in place. Should be a CSS class (e.g., .view-all-link { margin-top: 0.75rem; }) or absorbed into an existing class.
Pre-commit ruff version is severely outdated — .pre-commit-config.yaml pins rev: v0.9.7, but the locally installed ruff is 0.15.2, pyproject.toml requires >=0.8, and the current latest ruff release is v0.15.3. Version 0.9.7 is from mid-2025. While it should still pass since the project doesn't use any bleeding-edge ruff features, having the pre-commit hook run a wildly different ruff version than CI (which uses whatever pip install .[dev] resolves — currently 0.15.x) creates a situation where pre-commit passes locally but CI fails, or vice versa. The rev should be updated to match what CI actually uses — at minimum v0.14.0 or ideally v0.15.2. The whole point of this pre-commit config is to prevent CI failures from unformatted code; a version mismatch undermines that goal.

SUGGESTION

Nav mobile breakpoint: nav links wrap into the auth row — At 600px, .brand gets flex-basis: 100% (own row) and .nav-auth gets flex-basis: 100% (own row). But the 4 nav links (Home, Projects, Repos, Tags) are regular <a> elements without any wrapping container or flex-basis override. They will flow between the brand and auth rows as individual flex items, controlled only by flex-wrap: wrap and gap: 0.4rem 1rem. This probably works at 375px because the 4 links fit on one line (~200px total), but it's fragile — if link text changes or a link is added, the layout could break unexpectedly. Consider wrapping the nav links in a <span class="nav-links"> with its own flex-basis: 100% in the mobile breakpoint for explicit control over the 3-row layout (brand / links / auth).
login-input missing box-sizing: border-box — The .login-input class sets width: 100% and padding: 0.5rem. Without box-sizing: border-box, the input would overflow its container. This is currently saved by the universal * { box-sizing: border-box; } reset at the top of the stylesheet. This is fine, but worth noting that the login form relies on this reset — if anyone ever removes it, the login form breaks. No change needed, just documenting the dependency.
card-grid desktop: minmax(280px, 1fr) at exactly 375px — The mobile breakpoint overrides to grid-template-columns: 1fr, which is correct. But between 375px and 600px (the breakpoint), minmax(280px, 1fr) means a single column anyway because 280px + 1rem gap + 280px = 561px exceeds the available width of ~373px (375px - 2*0.75rem padding). So the override is redundant in practice between 375–600px, but it's still good to have as an explicit declaration. No change needed.
<div class="tag-row"> in landing.html but not in tag_notes.html / project_notes.html — The PR adds <div class="tag-row"> wrappers around tags in the landing page doc lists, but tag_notes.html and project_notes.html both have bare <div> wrappers around their tag loops (line 10-13 in both). For consistency, these should use class="tag-row" too. This isn't a mobile layout bug (the bare <div> works fine), but it's inconsistent — the same visual pattern should use the same class name.

NIT

CSS class naming: .login-* prefix vs .nav-auth scoping — The nav auth styles use BEM-like scoping (.nav-auth .user-email, .nav-auth .logout-btn), while the login form uses flat prefixed classes (.login-form, .login-field, .login-label). Both approaches work, but they're inconsistent within the same stylesheet. Not worth changing now, but worth noting for future CSS additions.
No font-family or box-sizing on .login-input / .login-submit — Form elements don't inherit font-family by default in many browsers. The submit button and input might render in a browser default font instead of Atkinson Hyperlegible. Adding font-family: inherit to form elements is a common best practice. Again, minor since it may already work depending on browser.

Summary

The CSS restructuring is well-executed. The inline styles were correctly extracted to semantic classes. The @media breakpoint at 600px is a reasonable choice for mobile, the flex-wrap approach for the nav is clever, and the flex-basis: 100% trick to force line breaks is the right technique. Login form cleanup is thorough. The tag-row and section-header classes are good abstractions.

The two blocking issues are:

One missed inline style in landing.html — a straightforward oversight.
The pre-commit ruff version is ~6 months behind the CI ruff version, which defeats the purpose of adding pre-commit in the first place.

Verdict

CHANGES REQUESTED

## PR Review — Round 1 ### BLOCKING - [ ] **Remaining inline style in `landing.html`** — Line `<p class="meta" style="margin-top: 0.75rem;">` (the "View all repos" link) still has an inline `style` attribute. The whole point of this PR is to move inline styles to CSS classes. This one was partially addressed (the `class="meta"` was added) but the `style="margin-top: 0.75rem;"` was left in place. Should be a CSS class (e.g., `.view-all-link { margin-top: 0.75rem; }`) or absorbed into an existing class. - [ ] **Pre-commit ruff version is severely outdated** — `.pre-commit-config.yaml` pins `rev: v0.9.7`, but the locally installed ruff is `0.15.2`, pyproject.toml requires `>=0.8`, and the current latest ruff release is `v0.15.3`. Version `0.9.7` is from mid-2025. While it should still pass since the project doesn't use any bleeding-edge ruff features, having the pre-commit hook run a wildly different ruff version than CI (which uses whatever `pip install .[dev]` resolves — currently `0.15.x`) creates a situation where pre-commit passes locally but CI fails, or vice versa. The rev should be updated to match what CI actually uses — at minimum `v0.14.0` or ideally `v0.15.2`. The whole point of this pre-commit config is to prevent CI failures from unformatted code; a version mismatch undermines that goal. ### SUGGESTION - [ ] **Nav mobile breakpoint: nav links wrap into the auth row** — At 600px, `.brand` gets `flex-basis: 100%` (own row) and `.nav-auth` gets `flex-basis: 100%` (own row). But the 4 nav links (Home, Projects, Repos, Tags) are regular `<a>` elements without any wrapping container or `flex-basis` override. They will flow between the brand and auth rows as individual flex items, controlled only by `flex-wrap: wrap` and `gap: 0.4rem 1rem`. This *probably* works at 375px because the 4 links fit on one line (~200px total), but it's fragile — if link text changes or a link is added, the layout could break unexpectedly. Consider wrapping the nav links in a `<span class="nav-links">` with its own `flex-basis: 100%` in the mobile breakpoint for explicit control over the 3-row layout (brand / links / auth). - [ ] **`login-input` missing `box-sizing: border-box`** — The `.login-input` class sets `width: 100%` and `padding: 0.5rem`. Without `box-sizing: border-box`, the input would overflow its container. This is currently saved by the universal `* { box-sizing: border-box; }` reset at the top of the stylesheet. This is fine, but worth noting that the login form relies on this reset — if anyone ever removes it, the login form breaks. No change needed, just documenting the dependency. - [ ] **`card-grid` desktop: `minmax(280px, 1fr)` at exactly 375px** — The mobile breakpoint overrides to `grid-template-columns: 1fr`, which is correct. But between 375px and 600px (the breakpoint), `minmax(280px, 1fr)` means a single column anyway because `280px + 1rem gap + 280px = 561px` exceeds the available width of ~373px (375px - 2*0.75rem padding). So the override is redundant in practice between 375–600px, but it's still good to have as an explicit declaration. No change needed. - [ ] **`<div class="tag-row">` in `landing.html` but not in `tag_notes.html` / `project_notes.html`** — The PR adds `<div class="tag-row">` wrappers around tags in the landing page doc lists, but `tag_notes.html` and `project_notes.html` both have bare `<div>` wrappers around their tag loops (line 10-13 in both). For consistency, these should use `class="tag-row"` too. This isn't a mobile layout bug (the bare `<div>` works fine), but it's inconsistent — the same visual pattern should use the same class name. ### NIT - [ ] **CSS class naming: `.login-*` prefix vs `.nav-auth` scoping** — The nav auth styles use BEM-like scoping (`.nav-auth .user-email`, `.nav-auth .logout-btn`), while the login form uses flat prefixed classes (`.login-form`, `.login-field`, `.login-label`). Both approaches work, but they're inconsistent within the same stylesheet. Not worth changing now, but worth noting for future CSS additions. - [ ] **No `font-family` or `box-sizing` on `.login-input` / `.login-submit`** — Form elements don't inherit `font-family` by default in many browsers. The submit button and input might render in a browser default font instead of Atkinson Hyperlegible. Adding `font-family: inherit` to form elements is a common best practice. Again, minor since it may already work depending on browser. ### Summary The CSS restructuring is well-executed. The inline styles were correctly extracted to semantic classes. The `@media` breakpoint at 600px is a reasonable choice for mobile, the `flex-wrap` approach for the nav is clever, and the `flex-basis: 100%` trick to force line breaks is the right technique. Login form cleanup is thorough. The `tag-row` and `section-header` classes are good abstractions. The two blocking issues are: 1. One missed inline style in `landing.html` — a straightforward oversight. 2. The pre-commit ruff version is ~6 months behind the CI ruff version, which defeats the purpose of adding pre-commit in the first place. ### Verdict **CHANGES REQUESTED**

forgejo_admin referenced this pull request from a commit

2026-02-27 09:27:30 +00:00

fix: address PR #48 review findings

forgejo_admin added 1 commit

2026-02-27 09:27:30 +00:00

fix: address PR #48 review findings

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

2609dcfc79

- Move inline style to .view-all-link CSS class (landing.html line 86)
- Update ruff pre-commit rev from v0.9.7 to v0.15.2 to match installed version
- Wrap nav links in <span class="nav-links"> with flex layout + mobile breakpoint
- Add class="tag-row" to tag_notes.html and project_notes.html for consistency
- Add form font inheritance rule (input, button, select, textarea)

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

forgejo_admin commented

2026-02-27 09:30:23 +00:00

Author

Owner

PR Review — Round 2

Round 1 Fixes Verified

Inline style removed from landing.html "View all repos" link — Changed from style="margin-top: 0.75rem;" to class="meta view-all-link" with corresponding .view-all-link CSS class. Clean fix.
Pre-commit ruff version updated — Changed from v0.9.7 to v0.15.2, which exactly matches the installed ruff version (pip show ruff → 0.15.2). No version mismatch.
Nav links wrapped in container element — Nav links are now in <span class="nav-links"> with flex-basis: 100% in the mobile breakpoint. Explicit 3-row layout (brand / links / auth) on mobile.
tag-row class consistent across tag_notes.html and project_notes.html — Both now use <div class="tag-row"> instead of bare <div>.
Form font inheritance rule added — input, button, select, textarea { font-family: inherit; } added at the top of the stylesheet, right after the universal reset. This fixes the cross-browser form font issue.
CSS naming consistency — Round 1 NIT, not changed (appropriate for a NIT).

All 5 actionable round 1 findings are resolved.

BLOCKING

None.

SUGGESTION

note.html tag wrapper missing tag-row class — The round 1 review flagged tag_notes.html and project_notes.html for using bare <div> wrappers around tags — both were fixed to <div class="tag-row">. However, note.html (the individual note detail page) has the same pattern on line 11: <div> with no class wrapping {% for tag in note.tags %}. For consistency, this should also be <div class="tag-row">. The .tag-row class currently only adds margin-top: 0.2rem which is a subtle change, but using the same class for the same visual pattern across all templates is the right practice.

NIT

.nav-links gap not reduced on mobile — The @media (max-width: 600px) breakpoint reduces nav gap to 0.4rem 1rem, but .nav-links keeps its own gap: 1.5rem from the base rule. At 375px this still fits fine (~242px of content in ~351px available width), so it's not a layout bug. But the mobile gap between nav section links is wider than the gap between the brand row and the links row, which is a minor visual inconsistency. Consider adding .nav-links { gap: 1rem; } inside the breakpoint if the spacing looks uneven in visual QA.

Overall Assessment

This is a well-executed PR. The CSS restructuring is clean and thorough:

Zero inline styles remain across all 9 template files (verified each one).
Semantic class names are used consistently (.nav-auth, .nav-links, .section-header, .tag-row, .view-all-link, .login-*).
Mobile breakpoint logic is correct: flex-wrap: wrap on nav + flex-basis: 100% on each group forces the 3-row stacked layout. card-grid drops to 1fr. main padding is reduced. h1 size is reduced.
No regressions to mermaid/lightbox/auto-links/table-scroll — the mermaid SVG rules (max-width: 100%), lightbox overlay, auto-link styles, and .table-scroll wrapper are all untouched.
Pre-commit config is correctly pinned to v0.15.2 matching CI.
Form font inheritance properly handles the cross-browser font-family gap.

The one suggestion (adding tag-row to note.html) is a minor consistency fix that could be done now or deferred to Phase 3 visual QA. It does not affect mobile layout.

Verdict

APPROVE — with the suggestion to add class="tag-row" to note.html tag wrapper as a follow-up or quick fix before merge.

## PR Review — Round 2 ### Round 1 Fixes Verified - [x] **Inline style removed from landing.html "View all repos" link** — Changed from `style="margin-top: 0.75rem;"` to `class="meta view-all-link"` with corresponding `.view-all-link` CSS class. Clean fix. - [x] **Pre-commit ruff version updated** — Changed from `v0.9.7` to `v0.15.2`, which exactly matches the installed ruff version (`pip show ruff` → `0.15.2`). No version mismatch. - [x] **Nav links wrapped in container element** — Nav links are now in `<span class="nav-links">` with `flex-basis: 100%` in the mobile breakpoint. Explicit 3-row layout (brand / links / auth) on mobile. - [x] **tag-row class consistent across tag_notes.html and project_notes.html** — Both now use `<div class="tag-row">` instead of bare `<div>`. - [x] **Form font inheritance rule added** — `input, button, select, textarea { font-family: inherit; }` added at the top of the stylesheet, right after the universal reset. This fixes the cross-browser form font issue. - [x] **CSS naming consistency** — Round 1 NIT, not changed (appropriate for a NIT). All 5 actionable round 1 findings are resolved. ### BLOCKING None. ### SUGGESTION - [ ] **`note.html` tag wrapper missing `tag-row` class** — The round 1 review flagged `tag_notes.html` and `project_notes.html` for using bare `<div>` wrappers around tags — both were fixed to `<div class="tag-row">`. However, `note.html` (the individual note detail page) has the same pattern on line 11: `<div>` with no class wrapping `{% for tag in note.tags %}`. For consistency, this should also be `<div class="tag-row">`. The `.tag-row` class currently only adds `margin-top: 0.2rem` which is a subtle change, but using the same class for the same visual pattern across all templates is the right practice. ### NIT - [ ] **`.nav-links` gap not reduced on mobile** — The `@media (max-width: 600px)` breakpoint reduces `nav` gap to `0.4rem 1rem`, but `.nav-links` keeps its own `gap: 1.5rem` from the base rule. At 375px this still fits fine (~242px of content in ~351px available width), so it's not a layout bug. But the mobile gap between nav section links is wider than the gap between the brand row and the links row, which is a minor visual inconsistency. Consider adding `.nav-links { gap: 1rem; }` inside the breakpoint if the spacing looks uneven in visual QA. ### Overall Assessment This is a well-executed PR. The CSS restructuring is clean and thorough: - **Zero inline styles remain** across all 9 template files (verified each one). - **Semantic class names** are used consistently (`.nav-auth`, `.nav-links`, `.section-header`, `.tag-row`, `.view-all-link`, `.login-*`). - **Mobile breakpoint logic is correct**: `flex-wrap: wrap` on `nav` + `flex-basis: 100%` on each group forces the 3-row stacked layout. `card-grid` drops to `1fr`. `main` padding is reduced. `h1` size is reduced. - **No regressions to mermaid/lightbox/auto-links/table-scroll** — the mermaid SVG rules (`max-width: 100%`), lightbox overlay, auto-link styles, and `.table-scroll` wrapper are all untouched. - **Pre-commit config is correctly pinned** to `v0.15.2` matching CI. - **Form font inheritance** properly handles the cross-browser `font-family` gap. The one suggestion (adding `tag-row` to `note.html`) is a minor consistency fix that could be done now or deferred to Phase 3 visual QA. It does not affect mobile layout. ### Verdict **APPROVE** — with the suggestion to add `class="tag-row"` to `note.html` tag wrapper as a follow-up or quick fix before merge.

forgejo_admin added 1 commit

2026-02-27 15:56:15 +00:00

fix: tag-row class on note.html + nav-links gap on mobile

ci/woodpecker/pr/woodpecker Pipeline was successful

Details

5d16c2945a

- Add class="tag-row" to the tag wrapper div in note.html for
  consistency with all other templates.
- Wrap nav links in a .nav-links span with flex gap: 1.5rem desktop,
  0.75rem on mobile breakpoint for proportional spacing.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

forgejo_admin commented

2026-02-27 15:58:14 +00:00

Author

Owner

PR Review — Round 3

Prior Fixes Verified

Round 1 findings:

Inline style= removed from landing.html "View all repos" link — now uses .view-all-link class
Ruff pre-commit version updated from v0.9.7 to v0.15.2 (matches installed version)
Nav links wrapped in <span class="nav-links"> with flex layout + mobile flex-basis: 100% breakpoint
class="tag-row" added to tag_notes.html and project_notes.html for consistency
font-family: inherit rule added for input, button, select, textarea

Round 2 findings:

note.html tag container changed from bare <div> to <div class="tag-row"> for consistency
.nav-links gap reduced from 1.5rem to 0.75rem inside mobile breakpoint

Full Template Audit — Inline Styles

Checked all 9 templates on the branch for any remaining style= attributes:

base.html — clean
landing.html — clean
login.html — clean
note.html — clean
tag_notes.html — clean
project_notes.html — clean
projects.html — clean (was already clean, no changes in this PR)
repos.html — clean (was already clean, no changes in this PR)
tags.html — clean (was already clean, no changes in this PR)

Pattern Consistency Audit

tag-row class used consistently in all 5 locations: note.html, tag_notes.html, project_notes.html, and 4 doc-list sections in landing.html
section-header class used for all 4 doc category headings in landing.html (SOPs, Architecture, Conventions, Templates)
Nav structure consistent: .brand -> .nav-links -> .nav-auth with flex-wrap: wrap parent
Login form classes follow consistent naming pattern (login-form, login-field, login-label, login-input, login-submit, login-message, login-error)

Mobile Breakpoint Analysis

@media (max-width: 600px) breakpoint — each nav section gets flex-basis: 100% for stacking. Brand row, links row, auth row. Correct flexbox pattern.
<span> elements used for .nav-links and .nav-auth — valid since they become flex items in display: flex parent (nav), making flex-basis work correctly
main padding reduced to 0.75rem — prevents horizontal overflow at 375px
.card-grid goes single-column — prevents overflow from minmax(280px, 1fr) on narrow screens
h1 reduced to 1.4rem — appropriate for mobile

Regression Check

.section svg and .note-content svg selectors still present for mermaid lightbox click targets
Landing page mermaid diagram inside .section div — lightbox JS still works
.table-scroll wrapper CSS unchanged — table horizontal scroll preserved
pre.mermaid styling unchanged — no regressions
Auto-link .auto-link CSS unchanged — no regressions
sanitized_content | safe rendering path unchanged in note.html

Pre-commit Config

ruff-format and ruff hooks configured
Pinned to v0.15.2 — matches locally installed version

BLOCKING

None.

SUGGESTION

None.

NIT

Ruff pre-commit version is 2 patches behind — v0.15.2 in config vs v0.15.4 latest. Not urgent since v0.15.2 matches the installed version, but worth bumping whenever convenient.

Verdict

APPROVE — All prior round findings are fixed. Zero inline styles across all 9 templates. CSS patterns are consistent. Mobile breakpoint layout is correct. No regressions in mermaid, lightbox, auto-links, or table scroll. Pre-commit config is properly configured. This PR is clean and ready to merge.

## PR Review — Round 3 ### Prior Fixes Verified **Round 1 findings:** - [x] Inline `style=` removed from landing.html "View all repos" link — now uses `.view-all-link` class - [x] Ruff pre-commit version updated from v0.9.7 to v0.15.2 (matches installed version) - [x] Nav links wrapped in `<span class="nav-links">` with flex layout + mobile `flex-basis: 100%` breakpoint - [x] `class="tag-row"` added to `tag_notes.html` and `project_notes.html` for consistency - [x] `font-family: inherit` rule added for `input, button, select, textarea` **Round 2 findings:** - [x] `note.html` tag container changed from bare `<div>` to `<div class="tag-row">` for consistency - [x] `.nav-links` gap reduced from 1.5rem to 0.75rem inside mobile breakpoint ### Full Template Audit — Inline Styles Checked all 9 templates on the branch for any remaining `style=` attributes: - [x] `base.html` — clean - [x] `landing.html` — clean - [x] `login.html` — clean - [x] `note.html` — clean - [x] `tag_notes.html` — clean - [x] `project_notes.html` — clean - [x] `projects.html` — clean (was already clean, no changes in this PR) - [x] `repos.html` — clean (was already clean, no changes in this PR) - [x] `tags.html` — clean (was already clean, no changes in this PR) ### Pattern Consistency Audit - [x] `tag-row` class used consistently in all 5 locations: `note.html`, `tag_notes.html`, `project_notes.html`, and 4 doc-list sections in `landing.html` - [x] `section-header` class used for all 4 doc category headings in `landing.html` (SOPs, Architecture, Conventions, Templates) - [x] Nav structure consistent: `.brand` -> `.nav-links` -> `.nav-auth` with `flex-wrap: wrap` parent - [x] Login form classes follow consistent naming pattern (`login-form`, `login-field`, `login-label`, `login-input`, `login-submit`, `login-message`, `login-error`) ### Mobile Breakpoint Analysis - [x] `@media (max-width: 600px)` breakpoint — each nav section gets `flex-basis: 100%` for stacking. Brand row, links row, auth row. Correct flexbox pattern. - [x] `<span>` elements used for `.nav-links` and `.nav-auth` — valid since they become flex items in `display: flex` parent (nav), making `flex-basis` work correctly - [x] `main` padding reduced to `0.75rem` — prevents horizontal overflow at 375px - [x] `.card-grid` goes single-column — prevents overflow from `minmax(280px, 1fr)` on narrow screens - [x] `h1` reduced to `1.4rem` — appropriate for mobile ### Regression Check - [x] `.section svg` and `.note-content svg` selectors still present for mermaid lightbox click targets - [x] Landing page mermaid diagram inside `.section` div — lightbox JS still works - [x] `.table-scroll` wrapper CSS unchanged — table horizontal scroll preserved - [x] `pre.mermaid` styling unchanged — no regressions - [x] Auto-link `.auto-link` CSS unchanged — no regressions - [x] `sanitized_content | safe` rendering path unchanged in `note.html` ### Pre-commit Config - [x] `ruff-format` and `ruff` hooks configured - [x] Pinned to `v0.15.2` — matches locally installed version ### BLOCKING None. ### SUGGESTION None. ### NIT 1. **Ruff pre-commit version is 2 patches behind** — `v0.15.2` in config vs `v0.15.4` latest. Not urgent since v0.15.2 matches the installed version, but worth bumping whenever convenient. ### Verdict **APPROVE** — All prior round findings are fixed. Zero inline styles across all 9 templates. CSS patterns are consistent. Mobile breakpoint layout is correct. No regressions in mermaid, lightbox, auto-links, or table scroll. Pre-commit config is properly configured. This PR is clean and ready to merge.

forgejo_admin merged commit adbdd67fd3 into main

2026-02-27 16:24:40 +00:00

forgejo_admin deleted branch 47-template-css-overhaul-pre-commit-hook-re

2026-02-27 16:24:40 +00:00

forgejo_admin referenced this pull request from a commit

2026-02-27 16:24:41 +00:00

feat: responsive nav, mobile breakpoints, CSS cleanup, pre-commit config (#48)

forgejo_admin referenced this pull request

2026-02-27 19:06:23 +00:00

Review fixes: tag-row CSS, tests, repos sort order (#51) #53