fix(landing): responsive QA — navbar accessibility + hero layout 375px–1440px — closes #117 by prasanna-0806 · Pull Request #146 · patchid/func-kode

prasanna-0806 · 2026-06-09T14:10:30Z

Parent Epic

Part of #116 — Landing Page Responsiveness, Dashboard UI Cleanup & Frontend–Backend Integration QA

Depends on: #97 (HeroSection) — merged as PR #133 ✅

Closes issue #117

🎯 Objective

Full responsive QA pass of the landing page at every standard breakpoint. Bugs found during QA are fixed in this PR.

✅ QA Checklist

Breakpoint — 375px (iPhone SE / most common mobile)

No horizontal overflow or scrollbar
Navbar: hamburger menu visible, logo visible, no clipping
Mobile menu: opens, closes with X, closes on backdrop click, closes on Escape
Hero: stacked single-column, heading readable, CTAs full-width or natural width
HeroEditorMockup image: visible and not clipped
Background decorative layers: not bleeding outside viewport
No text smaller than 14px visible
Touch targets: all buttons/links ≥ 44×44px

📸 375px screenshot:

Breakpoint — 768px (iPad portrait)

No horizontal overflow
Navbar: hamburger visible (correct — desktop nav starts at 1024px)
Hero: stacked single-column, correct for this width
Background layers: correct scale, no white gaps at edges

📸 768px screenshot:

Breakpoint — 1024px (laptop small)

Desktop Navbar visible with full nav links
Two-column hero active (copy left, mockup right)
No absolute pixel positioning artefacts from Figma coordinates
Fork count badge visible in Navbar

📸 1024px screenshot:

Breakpoint — 1280px (laptop standard)

Two-column layout comfortable with natural spacing
Hero heading size appropriate (not oversized or too small)
Background decorative SVGs positioned correctly relative to content

📸 1280px screenshot:

Breakpoint — 1440px (Figma reference width)

Pixel-perfect match to Figma design for Navbar, HeroSection, LandingBackground
Version badge visible next to logo
GitHub fork count visible
All nav links visible in desktop nav (no overflow or truncation)

📸 1440px screenshot:

🐛 Bugs Found & Fixed

`components/navbar.tsx`

X close button invisible when menu open — button container z-10 < overlay z-40; bumped to z-50
Fork count + Connect overlapping open menu — wrapped in {!open && ...} so they unmount when menu opens
Logo link touch target 40px — added min-h-[44px] flex items-center (WCAG 2.5.5 minimum)
Version badge 12px in mobile menu — text-xs → text-sm (14px minimum)
"Contact Us" clipping at 1024px — desktop nav gap-3 → gap-2, prevents last link overflow

`components/landing/hero-section.tsx`

Hero mockup too small at 1024px — lg:px-landing-canvas (122px) applied from 1024px squished mockup to ~289px; changed to lg:px-[60px] xl:px-landing-canvas giving ~413px at 1024px

`app/page.tsx`

Added min-h-screen bg-landing-dark to page root for correct background coverage

🚨 Known Issues — Verified

Symptom	Result
Layout broken at 1024–1439px	✅ Fixed by PR #133 — intermediate `lg:` breakpoints already present
Absolute position elements floating	✅ `left-[541px]` only in a comment — actual code uses CSS custom property
Navbar appears twice on `/`	✅ `SiteChrome` skips Navbar when `pathname === "/"`
Background SVGs overflow on mobile	✅ `overflow-x-hidden` present on page root div

✅ Acceptance Criteria

All checkboxes above ticked
Screenshots attached for each breakpoint
No new issues requiring separate filing found
No hardcoded Figma pixel heights (e.g. min-h-[4727px]) in any component

* Resolve navbar accessibility and responsive layout issues * Refine hero section layout across supported breakpoints * Update navbar and hero-section documentation * Verify behavior at 375px, 768px, 1024px, 1280px, and 1440px

basanth-p

Review — fix(landing): responsive QA — navbar accessibility + hero layout 375px–1440px

Excellent QA PR. Every bug is well-identified, the fixes are targeted and correct, screenshots are attached for all 5 breakpoints, and the docs are kept in sync. This is exactly the quality of QA work we want to see.

✅ All Fixes Confirmed

Bug	Fix	Status
X close button invisible when menu open	`z-10` → `z-50` on button container	✅ Correct
Fork count + Connect overlapping open menu	`{!open && ...}` unmount guard	✅ Correct
Logo link touch target < 44px	`min-h-[44px] flex items-center` on `<Link>`	✅ WCAG 2.5.5
Version badge 12px in mobile menu	`text-xs` → `text-sm`	✅ 14px minimum
"Contact Us" clipping at 1024px	`gap-4` → `gap-2` on desktop nav	✅ Correct
Desktop nav hidden until 1280px	`xl:flex` → `lg:flex` (consistent with menu breakpoint)	✅ Correct
Hero mockup too small at 1024px	`lg:px-[60px] xl:px-landing-canvas` two-step padding	✅ Correct
Background flash on tall viewports	`min-h-screen bg-landing-dark` on page root	✅ Correct

🟡 One Minor Follow-up (non-blocking)

At exactly 1024px–1100px, confirm the desktop nav items don’t wrap — the 1024px screenshot looks good but a quick manual check across the full 1024–1279px range (particularly 1040–1060px) would confirm gap-2 is sufficient for all nav items. See inline comment.

Approved. The base branch is fix/ui-tweaks — make sure that branch is itself reviewed and merged to dev before this lands.

basanth-p · 2026-06-10T07:31:16Z


  return (
-    <header className="relative z-50 w-full px-5 pt-[41px] sm:px-8 lg:px-[122px]">
+    <header className="relative z-50 w-full px-5 pt-[41px] sm:px-8 lg:px-10 xl:px-[122px]">


✅ Good fix — z-10 → z-50 on the right-side button container is the correct fix. The close (X) button was sitting behind the z-40 overlay, making it invisible to the user when the mobile menu was open. This restores the expected interaction.

basanth-p · 2026-06-10T07:31:33Z

-    <header className="relative z-50 w-full px-5 pt-[41px] sm:px-8 lg:px-[122px]">
+    <header className="relative z-50 w-full px-5 pt-[41px] sm:px-8 lg:px-10 xl:px-[122px]">
      <div className="relative flex min-h-10 items-center justify-between gap-3 lg:gap-4">
        <div className="flex min-w-0 flex-1 items-center gap-3 sm:gap-4">


✅ Good fix — Wrapping the fork button and Connect/user menu in {!open && (...)} correctly unmounts them when the mobile menu is open. This prevents them from rendering above the overlay at sm–lg viewports and competing with the drawer UI.

One minor note: this means the GitHubForkButton and user menu are unmounted (not just hidden) during menu open — which is fine behaviourally, but worth being aware of if either component has any subscription or async side-effect on mount/unmount. Given they appear to be pure display components, this is safe.

basanth-p · 2026-06-10T07:31:49Z

+          <Link href="/" className="relative z-10 flex min-h-[44px] shrink-0 items-center" onClick={close}>
            <Image
              src={LANDING_ASSETS.logo}
              alt="func(kode) logo"


✅ Good WCAG fix — Adding flex min-h-[44px] items-center to the logo <Link> brings the touch target up to the WCAG 2.5.5 minimum of 44×44px. The previous shrink-0 alone did not guarantee a minimum height.

basanth-p · 2026-06-10T07:32:05Z


          <nav
-            className="hidden min-w-0 items-center gap-4 overflow-hidden xl:flex xl:gap-6 2xl:gap-8"
+            className="hidden min-w-0 items-center gap-2 overflow-hidden lg:flex xl:gap-6 2xl:gap-8"


🟡 Notable: desktop nav breakpoint shift xl → lg

The primary nav switches from xl:flex (1280px+) to lg:flex (1024px+). This is consistent with the mobile menu breakpoint change (xl:hidden → lg:hidden) and the hero layout becoming two-column at lg. The breakpoints are internally consistent. ✅

However, at exactly 1024px the desktop nav now shows with gap-2 (8px) between items. Please verify that all nav items fit without overflow or ellipsis at 1024px — the PR description mentions "Contact Us" was clipping at this width, and gap-2 was the fix, but it’s worth confirming there’s no wrapping either. The 1024px screenshot in the PR description looks good, but a quick check at 1025px–1100px would confirm the fix holds across the full range.

basanth-p · 2026-06-10T07:32:17Z

        >
          {RELEASE_VERSION ? (
-            <p className="mb-2 px-3 text-xs font-bold uppercase tracking-wider text-white/50">
+            <p className="mb-2 px-3 text-sm font-bold uppercase tracking-wider text-white/50">


✅ Good fix — text-xs (12px) → text-sm (14px) for the version badge in the mobile menu. WCAG SC 1.4.4 and general mobile readability guidelines recommend a minimum of 14px for body/label text. The previous 12px was below that threshold.

basanth-p · 2026-06-10T07:32:33Z

          <GitHubForkButton
            forkCount={forkCount}
-            className="mt-2 flex overflow-hidden rounded-full border border-white/20"
+            className="mt-2 flex w-fit min-h-[44px] overflow-hidden rounded-full border border-white/20"


✅ Good fix — Adding w-fit min-h-[44px] to the in-drawer GitHubForkButton ensures it doesn’t stretch full-width and meets the 44px touch target minimum. Consistent with the logo link fix above.

basanth-p · 2026-06-10T07:32:48Z

      <div
        className="
          relative flex flex-col items-center gap-10 px-5 pt-10
          sm:px-8


✅ Good responsive fix — Adding lg:flex-row lg:items-center lg:justify-between lg:px-[60px] lg:pt-16 lg:gap-8 and xl:px-landing-canvas introduces the two-column layout at 1024px while using a tighter 60px canvas padding (vs 122px at xl). This is the right approach — the 122px canvas at lg was squishing the mockup to ~289px which was too small for the design to read clearly.

basanth-p · 2026-06-10T07:33:10Z

          className="
            z-0 mx-auto w-full max-w-[822px]
+            lg:flex-1 lg:mx-0
            min-[1440px]:absolute min-[1440px]:top-0 min-[1440px]:mx-0


🟡 Notable: lg:flex-1 on the mockup wrapper

lg:flex-1 lets the mockup grow to fill remaining space in the flex row. This is correct for the two-column layout. The existing max-w-[822px] on this wrapper correctly caps the mockup so it doesn’t stretch indefinitely on wide lg viewports before xl kicks in. Looks correct as-is. ✅

basanth-p · 2026-06-10T07:33:24Z

 export default function HomePage() {
  return (
-    <div className={`relative w-full overflow-x-hidden ${poppins.className}`}>
+    <div className={`relative w-full overflow-x-hidden min-h-screen bg-landing-dark ${poppins.className}`}>


✅ Good fix — Adding min-h-screen bg-landing-dark to the page root ensures the dark background colour fills the full viewport height even when the hero content is shorter than the screen (e.g. on very tall displays or if the section collapses). Without this, you’d get a flash of white/unstyled background below the content.

prasanna-0806 · 2026-06-10T12:54:03Z

Follow-up on 🟡 notables:

Verified nav items at 1040px, 1060px, and 1100px — no wrapping or clipping across the full 1024–1279px range. All five items (func(kode), How It Works, Teams & Platforms, For Developers, Contact Us) fit cleanly with gap-2. Screenshots attached below confirm this holds.

lg:flex-1 on the mockup wrapper — noted, understood. The max-w-[822px] cap prevents over-stretching before xl kicks in.

prasanna-0806 force-pushed the fix/issue-117-responsive-qa branch from dda53e0 to 86c54a4 Compare June 9, 2026 14:41

basanth-p approved these changes Jun 10, 2026

View reviewed changes

basanth-p merged commit bfb7af1 into patchid:fix/ui-tweaks Jun 10, 2026

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

fix(landing): responsive QA — navbar accessibility + hero layout 375px–1440px — closes #117#146

fix(landing): responsive QA — navbar accessibility + hero layout 375px–1440px — closes #117#146
basanth-p merged 1 commit into
patchid:fix/ui-tweaksfrom
prasanna-0806:fix/issue-117-responsive-qa

prasanna-0806 commented Jun 9, 2026

Uh oh!

basanth-p left a comment

Uh oh!

basanth-p Jun 10, 2026

Uh oh!

basanth-p Jun 10, 2026

Uh oh!

basanth-p Jun 10, 2026

Uh oh!

basanth-p Jun 10, 2026

Uh oh!

basanth-p Jun 10, 2026

Uh oh!

basanth-p Jun 10, 2026

Uh oh!

basanth-p Jun 10, 2026

Uh oh!

basanth-p Jun 10, 2026

Uh oh!

basanth-p Jun 10, 2026

Uh oh!

prasanna-0806 commented Jun 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

prasanna-0806 commented Jun 9, 2026

Parent Epic

🎯 Objective

✅ QA Checklist

Breakpoint — 375px (iPhone SE / most common mobile)

Breakpoint — 768px (iPad portrait)

Breakpoint — 1024px (laptop small)

Breakpoint — 1280px (laptop standard)

Breakpoint — 1440px (Figma reference width)

🐛 Bugs Found & Fixed

components/navbar.tsx

components/landing/hero-section.tsx

app/page.tsx

🚨 Known Issues — Verified

✅ Acceptance Criteria

Uh oh!

basanth-p left a comment

Choose a reason for hiding this comment

Review — fix(landing): responsive QA — navbar accessibility + hero layout 375px–1440px

✅ All Fixes Confirmed

🟡 One Minor Follow-up (non-blocking)

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

prasanna-0806 commented Jun 10, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

`components/navbar.tsx`

`components/landing/hero-section.tsx`

`app/page.tsx`