[PR #151] [MERGED] fix: UI layout and icon fixes (description widths, GitHub icon, mobile collection header) #150

New issue

Closed

opened 2026-09-02 07:34:54 +02:00 by zaph0d · 0 comments

zaph0d commented

2026-09-02 07:34:54 +02:00

Owner

📋 Pull Request Information

Original PR: https://github.com/niels-emmer/myace/pull/151
Author: @niels-emmer
Created: 9/1/2026
Status: ✅ Merged
Merged: 9/1/2026
Merged by: @niels-emmer

Base: main ← Head: fix/ui-layout-and-icons

📝 Commits (3)

e2b82ac fix: match page description width to content rows below
72b1d87 fix: restore GitHub icon after lucide-react brand-icon removal
92fc4b9 fix: mobile collection detail header layout

📊 Changes

10 files changed (+37 additions, -19 deletions)

View changed files

➕ frontend/src/components/GithubIcon.tsx (+15 -0)
📝 frontend/src/components/SectionHub.tsx (+1 -1)
📝 frontend/src/pages/CollectionDetail.tsx (+2 -2)
📝 frontend/src/pages/CollectionsManager.tsx (+3 -3)
📝 frontend/src/pages/CommunityCollectionDetail.tsx (+2 -2)
📝 frontend/src/pages/Dashboard.tsx (+1 -1)
📝 frontend/src/pages/ImportPage.tsx (+2 -2)
📝 frontend/src/pages/Landing.tsx (+4 -3)
📝 frontend/src/pages/Login.tsx (+4 -3)
📝 frontend/src/pages/UserSettings.tsx (+3 -2)

📄 Description

Summary

Three frontend UI fixes:

Description width on desktop — the hero/hub/dashboard descriptions were capped at max-w-3xl/max-w-2xl while the content rows below span the full container, leaving descriptions at roughly half width on desktop. Removed the constraints so they match the rows below (Landing, Dashboard, and the four hub pages via SectionHub). Mobile unaffected.
GitHub icon restoration — the dependabot lucide-react bump (1.33+) removed all brand icons including Github, which broke the frontend build (tsc) and crashed Landing/Login at runtime. Added a local GithubIcon SVG component matching lucide's className sizing API and swapped it into the 5 affected pages.
Mobile collection detail header — on mobile the header action buttons overflowed the screen and squeezed the collection description into a narrow column. The header now wraps so the button row sits below the back-arrow + metadata line, full-width and left-aligned, with buttons wrapping to additional rows when needed. Desktop layout unchanged. Applies to both My Collections (CollectionDetail) and Community Collections (CommunityCollectionDetail).

Type of change

fix (bug fix)

Testing

tsc -b: passes
npm run lint: 0 errors
npm run test: 106/106 pass (21 files) — includes the previously-failing Landing.test.tsx
docker compose build frontend: passes (was blocked by the icon issue)
Manually verified on the dev server (Vite + backend) at desktop and mobile widths

Checklist

Self-review completed
No new warnings
Tests pass
Documentation updated (if needed) — N/A, UI-only changes
Breaking changes called out in commit footer — none

_{🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.}

## 📋 Pull Request Information **Original PR:** https://github.com/niels-emmer/myace/pull/151 **Author:** [@niels-emmer](https://github.com/niels-emmer) **Created:** 9/1/2026 **Status:** ✅ Merged **Merged:** 9/1/2026 **Merged by:** [@niels-emmer](https://github.com/niels-emmer) **Base:** `main` ← **Head:** `fix/ui-layout-and-icons` --- ### 📝 Commits (3) - [`e2b82ac`](https://github.com/niels-emmer/myace/commit/e2b82ac8a713a279680ea6a0315bf479f590ecd1) fix: match page description width to content rows below - [`72b1d87`](https://github.com/niels-emmer/myace/commit/72b1d878208c0cdfc3efaa698e859a7550088cb1) fix: restore GitHub icon after lucide-react brand-icon removal - [`92fc4b9`](https://github.com/niels-emmer/myace/commit/92fc4b97506ccafb897d7c770e5ffda3573c96b1) fix: mobile collection detail header layout ### 📊 Changes **10 files changed** (+37 additions, -19 deletions) <details> <summary>View changed files</summary> ➕ `frontend/src/components/GithubIcon.tsx` (+15 -0) 📝 `frontend/src/components/SectionHub.tsx` (+1 -1) 📝 `frontend/src/pages/CollectionDetail.tsx` (+2 -2) 📝 `frontend/src/pages/CollectionsManager.tsx` (+3 -3) 📝 `frontend/src/pages/CommunityCollectionDetail.tsx` (+2 -2) 📝 `frontend/src/pages/Dashboard.tsx` (+1 -1) 📝 `frontend/src/pages/ImportPage.tsx` (+2 -2) 📝 `frontend/src/pages/Landing.tsx` (+4 -3) 📝 `frontend/src/pages/Login.tsx` (+4 -3) 📝 `frontend/src/pages/UserSettings.tsx` (+3 -2) </details> ### 📄 Description ## Summary Three frontend UI fixes: 1. **Description width on desktop** — the hero/hub/dashboard descriptions were capped at `max-w-3xl`/`max-w-2xl` while the content rows below span the full container, leaving descriptions at roughly half width on desktop. Removed the constraints so they match the rows below (Landing, Dashboard, and the four hub pages via `SectionHub`). Mobile unaffected. 2. **GitHub icon restoration** — the dependabot lucide-react bump (1.33+) removed all brand icons including `Github`, which broke the frontend build (`tsc`) and crashed Landing/Login at runtime. Added a local `GithubIcon` SVG component matching lucide's `className` sizing API and swapped it into the 5 affected pages. 3. **Mobile collection detail header** — on mobile the header action buttons overflowed the screen and squeezed the collection description into a narrow column. The header now wraps so the button row sits below the back-arrow + metadata line, full-width and left-aligned, with buttons wrapping to additional rows when needed. Desktop layout unchanged. Applies to both My Collections (`CollectionDetail`) and Community Collections (`CommunityCollectionDetail`). ## Type of change - [x] fix (bug fix) ## Testing - `tsc -b`: passes - `npm run lint`: 0 errors - `npm run test`: 106/106 pass (21 files) — includes the previously-failing `Landing.test.tsx` - `docker compose build frontend`: passes (was blocked by the icon issue) - Manually verified on the dev server (Vite + backend) at desktop and mobile widths ## Checklist - [x] Self-review completed - [x] No new warnings - [x] Tests pass - [x] Documentation updated (if needed) — N/A, UI-only changes - [x] Breaking changes called out in commit footer — none --- <sub>🔄 This issue represents a GitHub Pull Request. It cannot be merged through Gitea due to API limitations.</sub>

zaph0d

2026-09-02 07:34:54 +02:00