fix: Improve website responsiveness across mobile and tablet viewports

[utkarsh232005]

Description

The website's layout is currently not fully optimized for smaller screens. Certain components, text, or layout structures break or overlap when viewed on mobile devices and tablets, impacting the overall user experience.

Expected Behavior

The layout should fluidly adapt to various screen sizes (Mobile, Tablet, Desktop) using media queries or flexible layouts, ensuring all content remains readable and accessible.

Steps to Reproduce

1. Open the website on a mobile browser or use DevTools to simulate a mobile viewport (e.g., width < 768px).
2. Observe layout shifts, overflowing elements, or misaligned text.

Proposed Solution

• Add CSS media queries for standard breakpoints (768px, 1024px).
• Ensure flexible grid/flexbox layouts are utilized for container elements.
• Check and fix any overflow issues (overflow-x).

Desktop / Mobile Viewport

• OS: [e.g., Windows, macOS, Android, iOS]
• Browser: [e.g., Chrome, Safari]

[utkarsh232005]

@CodeRabbit plan

[utkarsh232005]

@KDM-cli/core

[coderabbitai]

Coding Plan

Summary

• Leverage existing shadcn/ui Sheet component to implement a mobile navigation drawer, following established patterns in the codebase
• Apply Tailwind's mobile-first responsive prefixes to fix grid layouts and spacing without introducing custom CSS media queries
• Focus on the four specific components identified with responsiveness issues: Navbar, Hero, Terminal, and Commands
• Maintain consistency with the existing xAI-inspired monochrome design system while improving mobile usability

Implementation Steps

Phase 1: Mobile Navigation

Restore full navigation access on mobile viewports by adding a hamburger menu that opens a drawer with all navigation links. This is the highest-priority fix since navigation is currently inaccessible below the md breakpoint.

Add Mobile Hamburger Menu to Navbar

Implement a mobile-friendly navigation drawer using the existing shadcn Sheet component, triggered by a hamburger icon visible only on mobile.

• Update src/components/Navbar.tsx to import Sheet, SheetTrigger, SheetContent, and SheetClose from @/components/ui/sheet
• Add a hamburger menu icon button (using Lucide's Menu icon) that displays only on mobile (md:hidden)
• Wrap the hamburger button in SheetTrigger and render SheetContent containing vertical navigation links (Features, Commands, Docs) plus the GitHub CTA button
• Ensure navigation links inside the Sheet close the drawer on click (use SheetClose or state management)
• Keep the existing desktop navigation (hidden md:flex) unchanged

🤖 Prompt for AI agents

Implement a mobile hamburger navigation drawer in `src/components/Navbar.tsx`
using the existing shadcn/ui Sheet component. The goal is to restore navigation
access on mobile viewports below the `md` breakpoint.

- Import `Sheet`, `SheetTrigger`, `SheetContent`, and `SheetClose` from
`@/components/ui/sheet`
- Import Lucide's `Menu` icon for the hamburger button
- Add a hamburger icon button wrapped in `SheetTrigger` that is only visible on
mobile using the `md:hidden` Tailwind class
- Inside `SheetContent`, render vertical navigation links for Features,
Commands, and Docs, plus the GitHub CTA button
- Ensure each navigation link inside the Sheet closes the drawer on click — use
`SheetClose` wrapper or state management to achieve this
- Leave the existing desktop navigation (currently `hidden md:flex`) completely
unchanged

Phase 2: Homepage Component Responsiveness

Address visual overflow and spacing issues in the homepage hero and terminal components that degrade the mobile experience.

Task 1: Make Hero Stats Grid Responsive

Fix the 3-column stats grid that currently lacks responsive breakpoints, causing content to overflow on narrow viewports.

• Update src/components/Hero.tsx stats container (around line 55) to use responsive grid classes
• Change from grid grid-cols-3 to a mobile-first approach: single column or smaller text on mobile, expanding to 3 columns at sm: or md: breakpoint
• Reduce the stat value font size on mobile (e.g., text-2xl sm:text-3xl) to prevent overflow in narrow columns
• Verify the stat labels remain readable at all breakpoints

Task 2: Reduce Terminal Minimum Height on Mobile

Adjust the fixed minimum height that causes excessive blank space on mobile devices during and after the typing animation.

• Update src/components/Terminal.tsx (line 33) to use responsive min-height classes
• Change from min-h-[360px] to a mobile-first approach such as min-h-[240px] md:min-h-[360px]
• Ensure the terminal window still accommodates the full animation output on larger screens

🤖 Prompt for AI agents

Fix overflow and spacing issues in two homepage components using Tailwind's
mobile-first responsive prefixes. No custom CSS media queries should be
introduced.

**Hero Stats Grid (`src/components/Hero.tsx`, ~line 55):**
- Change the stats container from `grid grid-cols-3` to a mobile-first
responsive grid (e.g., single column on mobile, expanding to 3 columns at the
`sm:` or `md:` breakpoint)
- Reduce the stat value font size on mobile (e.g., `text-2xl sm:text-3xl`) to
prevent overflow on narrow viewports
- Verify stat labels remain readable at all breakpoints

**Terminal Min-Height (`src/components/Terminal.tsx`, line 33):**
- Change `min-h-[360px]` to a responsive value such as `min-h-[240px]
md:min-h-[360px]`
- Ensure the terminal still fully accommodates the animation output on larger
screens

Phase 3: Commands Section Responsiveness

Fix the command tab navigation that becomes cramped and potentially unreachable on mobile due to horizontal overflow without scroll affordance.

Improve Commands Tab Navigation for Mobile

Make the horizontal tab strip usable on mobile by either enabling horizontal scrolling with visible affordance or restructuring the layout.

• Update src/components/Commands.tsx tab container (around line 66) to handle mobile overflow gracefully
• Option A: Add overflow-x-auto to the flex container and consider adding scroll snap or visual scroll indicators
• Option B: Change the mobile layout from horizontal flex to a vertical stack or a more compact grid
• Remove or conditionalize whitespace-nowrap on tab buttons so text can wrap on very narrow screens if needed
• Ensure all four command tabs remain tappable with adequate touch target size (minimum 44px height recommended)
• Test that the selected tab state and command output display correctly after layout changes

🤖 Prompt for AI agents

Improve the horizontal tab navigation in `src/components/Commands.tsx` (~line
66) to be usable on mobile viewports. The goal is to ensure all four command
tabs are reachable and tappable without layout breakage.

- Update the tab container to handle mobile overflow gracefully using one of the
following approaches:
- **Option A:** Add `overflow-x-auto` to the flex container, and optionally add
scroll snap or visual scroll indicators for affordance
- **Option B:** Change the mobile layout from a horizontal flex row to a
vertical stack or compact grid
- Remove or conditionalize `whitespace-nowrap` on tab buttons to allow text
wrapping on very narrow screens if needed
- Ensure each tab button meets the minimum recommended touch target size of 44px
height
- Verify that the selected tab state and the command output panel display
correctly after any layout changes

Research

The project is a TanStack Start application using Tailwind CSS v4 with shadcn/ui components (New York style) built on Radix UI primitives. Responsiveness is handled through Tailwind's responsive prefixes (sm:, md:, lg:) applied at the component level—there are no custom media queries in the global stylesheet. The codebase already includes a Sheet component from shadcn/ui that can serve as a mobile drawer. Key layout components include Navbar (sticky top navigation), Hero (landing section with stats grid), Commands (tabbed command explorer), and Terminal (animated CLI output display).

---

🚀 Next Steps

🤖 All AI agent prompts combined

Task: 1

Implement a mobile hamburger navigation drawer in `src/components/Navbar.tsx`
using the existing shadcn/ui Sheet component. The goal is to restore navigation
access on mobile viewports below the `md` breakpoint.

- Import `Sheet`, `SheetTrigger`, `SheetContent`, and `SheetClose` from
`@/components/ui/sheet`
- Import Lucide's `Menu` icon for the hamburger button
- Add a hamburger icon button wrapped in `SheetTrigger` that is only visible on
mobile using the `md:hidden` Tailwind class
- Inside `SheetContent`, render vertical navigation links for Features,
Commands, and Docs, plus the GitHub CTA button
- Ensure each navigation link inside the Sheet closes the drawer on click — use
`SheetClose` wrapper or state management to achieve this
- Leave the existing desktop navigation (currently `hidden md:flex`) completely
unchanged
===============================================================================

Task: 2

Fix overflow and spacing issues in two homepage components using Tailwind's
mobile-first responsive prefixes. No custom CSS media queries should be
introduced.

**Hero Stats Grid (`src/components/Hero.tsx`, ~line 55):**
- Change the stats container from `grid grid-cols-3` to a mobile-first
responsive grid (e.g., single column on mobile, expanding to 3 columns at the
`sm:` or `md:` breakpoint)
- Reduce the stat value font size on mobile (e.g., `text-2xl sm:text-3xl`) to
prevent overflow on narrow viewports
- Verify stat labels remain readable at all breakpoints

**Terminal Min-Height (`src/components/Terminal.tsx`, line 33):**
- Change `min-h-[360px]` to a responsive value such as `min-h-[240px]
md:min-h-[360px]`
- Ensure the terminal still fully accommodates the animation output on larger
screens
===============================================================================

Task: 3

Improve the horizontal tab navigation in `src/components/Commands.tsx` (~line
66) to be usable on mobile viewports. The goal is to ensure all four command
tabs are reachable and tappable without layout breakage.

- Update the tab container to handle mobile overflow gracefully using one of the
following approaches:
- **Option A:** Add `overflow-x-auto` to the flex container, and optionally add
scroll snap or visual scroll indicators for affordance
- **Option B:** Change the mobile layout from a horizontal flex row to a
vertical stack or compact grid
- Remove or conditionalize `whitespace-nowrap` on tab buttons to allow text
wrapping on very narrow screens if needed
- Ensure each tab button meets the minimum recommended touch target size of 44px
height
- Verify that the selected tab state and the command output panel display
correctly after any layout changes

💡 Iterate on the plan with: `@coderabbitai` <feedback>

Example Feedback
- `@coderabbitai` You can skip phase 3. Add a simple unit test case for phase 2.
- `@coderabbitai` For design choice 1 go ahead with option 3 and replan.

---

💬 Have feedback or questions? Drop into our discord!

[Yuvraj-Sarathe]

@KDM-cli/core Shall I look into this?

[utkarsh232005]

@KDM-cli/core Shall I look into this?

sure!!

[utkarsh232005]

@Yuvraj-Sarathe recreate a fresh pr for this issue