fix: polish responsive layouts and interactions - #39
Conversation
✅ Deploy Preview for fanciful-cannoli-268c0c ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 8502a583f0
ℹ️ About Codex in GitHub
Your team has set up Codex to review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
Codex can also answer questions or update the PR. Try commenting "@codex address that feedback".
| if (event instanceof KeyboardEvent) { | ||
| event.preventDefault(); | ||
| } |
There was a problem hiding this comment.
When keyboard focus is on the nested LinkedIn link, its Enter keydown bubbles to the card's new handler, and this unconditional preventDefault() suppresses the link's native activation. As a result, keyboard users cannot open testimonial profiles; handle the key only when the card itself is the event target, or avoid preventing the default for descendant controls.
Useful? React with 👍 / 👎.
There was a problem hiding this comment.
Pull request overview
This PR polishes responsive layouts and small interaction details across the portfolio UI, including header/project-detail layout tweaks, legal page footer positioning, and interactive styling for testimonials. It also updates the public contact email address.
Changes:
- Refines responsive grid/spacing in global styles and the project detail page, including switching several text blocks from
justifytostart. - Updates legal page layout to use a flex column structure so the footer can be pushed to the bottom more reliably (with
svh/dvhhandling). - Adds an “active” testimonial card state driven by a component signal and document-click clearing logic.
Reviewed changes
Copilot reviewed 15 out of 15 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| src/styles.css | Adjusts desktop header grid/spacing for project-detail state. |
| src/app/shared/legal-page-layout/legal-page-layout.css | Reworks legal page layout to flex-column with sticky footer behavior and dvh support. |
| src/app/shared/data/social-links.ts | Updates email social link to the new contact address. |
| src/app/pages/project-detail/project-detail.css | Tweaks layout sizing/rows and improves text alignment/readability. |
| src/app/pages/legal-notice/legal-notice.css | Removes now-unneeded legal content min-height CSS variables. |
| src/app/pages/home/sections/testimonials/testimonials.ts | Adds active testimonial signal + global click handler to clear selection. |
| src/app/pages/home/sections/testimonials/testimonials.html | Adds active class binding and click/keyboard activation handlers on cards. |
| src/app/pages/home/sections/testimonials/testimonials.css | Adds styling for “active” testimonial cards across breakpoints. |
| src/app/pages/home/sections/skills/skills.html | Adjusts large-screen min-height behavior for the skills section. |
| src/app/pages/home/sections/projects/projects.html | Switches project description text alignment to start. |
| src/app/pages/home/sections/hero/hero.html | Updates the hero email link to the new contact address. |
| src/app/pages/home/sections/hero/hero.css | Refines hero artwork positioning and social nav bottom offset behavior. |
| src/app/pages/home/sections/contact/contact.html | Adjusts stamp positioning and adds container-query driven heading sizing; updates copy alignment. |
| src/app/pages/home/sections/about/about.html | Adds a class hook for large-screen layout adjustments. |
| src/app/pages/home/sections/about/about.css | Adds a large-screen min-height clamp for the about section. |
💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.
| <li | ||
| class="testimonial-card relative z-1 grid aspect-square w-full min-w-0 origin-center text-canvas isolate" | ||
| [class.testimonial-card--active]="activeTestimonialId() === testimonial.id" | ||
| tabindex="0" | ||
| (click)="activateTestimonial($event, testimonial.id)" | ||
| (keydown.enter)="activateTestimonial($event, testimonial.id)" | ||
| (keydown.space)="activateTestimonial($event, testimonial.id)" | ||
| > |
| protected activateTestimonial(event: Event, testimonialId: TestimonialId): void { | ||
| if (event instanceof KeyboardEvent) { | ||
| event.preventDefault(); | ||
| } | ||
|
|
||
| event.stopPropagation(); | ||
| this.activeTestimonialId.set(testimonialId); | ||
| } |
No description provided.