Khixsitefix#491
Conversation
Co-authored-by: Codex <codex@openai.com>
Co-authored-by: Codex <codex@openai.com>
|
Warning Review limit reached
Next review available in: 53 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews. How do review limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please refer docs for additional details. Review details⚙️ Run configurationConfiguration used: Path: .coderabbit.yml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (1)
📝 WalkthroughWalkthroughThe changes restructure dashboard layering around a new canvas wrapper, adjust navigation and responsive behavior, update leaf, sponsor, and waterfall visuals, revise event content, constrain long team-member names, and remove the test preview page. ChangesDashboard canvas layout
Visual effects
Presentation and interactions
Content and cleanup
Estimated code review effort: 4 (Complex) | ~60 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 6 | ❌ 2❌ Failed checks (1 warning, 1 inconclusive)
✅ Passed checks (6 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
alexanderpaolini
left a comment
alexanderpaolini
left a comment
There was a problem hiding this comment.
Code changes look good to me
Only nitpick might be to make longTeamMemberNameLength SCREAMING_SNAKE_CASE
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/khix/src/app/_components/team-cascade/TeamCascade.module.css (1)
221-242: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueConsider adding overflow handling for extremely long names.
white-space: nowrapcombined withmax-width: min(100%, 32rem)means names that exceed the container width even at the reduceddata-long-namefont size will overflow visibly. The smaller font mitigates this for most cases, but there's no safety net for edge-case names.Adding
overflow: hiddenortext-overflow: ellipsiswould prevent potential layout breakage. Note thattext-overflow: ellipsistypically requires a block/flex context rather thandisplay: grid, so a simpler defensive option isoverflow: hiddenon the grid container.♻️ Optional: add overflow safety
.teamMemberName { --team-member-name-slot-height: clamp(1.6625rem, 3.8vw, 2.5175rem); display: grid; height: var(--team-member-name-slot-height); max-width: min(100%, 32rem); + overflow: hidden; margin: 0; place-items: center;🤖 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 `@apps/khix/src/app/_components/team-cascade/TeamCascade.module.css` around lines 221 - 242, Add overflow protection to the .teamMemberName grid container so extremely long nowrap names cannot extend beyond its max-width; use overflow: hidden as the defensive behavior while preserving the existing sizing and typography, including the data-long-name rule.
🤖 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.
Inline comments:
In `@apps/khix/src/app/_components/sponsor-showcase/SponsorShowcase.module.css`:
- Around line 631-653: Rename the four newly added camelCase keyframe
definitions to kebab-case and update every corresponding animation reference in
the mobile media query and the additional occurrences near the later keyframe
blocks. Keep each animation mapped to its original effect while ensuring all
names satisfy Stylelint’s keyframes-name-pattern rule.
---
Nitpick comments:
In `@apps/khix/src/app/_components/team-cascade/TeamCascade.module.css`:
- Around line 221-242: Add overflow protection to the .teamMemberName grid
container so extremely long nowrap names cannot extend beyond its max-width; use
overflow: hidden as the defensive behavior while preserving the existing sizing
and typography, including the data-long-name rule.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
Run ID: 5f1ef192-ed17-4163-bf49-93e03aae858e
📒 Files selected for processing (11)
apps/khix/src/app/(portal)/_components/khix-dashboard.module.cssapps/khix/src/app/(portal)/_components/khix-dashboard.tsxapps/khix/src/app/_components/navbar/Navbar.module.cssapps/khix/src/app/_components/sections/tracks/TracksSection.module.cssapps/khix/src/app/_components/sponsor-showcase/SponsorShowcase.module.cssapps/khix/src/app/_components/sponsor-showcase/SponsorShowcase.tsxapps/khix/src/app/_components/team-cascade/TeamCascade.module.cssapps/khix/src/app/_components/team-cascade/TeamCascadeClient.tsxapps/khix/src/app/page.module.cssapps/khix/src/app/test/page.module.cssapps/khix/src/app/test/page.tsx
💤 Files with no reviewable changes (2)
- apps/khix/src/app/test/page.module.css
- apps/khix/src/app/test/page.tsx
| @media (max-width: 760px), (hover: none) { | ||
| .sponsorLink:not(:focus-visible) .rockFrame::before { | ||
| animation: sponsorMobileRockGlisten 20s ease-in-out var(--rune-delay) | ||
| infinite; | ||
| } | ||
|
|
||
| .sponsorLink:not(:focus-visible) .rockFrame::after { | ||
| animation: sponsorMobileTintGlisten 20s ease-in-out var(--rune-delay) | ||
| infinite; | ||
| } | ||
|
|
||
| .sponsorLink:not(:focus-visible) .rockSheen { | ||
| animation: sponsorMobileSheenGlisten 20s ease-in-out var(--rune-delay) | ||
| infinite; | ||
| } | ||
|
|
||
| .sponsorLink:not(:focus-visible) .rockShine { | ||
| opacity: 0; | ||
| animation: sponsorMobileShineGlisten 20s ease-in-out var(--rune-delay) | ||
| infinite; | ||
| will-change: background-position; | ||
| } | ||
|
|
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Rename keyframes to kebab-case to fix Stylelint violations.
Stylelint's keyframes-name-pattern rule requires kebab-case names. All four new @keyframes blocks use camelCase, which will fail CI. The animation references at lines 633, 638, 643, and 649 must be updated to match.
♻️ Proposed fix: rename keyframes and update references
/* Line 633 */
.sponsorLink:not(:focus-visible) .rockFrame::before {
- animation: sponsorMobileRockGlisten 20s ease-in-out var(--rune-delay)
+ animation: sponsor-mobile-rock-glisten 20s ease-in-out var(--rune-delay)
infinite;
}
/* Line 638 */
.sponsorLink:not(:focus-visible) .rockFrame::after {
- animation: sponsorMobileTintGlisten 20s ease-in-out var(--rune-delay)
+ animation: sponsor-mobile-tint-glisten 20s ease-in-out var(--rune-delay)
infinite;
}
/* Line 643 */
.sponsorLink:not(:focus-visible) .rockSheen {
- animation: sponsorMobileSheenGlisten 20s ease-in-out var(--rune-delay)
+ animation: sponsor-mobile-sheen-glisten 20s ease-in-out var(--rune-delay)
infinite;
}
/* Line 649 */
.sponsorLink:not(:focus-visible) .rockShine {
opacity: 0;
- animation: sponsorMobileShineGlisten 20s ease-in-out var(--rune-delay)
+ animation: sponsor-mobile-shine-glisten 20s ease-in-out var(--rune-delay)
infinite;
will-change: background-position;
}
/* Line 853 */
-@keyframes sponsorMobileSheenGlisten {
+@keyframes sponsor-mobile-sheen-glisten {
/* Line 864 */
-@keyframes sponsorMobileRockGlisten {
+@keyframes sponsor-mobile-rock-glisten {
/* Line 879 */
-@keyframes sponsorMobileTintGlisten {
+@keyframes sponsor-mobile-tint-glisten {
/* Line 890 */
-@keyframes sponsorMobileShineGlisten {
+@keyframes sponsor-mobile-shine-glisten {Also applies to: 853-916
🤖 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 `@apps/khix/src/app/_components/sponsor-showcase/SponsorShowcase.module.css`
around lines 631 - 653, Rename the four newly added camelCase keyframe
definitions to kebab-case and update every corresponding animation reference in
the mobile media query and the additional occurrences near the later keyframe
blocks. Keep each animation mapped to its original effect while ensuring all
names satisfy Stylelint’s keyframes-name-pattern rule.
Source: Linters/SAST tools
Co-authored-by: Codex <codex@openai.com>
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
apps/khix/src/app/_components/navbar/Navbar.module.css (1)
682-698: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winAdd
.mlhTrustBadgeto the reduced-motiontransition: nonelist.The badge has active transitions (
opacity 300ms,transform 300ms,filter 180ms) that are not disabled underprefers-reduced-motion: reduce. The change removed.mlhTrustBadgefrom theanimation: nonerule (harmless since the badge uses transitions, not animations), but the badge was never added to thetransition: noneselector list either. Users who prefer reduced motion will still see the badge fade/slide.♻️ Proposed fix: add `.mlhTrustBadge` to the transition list
.brand, .link, .link::after, .socialLink, .menuButton, .menuIcon, .mobileLayer, .mobileSurface, .mobileMenu, .mobileLink, - .mobileSocialLink { + .mobileSocialLink, + .mlhTrustBadge { animation: none; transition: none; }🤖 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 `@apps/khix/src/app/_components/navbar/Navbar.module.css` around lines 682 - 698, Update the reduced-motion selector list in the `.navbar` styles to include `.mlhTrustBadge`, ensuring its opacity, transform, and filter transitions are disabled under `prefers-reduced-motion: reduce`; do not add it back to the animation rule.
🤖 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.
Inline comments:
In `@apps/khix/src/app/_components/navbar/Navbar.tsx`:
- Around line 103-109: Update handleMobileNavChange to set isMlhHidden on every
media-query transition, including when event.matches is false, so the badge
reflects the current scroll position immediately after returning to desktop.
Preserve the existing mobile behavior and lastScrollY update.
---
Nitpick comments:
In `@apps/khix/src/app/_components/navbar/Navbar.module.css`:
- Around line 682-698: Update the reduced-motion selector list in the `.navbar`
styles to include `.mlhTrustBadge`, ensuring its opacity, transform, and filter
transitions are disabled under `prefers-reduced-motion: reduce`; do not add it
back to the animation rule.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yml
Review profile: CHILL
Plan: Pro
Run ID: 971bd250-4869-4608-b055-ee9355d8caa6
📒 Files selected for processing (15)
apps/khix/public/assets/sponsor-mobile/rocks-waterfall-bottom.webpapps/khix/public/assets/sponsor-mobile/rocks-waterfall-top.webpapps/khix/public/assets/sponsor-mobile/separator-rocks.webpapps/khix/public/assets/sponsor-mobile/sponsor-rock-separator.webpapps/khix/public/assets/sponsor-mobile/waterfall-animated-one.webpapps/khix/public/assets/sponsor-mobile/waterfall-animated-three.webpapps/khix/public/assets/sponsor-mobile/waterfall-animated-two.webpapps/khix/src/app/(portal)/_components/khix-dashboard.tsxapps/khix/src/app/_components/navbar/Navbar.module.cssapps/khix/src/app/_components/navbar/Navbar.tsxapps/khix/src/app/_components/sections/about/AboutSection.tsxapps/khix/src/app/_components/sections/faq/faq.tsxapps/khix/src/app/_components/sections/hero/HeroTitle.tsxapps/khix/src/app/_components/sections/sponsor-team/SponsorTeamSection.module.cssapps/khix/src/app/_components/sections/sponsor-team/WaterfallAtmosphere.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/khix/src/app/(portal)/_components/khix-dashboard.tsx
3 participants
Why
What
fixes the following
^^^^^ went with making font smaller
track click has weird bug on 3rd click that resets the position of the leaves instead of continuing the animation from the state it was in after the 2nd click
faq sections arent clickable
Closes: #ISSUE_NUMBER
Test Plan
Checklist
pnpm db:generateand committed the generated files inpackages/db/drizzle/Summary by CodeRabbit