xl screen fix#27
Conversation
📝 WalkthroughWalkthroughLanding page components (Hero, About, Map, Partners, WorkWithUs, FAQ) are updated to use CSS container-query width units (cqw) instead of viewport units (vw/vh), with container-type:inline-size added to enable them. The Home page layout adds a main wrapper, Map's section id changes to "Map", and navbar links are updated accordingly. ChangesContainer-query unit migration
Estimated code review effort: 2 (Simple) | ~15 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 | 5315fd8 | Commit Preview URL Branch Preview URL |
Jul 08 2026, 06:51 PM |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
♻️ Duplicate comments (1)
apps/web/src/components/landing/Partners.tsx (1)
39-39: 🎯 Functional Correctness | 🟠 Major | ⚡ Quick winSame section-padding
cqwissue as Map.tsx.
sm:pb-[3cqw]andmd:pb-[5cqw]on this section resolve against the parent<main>which lackscontainer-type:inline-size, falling back to viewport size. See the comment onMap.tsxline 88 for the root-cause fix (addcontainer-typeto<main>inpage.tsx).The child
cqwwidths on lines 45 and 58 resolve against this section correctly.🤖 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/landing/Partners.tsx` at line 39, The section padding on the Partners section is using cqw values that resolve against the wrong container because the parent <main> is not a container. Update the layout at the shared <main> in page.tsx to include container-type:inline-size so the sm:pb-[3cqw] and md:pb-[5cqw] values in Partners.tsx (and similar sections like Map.tsx) resolve correctly without changing the child cqw-based widths.
🤖 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/page.tsx`:
- Around line 25-33: The About and FAQ sections still use viewport-based padding
inside the capped main container, so update their padding utilities to
container-query units to match Hero, WorkWithUs, and Partners. In About.tsx and
faq.tsx, replace the remaining vw-based pb values with cqw-based values while
keeping the existing [container-type:inline-size] setup, so spacing scales with
the 1536px-cap’d main rather than the full viewport.
In `@apps/web/src/components/landing/Hero.tsx`:
- Line 129: The Tailwind class on the “Help Wanted” heading uses invalid
arbitrary-value syntax, so the large-screen top offset is never generated.
Update the className in Hero.tsx to use the correct Tailwind form with a dash
for the lg breakpoint offset, and verify the surrounding positioning classes
still behave as expected.
In `@apps/web/src/components/landing/Map.tsx`:
- Line 88: The `Map` and `Partners` sections are using `cqw` padding, but those
units won’t resolve against the capped 1536px layout unless an ancestor
container exists. Add `container-type:inline-size` to the top-level `<main>` in
`page.tsx` so the `Map` section’s `pb-[12cqw]`/`sm:pb-[3cqw]`/`md:pb-[5cqw]` and
the matching `Partners.tsx` padding resolve against the intended container
instead of the viewport. Keep the section-level container type on `Map` for its
child `cqw` usage, but make sure the ancestor container is the `<main>` element.
In `@apps/web/src/components/landing/WorkWithUs.tsx`:
- Line 50: The className on WorkWithUs contains duplicate md width utilities, so
the earlier md:w-[15cqw] is overridden by md:w-[21cqw] and serves no purpose.
Update the responsive width set in the WorkWithUs component to keep only the
intended md breakpoint width, removing the redundant utility so the breakpoint
progression remains clean and unambiguous.
- Line 201: The bottom padding on WorkWithUs is using cqw without a matching
query container on the section itself, so it resolves against an ancestor
instead of this component. Update WorkWithUs by either moving the padding
classes to an inner wrapper that is inside the container, or adding
container-type:inline-size to the nearest appropriate parent such as the main
layout element so the cqw-based padding is scoped correctly.
---
Duplicate comments:
In `@apps/web/src/components/landing/Partners.tsx`:
- Line 39: The section padding on the Partners section is using cqw values that
resolve against the wrong container because the parent <main> is not a
container. Update the layout at the shared <main> in page.tsx to include
container-type:inline-size so the sm:pb-[3cqw] and md:pb-[5cqw] values in
Partners.tsx (and similar sections like Map.tsx) resolve correctly without
changing the child cqw-based widths.
🪄 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: 7faaff86-8325-4dbe-b111-385ca7b383b9
📒 Files selected for processing (8)
apps/web/src/app/page.tsxapps/web/src/components/landing/About.tsxapps/web/src/components/landing/Hero.tsxapps/web/src/components/landing/Map.tsxapps/web/src/components/landing/Partners.tsxapps/web/src/components/landing/WorkWithUs.tsxapps/web/src/components/landing/faq.tsxapps/web/src/components/shared/NavBarLinksGrouper.tsx
| <main className="mx-auto w-full max-w-[1536px]"> | ||
| <Hero /> | ||
| <About /> | ||
| <Map /> | ||
| <WorkWithUs /> | ||
| <Partners /> | ||
| <FAQ /> | ||
| <Footer /> | ||
| </main> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Cross-file: About and FAQ sections still use vw padding inside the capped <main>.
The <main> wrapper caps width at max-w-[1536px], and Hero/WorkWithUs/Partners correctly switched to cqw so their sizing scales with the container. However, from the provided graph context, About.tsx still uses pb-[12vw] sm:pb-[3vw] md:pb-[5vw] and faq.tsx uses pb-[0vw] sm:pb-[3vw] md:pb-[5vw] — both with [container-type:inline-size] set but still referencing viewport units. On xl screens wider than 1536px, these vw values will continue scaling with the full viewport, producing inconsistent spacing relative to the cqw-based sections. These should be migrated to cqw as well to complete the xl-screen fix.
🤖 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/page.tsx` around lines 25 - 33, The About and FAQ sections
still use viewport-based padding inside the capped main container, so update
their padding utilities to container-query units to match Hero, WorkWithUs, and
Partners. In About.tsx and faq.tsx, replace the remaining vw-based pb values
with cqw-based values while keeping the existing [container-type:inline-size]
setup, so spacing scales with the 1536px-cap’d main rather than the full
viewport.
| /> | ||
| <h1 | ||
| className={`lg:top[20%] absolute left-[14%] top-[15%] -rotate-[5deg] text-[4.5vw] font-medium sm:text-[1.5vw] lg:left-[15%] lg:text-[2.75vw] ${shadows.className}`} | ||
| className={`lg:top[20%] absolute left-[14%] top-[15%] -rotate-[5deg] text-[4.5cqw] font-medium sm:text-[1.5cqw] lg:left-[15%] lg:text-[2.75cqw] ${shadows.className}`} |
There was a problem hiding this comment.
🎯 Functional Correctness | 🔴 Critical | ⚡ Quick win
Fix invalid Tailwind class lg:top[20%] — missing dash.
lg:top[20%] is not valid Tailwind syntax. Arbitrary values require a dash separator: lg:top-[20%]. Without it, Tailwind's JIT compiler won't generate any CSS, so the top offset at the lg breakpoint for the "Help Wanted" heading is silently ignored, causing a positioning bug on large screens.
🐛 Proposed fix
- className={`lg:top[20%] absolute left-[14%] top-[15%] -rotate-[5deg] text-[4.5cqw] font-medium sm:text-[1.5cqw] lg:left-[15%] lg:text-[2.75cqw] ${shadows.className}`}
+ className={`lg:top-[20%] absolute left-[14%] top-[15%] -rotate-[5deg] text-[4.5cqw] font-medium sm:text-[1.5cqw] lg:left-[15%] lg:text-[2.75cqw] ${shadows.className}`}📝 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.
| className={`lg:top[20%] absolute left-[14%] top-[15%] -rotate-[5deg] text-[4.5cqw] font-medium sm:text-[1.5cqw] lg:left-[15%] lg:text-[2.75cqw] ${shadows.className}`} | |
| className={`lg:top-[20%] absolute left-[14%] top-[15%] -rotate-[5deg] text-[4.5cqw] font-medium sm:text-[1.5cqw] lg:left-[15%] lg:text-[2.75cqw] ${shadows.className}`} |
🤖 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/landing/Hero.tsx` at line 129, The Tailwind class on
the “Help Wanted” heading uses invalid arbitrary-value syntax, so the
large-screen top offset is never generated. Update the className in Hero.tsx to
use the correct Tailwind form with a dash for the lg breakpoint offset, and
verify the surrounding positioning classes still behave as expected.
|
|
||
| return ( | ||
| <section className="relative w-full flex items-center justify-center pb-[12vw] sm:pb-[3vw] md:pb-[5vw]" id="About"> | ||
| <section className="relative w-full flex items-center justify-center pb-[12cqw] sm:pb-[3cqw] md:pb-[5cqw] [container-type:inline-size]" id="Map"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟠 Major | ⚡ Quick win
Section-level cqw padding won't be container-relative — parent <main> lacks container-type.
CSS container query units on an element resolve against the nearest ancestor container, not the element itself. The <main> in page.tsx (className="mx-auto w-full max-w-[1536px]") has no container-type:inline-size, so pb-[12cqw], sm:pb-[3cqw], and md:pb-[5cqw] on this section fall back to the small-viewport size — equivalent to the old vw behavior. On screens wider than 1536px the padding will still scale with the full viewport, not the capped 1536px container, which is the exact issue this PR aims to fix.
The same issue affects Partners.tsx line 39 (sm:pb-[3cqw], md:pb-[5cqw]).
Fix: Add [container-type:inline-size] to the <main> element in page.tsx so that direct-child sections' cqw units resolve against the 1536px container.
// apps/web/src/app/page.tsx
- <main className="mx-auto w-full max-w-[1536px]">
+ <main className="mx-auto w-full max-w-[1536px] [container-type:inline-size]">Note: child elements within this section (lines 99, 122, 146, 203, 214) that use cqw resolve against this section (which has container-type), so they work correctly regardless.
🤖 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/landing/Map.tsx` at line 88, The `Map` and `Partners`
sections are using `cqw` padding, but those units won’t resolve against the
capped 1536px layout unless an ancestor container exists. Add
`container-type:inline-size` to the top-level `<main>` in `page.tsx` so the
`Map` section’s `pb-[12cqw]`/`sm:pb-[3cqw]`/`md:pb-[5cqw]` and the matching
`Partners.tsx` padding resolve against the intended container instead of the
viewport. Keep the section-level container type on `Map` for its child `cqw`
usage, but make sure the ancestor container is the `<main>` element.
| return ( | ||
| <div | ||
| className="z-40 h-auto w-[40vw] rounded-[3px] bg-[#F0EDE7] px-[5%] pb-[15%] pt-[12%] shadow-[0_7px_10px_rgba(0,0,0,0.28)] drop-shadow-[2px_5px_1px_rgba(0,0,0,0.45)] sm:w-[25vw] sm:pb-[18%] md:w-[15vw] md:w-[21vw] md:pb-[20%] lg:w-[16vw] lg:pb-[23%] xl:w-[16vw] xl:pb-[22%]" | ||
| className="z-40 h-auto w-[40cqw] rounded-[3px] bg-[#F0EDE7] px-[5%] pb-[15%] pt-[12%] shadow-[0_7px_10px_rgba(0,0,0,0.28)] drop-shadow-[2px_5px_1px_rgba(0,0,0,0.45)] sm:w-[25cqw] sm:pb-[18%] md:w-[15cqw] md:w-[21cqw] md:pb-[20%] lg:w-[16cqw] lg:pb-[23%] xl:w-[16cqw] xl:pb-[22%]" |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟡 Minor | ⚡ Quick win
Duplicate md:w-[15cqw] and md:w-[21cqw] at the same breakpoint.
Both classes target md: width, so md:w-[21cqw] overrides md:w-[15cqw], making the latter dead code. The width progression (40→25→21→16→16) suggests md:w-[15cqw] is a leftover that should be removed.
🧹 Proposed fix
-className="z-40 h-auto w-[40cqw] rounded-[3px] bg-[`#F0EDE7`] px-[5%] pb-[15%] pt-[12%] shadow-[0_7px_10px_rgba(0,0,0,0.28)] drop-shadow-[2px_5px_1px_rgba(0,0,0,0.45)] sm:w-[25cqw] sm:pb-[18%] md:w-[15cqw] md:w-[21cqw] md:pb-[20%] lg:w-[16cqw] lg:pb-[23%] xl:w-[16cqw] xl:pb-[22%]"
+className="z-40 h-auto w-[40cqw] rounded-[3px] bg-[`#F0EDE7`] px-[5%] pb-[15%] pt-[12%] shadow-[0_7px_10px_rgba(0,0,0,0.28)] drop-shadow-[2px_5px_1px_rgba(0,0,0,0.45)] sm:w-[25cqw] sm:pb-[18%] md:w-[21cqw] md:pb-[20%] lg:w-[16cqw] lg:pb-[23%] xl:w-[16cqw] xl:pb-[22%]"📝 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.
| className="z-40 h-auto w-[40cqw] rounded-[3px] bg-[#F0EDE7] px-[5%] pb-[15%] pt-[12%] shadow-[0_7px_10px_rgba(0,0,0,0.28)] drop-shadow-[2px_5px_1px_rgba(0,0,0,0.45)] sm:w-[25cqw] sm:pb-[18%] md:w-[15cqw] md:w-[21cqw] md:pb-[20%] lg:w-[16cqw] lg:pb-[23%] xl:w-[16cqw] xl:pb-[22%]" | |
| className="z-40 h-auto w-[40cqw] rounded-[3px] bg-[`#F0EDE7`] px-[5%] pb-[15%] pt-[12%] shadow-[0_7px_10px_rgba(0,0,0,0.28)] drop-shadow-[2px_5px_1px_rgba(0,0,0,0.45)] sm:w-[25cqw] sm:pb-[18%] md:w-[21cqw] md:pb-[20%] lg:w-[16cqw] lg:pb-[23%] xl:w-[16cqw] xl:pb-[22%]" |
🤖 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/landing/WorkWithUs.tsx` at line 50, The className on
WorkWithUs contains duplicate md width utilities, so the earlier md:w-[15cqw] is
overridden by md:w-[21cqw] and serves no purpose. Update the responsive width
set in the WorkWithUs component to keep only the intended md breakpoint width,
removing the redundant utility so the breakpoint progression remains clean and
unambiguous.
| id="WorkWithUs" | ||
| > | ||
| <div className="w-full px-[3vw]"> | ||
| <section className="relative flex w-full items-center justify-center pb-[12cqw] sm:pb-[3cqw] md:pb-[5cqw] [container-type:inline-size]" id="WorkWithUs"> |
There was a problem hiding this comment.
🎯 Functional Correctness | 🟡 Minor | ⚡ Quick win
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
# Check if any ancestor of WorkWithUs has container-type set
rg -n 'container-type' apps/web/src/app/page.tsx apps/web/src/app/layout.tsx apps/web/src/app/globals.css 2>/dev/nullRepository: acmutsa/RowdyHacksXII
Length of output: 159
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== Relevant files =="
git ls-files 'apps/web/src/app/*' 'apps/web/src/components/landing/WorkWithUs.tsx'
echo
echo "== WorkWithUs section context =="
sed -n '180,240p' apps/web/src/components/landing/WorkWithUs.tsx
echo
echo "== Search for container/query-related styles in web app =="
rg -n 'container-type|container\(|cqw|cqh|cqi|cqmin|cqmax' apps/web/src -g '!**/node_modules/**' -g '!**/dist/**' -g '!**/build/**'Repository: acmutsa/RowdyHacksXII
Length of output: 10439
🏁 Script executed:
#!/bin/bash
set -euo pipefail
python3 - <<'PY'
from pathlib import Path
# Print just the component's immediate parents/ancestor structure from the source
path = Path('apps/web/src/components/landing/WorkWithUs.tsx')
text = path.read_text()
for needle in ['<main', 'container-type', 'pb-[12cqw]', 'sm:pb-[3cqw]', 'md:pb-[5cqw]']:
print(f"{needle}: {text.count(needle)}")
PYRepository: acmutsa/RowdyHacksXII
Length of output: 232
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== page.tsx around landing sections =="
sed -n '1,220p' apps/web/src/app/page.tsx
echo
echo "== app/layout.tsx =="
sed -n '1,220p' apps/web/src/app/layout.tsxRepository: acmutsa/RowdyHacksXII
Length of output: 1649
🏁 Script executed:
#!/bin/bash
set -euo pipefail
echo "== page.tsx around landing sections =="
sed -n '1,220p' apps/web/src/app/page.tsx
echo
echo "== app/layout.tsx =="
sed -n '1,220p' apps/web/src/app/layout.tsx
echo
echo "== WorkWithUs usage site =="
rg -n 'WorkWithUs|<main|container-type' apps/web/src/app/page.tsx apps/web/src/app/layout.tsxRepository: acmutsa/RowdyHacksXII
Length of output: 1894
cqw here falls back to an ancestor container, not this section
container-type:inline-size on the <section> only applies to its descendants. With no query container on <main>, the bottom padding is viewport-based instead of section-based. Move the padding to an inner wrapper or add container-type:inline-size to <main>.
🤖 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/landing/WorkWithUs.tsx` at line 201, The bottom
padding on WorkWithUs is using cqw without a matching query container on the
section itself, so it resolves against an ancestor instead of this component.
Update WorkWithUs by either moving the padding classes to an inner wrapper that
is inside the container, or adding container-type:inline-size to the nearest
appropriate parent such as the main layout element so the cqw-based padding is
scoped correctly.
2 participants
Summary by CodeRabbit
New Features
Bug Fixes