style: tighten spacing and polish misc links#86
Conversation
Apply a consistent, slightly denser spacing rhythm across home/about/projects/misc while keeping readability. Sync About experience with LinkedIn and refine social/help tooltip and resource link labels for better mobile UX. Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Claude <noreply@anthropic.com>
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
📝 WalkthroughWalkthroughReduces ChangesTypography, content, and tooltip updates
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Comment |
Make the homepage email icon tooltip display the full address as "Email: kaichen.dev.37@gmail.com" while keeping other social tooltips unchanged. Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: Claude <noreply@anthropic.com>
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
| .home-help-tip::before { | ||
| bottom: -7px; | ||
| border-left: 7px solid transparent; | ||
| border-right: 7px solid transparent; | ||
| border-top: 7px solid var(--color-border-secondary); | ||
| } |
There was a problem hiding this comment.
🚩 Arrow border color slightly differs from tooltip border color in light mode
The outer arrow triangle uses border-top: 7px solid var(--color-border-secondary) which resolves to #d4d4d8 (zinc-300) in light mode (app/globals.css:314). However, the tooltip itself (via TIP_BASE_CLASS at app/components/hover-tip.tsx:48) uses border-zinc-200 which is #e4e4e7. This means the arrow's outer border is slightly darker than the tooltip border in light mode. In dark mode both resolve to zinc-700 (#3f3f46) so they match. This is likely a deliberate design choice for arrow definition but could be unintentional.
Was this helpful? React with 👍 or 👎 to provide feedback.
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
🧹 Nitpick comments (2)
app/components/oxford-dul/course-project-link.tsx (1)
105-107: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse the shared
.nav-linkclass for the list variant.This re-declares the standard row styling in a component path that is supposed to consume the shared class, which makes spacing/hover updates drift across components. As per coding guidelines,
app/components/**/*.tsx: Use.mag-card,.mag-card-inset, and.nav-linkCSS classes defined inapp/globals.cssfor consistent styling across the application.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/components/oxford-dul/course-project-link.tsx` around lines 105 - 107, The list variant in course-project-link.tsx is re-declaring the shared row styling instead of consuming the shared navigation style. Update the list variant in the course-project-link component to use the existing .nav-link class from app/globals.css rather than an inline utility string, so the shared row styling stays consistent across components and future hover/spacing changes only need to be made in one place.Source: Coding guidelines
app/components/pinned-project-link.tsx (1)
76-76: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winUse
.nav-linkinstead of another bespoke list-row class string.This component lives under
app/components/**, so keeping the shared list-link class here avoids duplicated hover/padding definitions. As per coding guidelines,app/components/**/*.tsx: Use.mag-card,.mag-card-inset, and.nav-linkCSS classes defined inapp/globals.cssfor consistent styling across the application.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/components/pinned-project-link.tsx` at line 76, The pinned project link is using a bespoke Tailwind class string instead of the shared navigation link style. Update the className in pinned-project-link.tsx to use the existing .nav-link class from app/globals.css, so this component follows the shared styling convention used by other app/components elements and avoids duplicating padding/hover behavior.Source: Coding guidelines
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Nitpick comments:
In `@app/components/oxford-dul/course-project-link.tsx`:
- Around line 105-107: The list variant in course-project-link.tsx is
re-declaring the shared row styling instead of consuming the shared navigation
style. Update the list variant in the course-project-link component to use the
existing .nav-link class from app/globals.css rather than an inline utility
string, so the shared row styling stays consistent across components and future
hover/spacing changes only need to be made in one place.
In `@app/components/pinned-project-link.tsx`:
- Line 76: The pinned project link is using a bespoke Tailwind class string
instead of the shared navigation link style. Update the className in
pinned-project-link.tsx to use the existing .nav-link class from
app/globals.css, so this component follows the shared styling convention used by
other app/components elements and avoids duplicating padding/hover behavior.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: ec87f91e-bcdd-4205-b15b-e088a46d6ff4
📒 Files selected for processing (8)
app/about/page.tsxapp/components/home-social-links.tsxapp/components/oxford-dul/course-project-link.tsxapp/components/pinned-project-link.tsxapp/globals.cssapp/misc/page.tsxapp/page.tsxapp/projects/page.tsx
1 participant
Summary
Test plan
/,/about,/projects, and/miscspacing updatesMade with Cursor
Summary by CodeRabbit
New Features
UI/Style Updates
Content Changes