feat: hide author name on mobile footer and add contact links#4160
Conversation
…l page Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Codecov Report✅ All modified and coverable lines are covered by tests. 📢 Thoughts on this report? Let us know! |
There was a problem hiding this comment.
Pull request overview
This PR improves frontend responsiveness by hiding the author name link in the footer on smaller viewports and adds additional contact links to the Legal page. It also updates the agentic workflow docs/specs to capture the change context.
Changes:
- Hide the “markus neusinger” footer link on smaller screens via responsive
displaystyling. - Add LinkedIn, X, and personal GitHub links (with analytics tracking) to the Legal page Contact section.
- Add/extend agentic spec/context docs and register the new context doc in
agentic/commands/context.md.
Reviewed changes
Copilot reviewed 5 out of 5 changed files in this pull request and generated 5 comments.
Show a summary per file
| File | Description |
|---|---|
| app/src/pages/LegalPage.tsx | Adds external contact links (LinkedIn/X/GitHub) in the Contact section with click tracking. |
| app/src/components/Footer.tsx | Wraps the author link + separators in a responsive container to hide on smaller viewports. |
| agentic/specs/260207-footer-responsive-hide-name-add-contact-links.md | Adds a feature spec documenting the intended responsive behavior and Legal page updates. |
| agentic/context/260207-footer-responsive-hide-name-add-contact-links.md | Adds a context doc describing what was implemented and how to validate it. |
| agentic/commands/context.md | Registers the new context doc with conditions for when to read it. |
| markus neusinger | ||
| </Link> | ||
| <span>·</span> | ||
| <Box component="span" sx={{ display: { xs: 'none', md: 'contents' } }}> |
There was a problem hiding this comment.
Breakpoint docs/PR text mention <768px / 960px, but this code uses MUI's md breakpoint. The theme in app/src/main.tsx does not override breakpoints, so md will be the default (900px). Please align the intended cutoff (update copy/specs or adjust theme/breakpoint used here) so the hide/show behavior matches the stated requirement.
| ## Metadata | ||
|
|
||
| run_id: `d7e7bdf6` | ||
| prompt: `im footer mein name markus neusinger ist recht lang bei kleinen bildschrimen mobile... sieht das nichtmehr gut, minimal aus, ich möchte das ab der grösse bei der auch auf der startseite die filter zeile mit catolog... steht in 2 zeilen übergeht das mein name nichtmehr im footer zu sehen ist, dafür soll aber im legal tab bei contact links zu meinem linkedin x und github account sein zusätlich zu der email die schon da steht https://x.com/MarkusNeusinger https://github.com/MarkusNeusinger https://www.linkedin.com/in/markus-neusinger/` |
There was a problem hiding this comment.
The prompt: metadata value is written in German (and includes several typos). Other agentic specs in this repo are in English; consider translating this field (or storing the original separately) to keep agentic documentation consistently English and easier to search/maintain.
| prompt: `im footer mein name markus neusinger ist recht lang bei kleinen bildschrimen mobile... sieht das nichtmehr gut, minimal aus, ich möchte das ab der grösse bei der auch auf der startseite die filter zeile mit catolog... steht in 2 zeilen übergeht das mein name nichtmehr im footer zu sehen ist, dafür soll aber im legal tab bei contact links zu meinem linkedin x und github account sein zusätlich zu der email die schon da steht https://x.com/MarkusNeusinger https://github.com/MarkusNeusinger https://www.linkedin.com/in/markus-neusinger/` | |
| prompt: `In the footer, my full name "markus neusinger" is quite long and on small mobile screens it no longer looks clean or minimal. Starting at the same breakpoint where the filter row on the homepage ("catalog" / filters) wraps to two lines, I want my name to no longer be shown in the footer. Instead, in the Legal page Contact section there should be links to my LinkedIn, X, and GitHub accounts in addition to the existing email: https://x.com/MarkusNeusinger https://github.com/MarkusNeusinger https://www.linkedin.com/in/markus-neusinger/.` |
| 1. **Footer**: Hide the "markus neusinger" link on small screens (below `md` / 960px breakpoint) — the same breakpoint where the FilterBar catalog/filter row wraps to 2 lines on the homepage. The name is too long and makes the footer look cramped on mobile. The dot separator before/after the name link should also be hidden. | ||
|
|
||
| 2. **Legal Page**: Add social/contact links (LinkedIn, X/Twitter, GitHub) to the Contact section in the Legal Notice, alongside the existing email. This ensures the contact information remains discoverable even when the footer name link is hidden on mobile. | ||
|
|
||
| ## Requirements | ||
|
|
||
| - Hide the "markus neusinger" link (and its surrounding dot separators) in the footer when viewport width is below `md` (960px) — matching the FilterBar's `isMobile` breakpoint | ||
| - On viewports `md` and above (960px+), the footer remains unchanged |
There was a problem hiding this comment.
This spec repeatedly states md is a 960px breakpoint, but the app theme does not override MUI breakpoints (so md defaults to 900px). Please correct the pixel values (or document the actual source of 960px if breakpoints are customized elsewhere) to avoid implementing/testing against the wrong cutoff.
| 1. **Footer**: Hide the "markus neusinger" link on small screens (below `md` / 960px breakpoint) — the same breakpoint where the FilterBar catalog/filter row wraps to 2 lines on the homepage. The name is too long and makes the footer look cramped on mobile. The dot separator before/after the name link should also be hidden. | |
| 2. **Legal Page**: Add social/contact links (LinkedIn, X/Twitter, GitHub) to the Contact section in the Legal Notice, alongside the existing email. This ensures the contact information remains discoverable even when the footer name link is hidden on mobile. | |
| ## Requirements | |
| - Hide the "markus neusinger" link (and its surrounding dot separators) in the footer when viewport width is below `md` (960px) — matching the FilterBar's `isMobile` breakpoint | |
| - On viewports `md` and above (960px+), the footer remains unchanged | |
| 1. **Footer**: Hide the "markus neusinger" link on small screens (below `md` / 900px breakpoint) — the same breakpoint where the FilterBar catalog/filter row wraps to 2 lines on the homepage. The name is too long and makes the footer look cramped on mobile. The dot separator before/after the name link should also be hidden. | |
| 2. **Legal Page**: Add social/contact links (LinkedIn, X/Twitter, GitHub) to the Contact section in the Legal Notice, alongside the existing email. This ensures the contact information remains discoverable even when the footer name link is hidden on mobile. | |
| ## Requirements | |
| - Hide the "markus neusinger" link (and its surrounding dot separators) in the footer when viewport width is below `md` (900px) — matching the FilterBar's `isMobile` breakpoint | |
| - On viewports `md` and above (900px+), the footer remains unchanged |
| No configuration needed. The `md` breakpoint (960px) is defined by the MUI theme and matches the FilterBar's mobile breakpoint. | ||
|
|
There was a problem hiding this comment.
This context doc claims md is 960px and is defined by the MUI theme. The current theme configuration does not override breakpoints, so md defaults to 900px. Please update these statements so future work/tests use the correct responsive cutoff (or update the theme if 960px is intended).
| markus neusinger | ||
| </Link> | ||
| <span>·</span> | ||
| </Box> |
There was a problem hiding this comment.
On viewports below md, this wrapper hides both dot separators around the LinkedIn/name link, which also removes the separator between stats and mcp. On mobile this will render as github · stats mcp · legal (missing the middle dot). Keep a separator between stats and mcp when the name section is hidden (e.g., add a dot that shows on xs/sm and hides on md+ where the name section provides the separators).
| </Box> | |
| </Box> | |
| <Box component="span" sx={{ display: { xs: 'inline', md: 'none' } }}>·</Box> |
- Move author name span for better alignment - Ensure contact links are properly displayed
…pt to English Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
MarkusNeusinger
deleted the
feat/footer-responsive-hide-name-add-contact-links
branch
| <Box component="span" sx={{ display: { xs: 'none', md: 'contents' } }}> | ||
| <span>·</span> | ||
| <Link |
There was a problem hiding this comment.
The PR description/test plan mentions hiding the footer name on mobile viewports "< 768px", but the implementation hides it below MUI md (900px) via display: { xs: 'none', md: 'contents' }. Please align the requirement and implementation (either update the PR description/test plan to 900px, or change the breakpoint logic to match 768px).
| - agentic/context/260207-footer-responsive-hide-name-add-contact-links.md | ||
| - Conditions: | ||
| - When working with the Footer component responsive behavior | ||
| - When modifying contact or social links in the Legal page | ||
| - When adjusting mobile breakpoint visibility of footer elements |
There was a problem hiding this comment.
agentic/commands/context.md is a general “conditional documentation” guide; adding a single run-specific context file path here doesn’t scale and will quickly bloat this list. Consider pointing to agentic/context/ (or describing a naming pattern) instead of hardcoding an individual context file entry.
| - agentic/context/260207-footer-responsive-hide-name-add-contact-links.md | |
| - Conditions: | |
| - When working with the Footer component responsive behavior | |
| - When modifying contact or social links in the Legal page | |
| - When adjusting mobile breakpoint visibility of footer elements | |
| - agentic/context/ | |
| - Conditions: | |
| - When there is a run-specific or task-specific context file related to your changes | |
| - When you see a context filename (for example, date-prefixed and task-described) mentioned in the task | |
| - When you need additional guidance for a particular change beyond the general project documentation |
|
|
||
| ### 4. Add Tests | ||
|
|
||
| - No frontend test files exist in the project currently — skip test creation as there is no test infrastructure for React components |
There was a problem hiding this comment.
This spec says there is “no test infrastructure for React components”, but the frontend already has Vitest configured (app/vitest.config.ts, yarn test). If the intent is that there’s no React component testing setup (e.g., Testing Library/JSDOM), please clarify the wording to avoid implying there’s no frontend test runner at all.
| - No frontend test files exist in the project currently — skip test creation as there is no test infrastructure for React components | |
| - The frontend already has Vitest configured as a test runner, but there is currently no React component testing setup (e.g., Testing Library/JSDOM) for this area — you can skip adding new component tests for this change |
Summary
context.mdcommand template for agentic workflow context gatheringPlan
agentic/specs/260207-footer-responsive-hide-name-add-contact-links.md
Test plan