dashboard#26
Conversation
📝 WalkthroughWalkthroughRedesigns the dashboard header and page composition, updates ticket and QR components, reworks countdown and event pass displays, adds an optional Pin image toggle, introduces a pass asset, and changes hackathon registration and date configuration. ChangesDashboard rebrand
Estimated code review effort: 3 (Moderate) | ~30 minutes Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 inconclusive)
✅ Passed checks (4 passed)
✨ Finishing Touches📝 Generate docstrings
🧪 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 |
Deploying with
|
| Status | Name | Latest Commit | Preview URL | Updated (UTC) |
|---|---|---|---|---|
| ✅ Deployment successful! View logs |
rowdyhacksxii | 899d52a | Commit Preview URL Branch Preview URL |
Jul 11 2026, 02:21 AM |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 6
🧹 Nitpick comments (1)
apps/web/src/components/dash/overview/ClientBubbles.tsx (1)
25-34: 🚀 Performance & Scalability | 🔵 Trivial | ⚡ Quick win
DossierPinsis redefined on every render, causing unnecessary Pin remounts each second.
DossierPinsis declared insideCountdown, which re-renders every second viauseTimer. Each re-render creates a newDossierPinsfunction reference, so React unmounts the entire Pin subtree and remounts it — causing DOM churn, potential image flicker, and CSS animation restarts on thepinclass.Move
DossierPinsoutsideCountdownor inline the pins directly.♻️ Proposed fix: inline the pins
function DossierPins() { return ( <> <Pin className="absolute left-[90%] top-[4%] z-40 min-[500px]:left-[7%] min-[500px]:top-[8%] md:hidden" /> <Pin className="absolute left-[4%] top-[5%] z-40 min-[500px]:left-[93%] min-[500px]:top-[4%] md:left-[4%] md:top-[6%] lg:left-[-2%] lg:top-[51%]" /> <Pin className="absolute left-[0%] top-[90%] z-40 min-[500px]:left-[90%] min-[500px]:top-[87%] md:left-[93%] md:top-[8%] lg:hidden" /> <Pin className="absolute z-40 hidden lg:block lg:left-[90%] lg:top-[11%]" no_thread/> </> ); } return ( <div className={`relative flex min-h-[150px] flex-col justify-center p-5 text-foreground ${manuale.className}`}> - <DossierPins /> + <Pin className="absolute left-[90%] top-[4%] z-40 min-[500px]:left-[7%] min-[500px]:top-[8%] md:hidden" /> + <Pin className="absolute left-[4%] top-[5%] z-40 min-[500px]:left-[93%] min-[500px]:top-[4%] md:left-[4%] md:top-[6%] lg:left-[-2%] lg:top-[51%]" /> + <Pin className="absolute left-[0%] top-[90%] z-40 min-[500px]:left-[90%] min-[500px]:top-[87%] md:left-[93%] md:top-[8%] lg:hidden" /> + <Pin className="absolute z-40 hidden lg:block lg:left-[90%] lg:top-[11%]" no_thread/> <img🤖 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/web/src/components/dash/overview/ClientBubbles.tsx` around lines 25 - 34, The Pin subtree is being remounted on every Countdown tick because DossierPins is defined inside Countdown and gets a new function identity each render. Move DossierPins out of Countdown or inline its Pin elements directly in ClientBubbles so the same components persist across timer updates, avoiding unnecessary unmount/remount churn and animation restarts.
🤖 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/web/src/app/dash/layout.tsx`:
- Around line 58-63: The Link in the dash layout is empty, leaving an unfocused
but clickable anchor with no accessible content. Update the Link in layout.tsx
to either remove it entirely if it is unused, or add the intended child content
(such as the logo or home label) inside the existing Link element so it is not
rendered empty.
In `@apps/web/src/app/dash/page.tsx`:
- Line 36: The grid container in the dashboard page uses an invalid Tailwind
utility, rows-[], which should be removed or replaced with a valid grid row
class if row sizing is needed. Update the div in the dashboard page component so
the class list only contains valid Tailwind utilities, keeping the existing grid
layout behavior intact.
In `@apps/web/src/components/dash/overview/ServerBubbles.tsx`:
- Line 47: The Discord link in ServerBubbles currently opens in the same tab;
update the Link usage for c.links.discord to open externally in a new tab by
adding target="_blank" and rel="noopener noreferrer". Keep the change scoped to
the Discord anchor/link element so the rest of the component behavior stays the
same.
- Around line 105-106: The Location text in ServerBubbles’s ticket display is
hardcoded, so it can drift from the configured value used elsewhere. Update the
TicketInfo rendering to source the location from the same config-backed value
used by /dash/pass, likely c.prettyLocation, and keep the existing label/markup
while replacing the literal string with the shared property for consistency.
- Line 123: The exported component name in ServerBubbles.tsx is misspelled as
QRTiteleHorizintalTicket; rename it to the correct Horizontal spelling and
update the matching import in page.tsx to use the new symbol name. Make sure the
component definition and every reference to this export use the same corrected
identifier so the import/export pair stays consistent.
In `@packages/config/hackkit.config.ts`:
- Line 140: The `startDate` value in `hackkit.config.ts` is inconsistent with
its trailing comment: the `setHours` call in the config date setup currently
sets 2:00 PM while the comment says 9:00 AM CDT. Update the `startDate`
initialization near the config object so the time matches the intended 9:00 AM
CDT, and keep the inline comment aligned with the actual value.
---
Nitpick comments:
In `@apps/web/src/components/dash/overview/ClientBubbles.tsx`:
- Around line 25-34: The Pin subtree is being remounted on every Countdown tick
because DossierPins is defined inside Countdown and gets a new function identity
each render. Move DossierPins out of Countdown or inline its Pin elements
directly in ClientBubbles so the same components persist across timer updates,
avoiding unnecessary unmount/remount churn and animation restarts.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3f935b0e-bb99-4374-b62a-b7fd34bffb23
📒 Files selected for processing (13)
apps/web/public/img/assets/dash/have-questions-background.webpapps/web/public/img/assets/dash/lable-vertical.webpapps/web/public/img/assets/dash/lable.webpapps/web/public/img/assets/dash/lable1.webpapps/web/public/img/assets/dash/lable2.webpapps/web/public/img/assets/dash/time-background.webpapps/web/src/app/dash/layout.tsxapps/web/src/app/dash/page.tsxapps/web/src/components/dash/overview/ClientBubbles.tsxapps/web/src/components/dash/overview/ServerBubbles.tsxapps/web/src/components/dash/shared/DashNavItem.tsxapps/web/src/components/landing/Pin.tsxpackages/config/hackkit.config.ts
|
|
||
| <div className="mx-auto min-h-[calc(100%-7rem)] max-w-7xl py-10"> | ||
|
|
||
| <div className="rows-[] grid w-full grid-cols-1 gap-5 px-2 pt-10 sm:grid-cols-2 md:grid-cols-2 min-[500px]:grid-cols-2 lg:grid-cols-4"> |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
rows-[] is not a valid Tailwind class.
The empty arbitrary value rows-[] is invalid CSS and likely a leftover. Remove it or replace with a valid grid-rows-* utility if grid row sizing was intended.
🧹 Proposed fix
- <div className="rows-[] grid w-full grid-cols-1 gap-5 px-2 pt-10 sm:grid-cols-2 md:grid-cols-2 min-[500px]:grid-cols-2 lg:grid-cols-4">
+ <div className="grid w-full grid-cols-1 gap-5 px-2 pt-10 sm:grid-cols-2 md:grid-cols-2 min-[500px]:grid-cols-2 lg:grid-cols-4">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="rows-[] grid w-full grid-cols-1 gap-5 px-2 pt-10 sm:grid-cols-2 md:grid-cols-2 min-[500px]:grid-cols-2 lg:grid-cols-4"> | |
| <div className="grid w-full grid-cols-1 gap-5 px-2 pt-10 sm:grid-cols-2 md:grid-cols-2 min-[500px]:grid-cols-2 lg:grid-cols-4"> |
🤖 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/web/src/app/dash/page.tsx` at line 36, The grid container in the
dashboard page uses an invalid Tailwind utility, rows-[], which should be
removed or replaced with a valid grid row class if row sizing is needed. Update
the div in the dashboard page component so the class list only contains valid
Tailwind utilities, keeping the existing grid layout behavior intact.
| <Link href={c.links.discord}> | ||
| <Button className="border-hackathon">Discord</Button> | ||
| <div className="flex items-center justify-center w-full gap-4 text-foreground"> | ||
| <Link href={c.links.discord} aria-label="Discord"> |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟡 Minor | ⚡ Quick win
Discord external link should open in a new tab.
The Discord link navigates away from the app in the same tab. Add target="_blank" and rel="noopener noreferrer" for UX and to prevent reverse tabnabbing.
🔒️ Proposed fix
- <Link href={c.links.discord} aria-label="Discord">
+ <Link href={c.links.discord} aria-label="Discord" target="_blank" rel="noopener noreferrer">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Link href={c.links.discord} aria-label="Discord"> | |
| <Link href={c.links.discord} aria-label="Discord" target="_blank" rel="noopener noreferrer"> |
🤖 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/web/src/components/dash/overview/ServerBubbles.tsx` at line 47, The
Discord link in ServerBubbles currently opens in the same tab; update the Link
usage for c.links.discord to open externally in a new tab by adding
target="_blank" and rel="noopener noreferrer". Keep the change scoped to the
Discord anchor/link element so the rest of the component behavior stays the
same.
| <p className="font-light leading-tight uppercase text-sm text-foreground">Location</p> | ||
| <p className="text-md font-bold">Downtown campus | SP1 | SP2</p> |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟡 Minor | ⚡ Quick win
Use config for location instead of hardcoding.
TicketInfo hardcodes "Downtown campus | SP1 | SP2" while /dash/pass uses c.prettyLocation from config. If the config value changes, this ticket won't update. Verify whether c.prettyLocation is the right source here, and if so, use it for consistency.
🔧 Proposed fix
- <p className="text-md font-bold">Downtown campus | SP1 | SP2</p>
+ <p className="text-md font-bold">{c.prettyLocation}</p>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <p className="font-light leading-tight uppercase text-sm text-foreground">Location</p> | |
| <p className="text-md font-bold">Downtown campus | SP1 | SP2</p> | |
| <p className="font-light leading-tight uppercase text-sm text-foreground">Location</p> | |
| <p className="text-md font-bold">{c.prettyLocation}</p> |
🤖 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/web/src/components/dash/overview/ServerBubbles.tsx` around lines 105 -
106, The Location text in ServerBubbles’s ticket display is hardcoded, so it can
drift from the configured value used elsewhere. Update the TicketInfo rendering
to source the location from the same config-backed value used by /dash/pass,
likely c.prettyLocation, and keep the existing label/markup while replacing the
literal string with the shared property for consistency.
| ); | ||
| } | ||
|
|
||
| export function QRTiteleHorizintalTicket({ qrPayload, firstName }: { qrPayload: string; firstName: string }) { |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Typo in export name: QRTiteleHorizintalTicket.
"Horizintal" should be "Horizontal." This propagates to the import in page.tsx (line 12).
✏️ Proposed fix for ServerBubbles.tsx
-export function QRTiteleHorizintalTicket({ qrPayload, firstName }: { qrPayload: string; firstName: string }) {
+export function QRTiteleHorizontalTicket({ qrPayload, firstName }: { qrPayload: string; firstName: string }) {✏️ Proposed fix for page.tsx
- QRTiteleHorizintalTicket,
+ QRTiteleHorizontalTicket,-<QRTiteleHorizintalTicket qrPayload={qrPayload} firstName={user.firstName} />
+<QRTiteleHorizontalTicket qrPayload={qrPayload} firstName={user.firstName} />📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| export function QRTiteleHorizintalTicket({ qrPayload, firstName }: { qrPayload: string; firstName: string }) { | |
| export function QRTiteleHorizontalTicket({ qrPayload, firstName }: { qrPayload: string; firstName: string }) { |
🤖 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/web/src/components/dash/overview/ServerBubbles.tsx` at line 123, The
exported component name in ServerBubbles.tsx is misspelled as
QRTiteleHorizintalTicket; rename it to the correct Horizontal spelling and
update the matching import in page.tsx to use the new symbol name. Make sure the
component definition and every reference to this export use the same corrected
identifier so the import/export pair stays consistent.
| "https://static.acmutsa.org/No%20Resume%20Provided.pdf", | ||
| // Come in and change this date to whenever the hackathon starts | ||
| startDate: new Date(new Date(2024, 1, 24).setHours(9)), | ||
| startDate: new Date(new Date(2026, 9, 3).setHours(14, 0, 0, 0)), // October 3, 2026 at 9:00 AM CDT |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Comment says 9:00 AM CDT but code sets 14:00 (2:00 PM).
setHours(14, 0, 0, 0) sets the time to 2:00 PM, not 9:00 AM as the trailing comment states. This mismatch could mislead anyone adjusting the date later.
📝 Proposed fix for the comment
- startDate: new Date(new Date(2026, 9, 3).setHours(14, 0, 0, 0)), // October 3, 2026 at 9:00 AM CDT
+ startDate: new Date(new Date(2026, 9, 3).setHours(14, 0, 0, 0)), // October 3, 2026 at 2:00 PM CDT📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| startDate: new Date(new Date(2026, 9, 3).setHours(14, 0, 0, 0)), // October 3, 2026 at 9:00 AM CDT | |
| startDate: new Date(new Date(2026, 9, 3).setHours(14, 0, 0, 0)), // October 3, 2026 at 2:00 PM CDT |
🤖 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 `@packages/config/hackkit.config.ts` at line 140, The `startDate` value in
`hackkit.config.ts` is inconsistent with its trailing comment: the `setHours`
call in the config date setup currently sets 2:00 PM while the comment says 9:00
AM CDT. Update the `startDate` initialization near the config object so the time
matches the intended 9:00 AM CDT, and keep the inline comment aligned with the
actual value.
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
apps/web/src/app/dash/layout.tsx (2)
67-77: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winExternal links are hidden on mobile with no visible replacement.
The Home, Survival Guide, and Discord links are wrapped in
hidden md:flex, making them inaccessible on mobile. The previous layout had aMobileNavbarMenu(now removed per the library context). If mobile users still need these links, consider adding a mobile-friendly alternative (e.g., a hamburger menu or including them in theProfileButtondropdown which already rendersMobileNavBarLinks).🤖 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/web/src/app/dash/layout.tsx` around lines 67 - 77, The navigation links in the dash layout are now hidden behind the desktop-only wrapper, so mobile users lose access to Home, Survival Guide, and Discord. Update the layout using the existing navigation symbols such as `ProfileButton`, `MobileNavBarLinks`, or a new mobile menu so these links remain reachable on small screens, rather than relying only on the `hidden md:flex` block.
79-79: 📐 Maintainability & Code Quality | 🔵 Trivial | 💤 Low valueRedundant
usercheck —useris guaranteed truthy here.Line 23 redirects when
!user, so by line 79useris always truthy. The{user && <ProfileButton />}guard is unnecessary.♻️ Proposed fix
- {user && <ProfileButton />} + <ProfileButton />🤖 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/web/src/app/dash/layout.tsx` at line 79, The `user` guard before rendering `ProfileButton` is redundant because the surrounding flow already guarantees a truthy `user` in `layout.tsx`. Remove the `{user && ...}` conditional and render `ProfileButton` directly in the same layout block where `user` is already validated, keeping the rest of the component logic unchanged.
🤖 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/web/src/app/dash/layout.tsx`:
- Around line 82-88: The right pin wrapper in the layout should match the left
pin container’s sizing and alignment behavior. Update the bare <div> around the
pin image in the layout component to use the same flex, full-height, shrink-0,
and items-center classes as the left pin wrapper so the image stays aligned and
doesn’t get squeezed on smaller screens.
- Around line 68-76: Add rel="noopener noreferrer" to the external
target="_blank" links in the dash layout. Update the Link components for
Survival Guide and Discord in the layout.tsx header so they explicitly include
rel alongside target="_blank", matching best practice for external navigation
and preventing tabnabbing.
---
Nitpick comments:
In `@apps/web/src/app/dash/layout.tsx`:
- Around line 67-77: The navigation links in the dash layout are now hidden
behind the desktop-only wrapper, so mobile users lose access to Home, Survival
Guide, and Discord. Update the layout using the existing navigation symbols such
as `ProfileButton`, `MobileNavBarLinks`, or a new mobile menu so these links
remain reachable on small screens, rather than relying only on the `hidden
md:flex` block.
- Line 79: The `user` guard before rendering `ProfileButton` is redundant
because the surrounding flow already guarantees a truthy `user` in `layout.tsx`.
Remove the `{user && ...}` conditional and render `ProfileButton` directly in
the same layout block where `user` is already validated, keeping the rest of the
component logic unchanged.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: 3a64bc0e-764d-4db1-8883-5833766d8843
📒 Files selected for processing (2)
apps/web/src/app/dash/layout.tsxapps/web/src/components/dash/shared/DashNavItem.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- apps/web/src/components/dash/shared/DashNavItem.tsx
| <Link href={"/"} className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl"> | ||
| Home | ||
| </Link> | ||
| <Link href={c.links.guide} target="_blank" className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl"> | ||
| Survival Guide | ||
| </Link> | ||
| <Link href={c.links.discord} target="_blank" className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl"> | ||
| Discord | ||
| </Link> |
There was a problem hiding this comment.
🔒 Security & Privacy | 🟡 Minor | ⚡ Quick win
Add rel="noopener noreferrer" to external target="_blank" links.
The Survival Guide and Discord links open in new tabs without rel="noopener noreferrer". While modern browsers implicitly apply noopener for target="_blank", explicitly setting it is best practice and protects against tabnabbing in older browsers.
🛡️ Proposed fix
- <Link href={c.links.guide} target="_blank" className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl">
+ <Link href={c.links.guide} target="_blank" rel="noopener noreferrer" className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl">
Survival Guide
</Link>
- <Link href={c.links.discord} target="_blank" className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl">
+ <Link href={c.links.discord} target="_blank" rel="noopener noreferrer" className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl">
Discord
</Link>📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <Link href={"/"} className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl"> | |
| Home | |
| </Link> | |
| <Link href={c.links.guide} target="_blank" className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl"> | |
| Survival Guide | |
| </Link> | |
| <Link href={c.links.discord} target="_blank" className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl"> | |
| Discord | |
| </Link> | |
| <Link href={c.links.guide} target="_blank" rel="noopener noreferrer" className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl"> | |
| Survival Guide | |
| </Link> | |
| <Link href={c.links.discord} target="_blank" rel="noopener noreferrer" className="text-sm hover:underline sm:text-sm md:text-lg lg:text-2xl xl:text-3xl 2xl:text-3xl"> | |
| Discord | |
| </Link> |
🤖 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/web/src/app/dash/layout.tsx` around lines 68 - 76, Add rel="noopener
noreferrer" to the external target="_blank" links in the dash layout. Update the
Link components for Survival Guide and Discord in the layout.tsx header so they
explicitly include rel alongside target="_blank", matching best practice for
external navigation and preventing tabnabbing.
| <div> | ||
| <img | ||
| src={"/img/assets/menu/pin1.webp"} | ||
| alt={"Pin"} | ||
| className="pointer-events-none h-12 w-auto sm:h-14 md:h-20 lg:h-24 xl:h-28" | ||
| /> | ||
| </div> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
Right pin container missing shrink-0 and alignment classes.
The left pin wrapper (line 49) uses flex h-full shrink-0 items-center, but the right pin wrapper (line 82) is a bare <div>. Without shrink-0, the image may be squeezed on narrower screens, and without flex items-center, vertical alignment may differ from the left pin.
🔧 Proposed fix
- <div>
+ <div className="flex h-full shrink-0 items-center">
<img📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div> | |
| <img | |
| src={"/img/assets/menu/pin1.webp"} | |
| alt={"Pin"} | |
| className="pointer-events-none h-12 w-auto sm:h-14 md:h-20 lg:h-24 xl:h-28" | |
| /> | |
| </div> | |
| <div className="flex h-full shrink-0 items-center"> | |
| <img | |
| src={"/img/assets/menu/pin1.webp"} | |
| alt={"Pin"} | |
| className="pointer-events-none h-12 w-auto sm:h-14 md:h-20 lg:h-24 xl:h-28" | |
| /> | |
| </div> |
🤖 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/web/src/app/dash/layout.tsx` around lines 82 - 88, The right pin wrapper
in the layout should match the left pin container’s sizing and alignment
behavior. Update the bare <div> around the pin image in the layout component to
use the same flex, full-height, shrink-0, and items-center classes as the left
pin wrapper so the image stays aligned and doesn’t get squeezed on smaller
screens.
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (2)
apps/web/src/app/dash/pass/page.tsx (2)
65-70: 🚀 Performance & Scalability | 🔵 Trivial | 💤 Low valueConsider using
next/imageinstead of plain<img>The pass background uses a plain
<img>tag, bypassing Next.js image optimization (lazy loading, responsive srcsets, etc.). If the image is meant to be a fixed-size decorative background that shouldn't be optimized, this is acceptable—but if it could benefit from optimization, switch to<Image>.🤖 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/web/src/app/dash/pass/page.tsx` around lines 65 - 70, Replace the plain img element in the pass page with Next.js’s Image component, importing it from next/image and preserving the existing source, alt, aria-hidden, className, and full-width responsive behavior; provide the required dimensions or responsive sizing configuration.
100-109: 🩺 Stability & Availability | 🔵 Trivial | ⚡ Quick winAdd an accessible label to the QR DrawerTrigger
The
DrawerTriggerwraps a QR code image with no text oraria-label, so screen reader users have no indication of what the control does. Consider adding anaria-labelto the trigger element.♿ Proposed fix
<DrawerTrigger asChild> - <div className="flex aspect-square h-full items-center justify-center"> + <div className="flex aspect-square h-full items-center justify-center" role="button" aria-label="Open QR code"> <QRCode🤖 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/web/src/app/dash/pass/page.tsx` around lines 100 - 109, Add an accessible name to the QR code drawer control by applying a descriptive aria-label to the DrawerTrigger wrapping the QRCode, clearly indicating that activating it opens the QR code drawer.
🤖 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/web/src/app/dash/pass/page.tsx`:
- Line 74: Fix the invalid Tailwind utility on the flex container in the pass
page: update the className containing “item-center” to use “items-center” so the
container correctly centers its contents vertically.
---
Nitpick comments:
In `@apps/web/src/app/dash/pass/page.tsx`:
- Around line 65-70: Replace the plain img element in the pass page with
Next.js’s Image component, importing it from next/image and preserving the
existing source, alt, aria-hidden, className, and full-width responsive
behavior; provide the required dimensions or responsive sizing configuration.
- Around line 100-109: Add an accessible name to the QR code drawer control by
applying a descriptive aria-label to the DrawerTrigger wrapping the QRCode,
clearly indicating that activating it opens the QR code drawer.
🪄 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: defaults
Review profile: CHILL
Plan: Pro
Run ID: b62854d3-e7c1-471b-85d2-09b868da2c4f
📒 Files selected for processing (2)
apps/web/public/img/assets/pass/event-pass.webpapps/web/src/app/dash/pass/page.tsx
✅ Files skipped from review due to trivial changes (1)
- apps/web/public/img/assets/pass/event-pass.webp
|
|
||
| <div className={`absolute inset-0 flex flex-col items-center justify-center gap-y-[10%] pt-[10%] ${manuale.className}`}> | ||
|
|
||
| <div className="w-full h-auto flex item-center justify-center"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
Fix Tailwind class typo: item-center → items-center
item-center is not a valid Tailwind utility class. The correct class is items-center, which sets align-items: center on the flex container. Without it, the icon won't be vertically centered as intended.
🐛 Proposed fix
- <div className="w-full h-auto flex item-center justify-center">
+ <div className="w-full h-auto flex items-center justify-center">📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| <div className="w-full h-auto flex item-center justify-center"> | |
| <div className="w-full h-auto flex items-center justify-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/web/src/app/dash/pass/page.tsx` at line 74, Fix the invalid Tailwind
utility on the flex container in the pass page: update the className containing
“item-center” to use “items-center” so the container correctly centers its
contents vertically.
1 participant
Summary by CodeRabbit