From 6b5ea7781d9aeb0b029f3ae900a438ac6aac4216 Mon Sep 17 00:00:00 2001
From: sheeeuWu <shefali22119@gmail.com>
Date: Fri, 3 Jul 2026 18:22:59 +0530
Subject: [PATCH] test(HeroSection-responsive-breakpoints): verify Responsive
 Multi-device Columns & Mobile Viewport Layouts

---
 app/achievements/AchievementsClient.tsx       |  2 +-
 ...eroSection.responsive-breakpoints.test.tsx | 51 +++++++++++++++++++
 2 files changed, 52 insertions(+), 1 deletion(-)
 create mode 100644 app/components/HeroSection.responsive-breakpoints.test.tsx

diff --git a/app/achievements/AchievementsClient.tsx b/app/achievements/AchievementsClient.tsx
index 05c7ba384..38c35dc8b 100644
--- a/app/achievements/AchievementsClient.tsx
+++ b/app/achievements/AchievementsClient.tsx
@@ -806,7 +806,7 @@ export default function AchievementsClient() {
               </motion.div>
             )}
 
-            <div className="mt-12 text-center text-xs text-white/20">
+            <div className="mt-12 text-center text-xs text-zinc-600 dark:text-zinc-400">
               Achievements calculated from real-time GitHub data
             </div>
           </>
diff --git a/app/components/HeroSection.responsive-breakpoints.test.tsx b/app/components/HeroSection.responsive-breakpoints.test.tsx
new file mode 100644
index 000000000..8f13a27e0
--- /dev/null
+++ b/app/components/HeroSection.responsive-breakpoints.test.tsx
@@ -0,0 +1,51 @@
+import { render, screen } from '@testing-library/react';
+import { describe, it, expect } from 'vitest';
+import { HeroSection } from './HeroSection';
+import '@testing-library/jest-dom';
+
+describe('HeroSection Responsive Breakpoints', () => {
+  it('renders the hero heading with responsive text size classes (mobile default, larger at md breakpoint)', () => {
+    const { container } = render(<HeroSection />);
+
+    const heading = container.querySelector('h1')!;
+    expect(heading).toHaveClass('text-5xl');
+    expect(heading).toHaveClass('md:text-8xl');
+  });
+
+  it('stacks the search form vertically by default and switches to a horizontal row at the sm breakpoint', () => {
+    render(<HeroSection />);
+
+    const searchForm = screen.getByRole('search', { name: 'Generate your GitHub streak badge' });
+
+    expect(searchForm).toHaveClass('flex');
+    expect(searchForm).toHaveClass('flex-col');
+    expect(searchForm).toHaveClass('sm:flex-row');
+  });
+
+  it('does not use fixed pixel widths anywhere that could cause horizontal overflow on narrow viewports', () => {
+    const { container } = render(<HeroSection />);
+
+    const allEls = container.querySelectorAll('[class]');
+    allEls.forEach((el) => {
+      const classes = el.getAttribute('class') || '';
+      expect(classes).not.toMatch(/\bw-\[\d+px\]/);
+      expect(classes).not.toMatch(/\bmin-w-\[\d+px\]/);
+    });
+  });
+
+  it('renders the username input with a fluid full width instead of a fixed width', () => {
+    render(<HeroSection />);
+
+    const input = screen.getByLabelText('GitHub username');
+
+    expect(input).toHaveClass('w-full');
+    expect(input).toHaveClass('flex-1');
+  });
+
+  it('wraps contribution stat badges instead of overflowing horizontally on narrow viewports', () => {
+    render(<HeroSection />);
+
+    const badgesRow = screen.getByText('● 1,247 Contributions').parentElement;
+    expect(badgesRow).toHaveClass('flex-wrap');
+  });
+});