fix: system tools UI spacing, Forgejo icon, and form organization #5

Open
crashmedia wants to merge 3 commits from fix/system-tools-ui-spacing into main
Owner

Summary

Three UI fixes for the system tools admin panel:

1. CSS: Setting Item & Form Spacing (admin.css)

The setting-item, settings-list, setting-card, and setting-row classes had no CSS definitions despite being used extensively across all system tools tabs. This caused forms to render with zero spacing between fields, making them dense and hard to read.

Added styles for:

  • .settings-list — vertical flex container with 16px gap between items
  • .setting-item — horizontal row layout with glass background, border, padding, and hover state
  • .setting-info — label area with proper title/description spacing
  • .setting-card / .setting-card-inner / .setting-card-label — Settings tab card pattern
  • .setting-row — side-by-side layout for paired settings
  • .settings-form — form-level spacing for labels, hints, and groups
  • .content-card — card wrapper with header/body styling (used in settings.php)
  • .setting-toggle-item — horizontal toggle with label and description
  • .global-settings-content — flex column layout with gap
  • .form-actions — proper action bar with border-top separator
  • Mobile responsive overrides for all patterns

2. Forgejo Icon Fix (admin_system_tools.php)

Problem: fas fa-git-alt renders as an X in a box in Font Awesome 6.5.1 because fa-git-alt is a brand icon that requires the fab prefix, not fas (solid). In FA6, the solid set does not include brand icons.

Fix: Replaced fa-git-alt with fa-code-branch (available in FA6 free solid set). This generic source-control icon is appropriate for the Forgejo update system and renders correctly.

Changed 2 occurrences (System Updates card header and version status display).

3. Form Organization

All form sections now have consistent visual hierarchy:

  • Glass-surface backgrounds for setting items
  • Proper border-radius matching the Aurora design system
  • Consistent padding and margin using CSS custom properties
  • Hover states for interactive feedback
  • Responsive stacking on mobile viewports
## Summary Three UI fixes for the system tools admin panel: ### 1. CSS: Setting Item & Form Spacing (admin.css) The `setting-item`, `settings-list`, `setting-card`, and `setting-row` classes had **no CSS definitions** despite being used extensively across all system tools tabs. This caused forms to render with zero spacing between fields, making them dense and hard to read. **Added styles for:** - `.settings-list` — vertical flex container with 16px gap between items - `.setting-item` — horizontal row layout with glass background, border, padding, and hover state - `.setting-info` — label area with proper title/description spacing - `.setting-card` / `.setting-card-inner` / `.setting-card-label` — Settings tab card pattern - `.setting-row` — side-by-side layout for paired settings - `.settings-form` — form-level spacing for labels, hints, and groups - `.content-card` — card wrapper with header/body styling (used in settings.php) - `.setting-toggle-item` — horizontal toggle with label and description - `.global-settings-content` — flex column layout with gap - `.form-actions` — proper action bar with border-top separator - Mobile responsive overrides for all patterns ### 2. Forgejo Icon Fix (admin_system_tools.php) **Problem:** `fas fa-git-alt` renders as an X in a box in Font Awesome 6.5.1 because `fa-git-alt` is a **brand icon** that requires the `fab` prefix, not `fas` (solid). In FA6, the solid set does not include brand icons. **Fix:** Replaced `fa-git-alt` with `fa-code-branch` (available in FA6 free solid set). This generic source-control icon is appropriate for the Forgejo update system and renders correctly. Changed 2 occurrences (System Updates card header and version status display). ### 3. Form Organization All form sections now have consistent visual hierarchy: - Glass-surface backgrounds for setting items - Proper border-radius matching the Aurora design system - Consistent padding and margin using CSS custom properties - Hover states for interactive feedback - Responsive stacking on mobile viewports
This pull request has changes conflicting with the target branch.
  • views/admin_system_tools.php
View command line instructions

Manual merge helper

Use this merge commit message when completing the merge manually.

Checkout

From your project repository, check out a new branch and test the changes.
git fetch -u origin fix/system-tools-ui-spacing:fix/system-tools-ui-spacing
git switch fix/system-tools-ui-spacing

Merge

Merge the changes and update on Forgejo.

Warning: The "Autodetect manual merge" setting is not enabled for this repository, you will have to mark this pull request as manually merged afterwards.

git switch main
git merge --no-ff fix/system-tools-ui-spacing
git switch fix/system-tools-ui-spacing
git rebase main
git switch main
git merge --ff-only fix/system-tools-ui-spacing
git switch fix/system-tools-ui-spacing
git rebase main
git switch main
git merge --no-ff fix/system-tools-ui-spacing
git switch main
git merge --squash fix/system-tools-ui-spacing
git switch main
git merge --ff-only fix/system-tools-ui-spacing
git switch main
git merge fix/system-tools-ui-spacing
git push origin main
Sign in to join this conversation.
No reviewers
No labels
No milestone
No project
No assignees
1 participant
Notifications
Due date
The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference
crashmedia/Arctic-Wolves-Production!5
No description provided.