Improve repository listing page responsiveness for mobile devices #242
Conversation
|
@anuja12mishra is attempting to deploy a commit to the Max Programming's projects Team on Vercel. A member of the Team first needs to authorize it. |
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Hey nice work @anuja12mishra 
Also I noticed the navbar overflows on some screens. Would be nice if you fixed that too |
|
@max-programming, |
There was a problem hiding this comment.
Here's the build error
21:37:24.387 > [email protected] build /vercel/path0
21:37:24.387 > next build
21:37:24.387
21:37:25.187 ▲ Next.js 15.4.5
21:37:25.188 - Experiments (use with caution):
21:37:25.188 ✓ viewTransition
21:37:25.188
21:37:25.247 Creating an optimized production build ...
21:37:34.151 Failed to compile.
21:37:34.151
21:37:34.151 ./src/app/(public)/_components/hero.tsx
21:37:34.151 Error: �[31mx�[0m You're importing a component that needs `useRouter`. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the `"use client"` directive.
21:37:34.151 �[31m|�[0m
21:37:34.151 �[31m|�[0m Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
21:37:34.151 �[31m|�[0m
21:37:34.152
21:37:34.152 ,-[�[36;1;4m/vercel/path0/src/app/(public)/_components/hero.tsx�[0m:1:1]
21:37:34.152 �[2m1�[0m | import { useRouter } from 'next/navigation';
21:37:34.152 : �[35;1m ^^^^^^^^^�[0m
21:37:34.152 �[2m2�[0m |
21:37:34.152 �[2m3�[0m | import { Search } from 'lucide-react';
21:37:34.152 �[2m4�[0m | import { LanguageButton } from './language-button';
21:37:34.152 `----
21:37:34.152
21:37:34.152 Import trace for requested module:
21:37:34.152 ./src/app/(public)/_components/hero.tsx
21:37:34.152 ./src/app/(public)/page.tsx
21:37:34.152
21:37:34.152 ./src/app/(public)/_components/search-form.tsx
21:37:34.152 Error: �[31mx�[0m You're importing a component that needs `usePathname`. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the `"use client"` directive.
21:37:34.152 �[31m|�[0m
21:37:34.152 �[31m|�[0m Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
21:37:34.152 �[31m|�[0m
21:37:34.152
21:37:34.153 ,-[�[36;1;4m/vercel/path0/src/app/(public)/_components/search-form.tsx�[0m:1:1]
21:37:34.153 �[2m1�[0m | import { usePathname, useSearchParams, useRouter } from 'next/navigation';
21:37:34.153 : �[35;1m ^^^^^^^^^^^�[0m
21:37:34.153 �[2m2�[0m | import { useForm } from 'react-hook-form';
21:37:34.153 �[2m3�[0m | import { GoX } from 'react-icons/go';
21:37:34.153 `----
21:37:34.153 �[31mx�[0m You're importing a component that needs `useSearchParams`. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the `"use client"` directive.
21:37:34.153 �[31m|�[0m
21:37:34.153 �[31m|�[0m Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
21:37:34.153 �[31m|�[0m
21:37:34.153
21:37:34.153 ,-[�[36;1;4m/vercel/path0/src/app/(public)/_components/search-form.tsx�[0m:1:1]
21:37:34.154 �[2m1�[0m | import { usePathname, useSearchParams, useRouter } from 'next/navigation';
21:37:34.154 : �[35;1m ^^^^^^^^^^^^^^^�[0m
21:37:34.154 �[2m2�[0m | import { useForm } from 'react-hook-form';
21:37:34.154 �[2m3�[0m | import { GoX } from 'react-icons/go';
21:37:34.154 `----
21:37:34.154 �[31mx�[0m You're importing a component that needs `useRouter`. This React Hook only works in a Client Component. To fix, mark the file (or its parent) with the `"use client"` directive.
21:37:34.154 �[31m|�[0m
21:37:34.154 �[31m|�[0m Learn more: https://nextjs.org/docs/app/api-reference/directives/use-client
21:37:34.154 �[31m|�[0m
21:37:34.154
21:37:34.154 ,-[�[36;1;4m/vercel/path0/src/app/(public)/_components/search-form.tsx�[0m:1:1]
21:37:34.159 �[2m1�[0m | import { usePathname, useSearchParams, useRouter } from 'next/navigation';
21:37:34.159 : �[35;1m ^^^^^^^^^�[0m
21:37:34.159 �[2m2�[0m | import { useForm } from 'react-hook-form';
21:37:34.159 �[2m3�[0m | import { GoX } from 'react-icons/go';
21:37:34.159 `----
21:37:34.159
21:37:34.159 Import trace for requested module:
21:37:34.159 ./src/app/(public)/_components/search-form.tsx
21:37:34.160 ./src/app/(public)/_components/header.tsx
21:37:34.160 ./src/app/not-found.tsx
21:37:34.160
21:37:34.165
21:37:34.166 > Build failed because of webpack errors
21:37:34.198 ELIFECYCLE Command failed with exit code 1.
21:37:34.215 Error: Command "pnpm run build" exited with 1
|
@max-programming, Now there will be no issue. |
|
@max-programming, Sorry for adding the "use client" directive to the Header server component. |
|
@max-programming, Screenshot
|
|
@all-contributors please add @anuja12mishra for design, code, bug |
|
I've put up a pull request to add @anuja12mishra! 🎉 |
|
Thank you @max-programming for merging my PR and officially adding me as a contributor for design, code, and bug fixes! I'm excited to be part of this amazing project and looking forward to collaborating more and contributing further 🚀 |
|
I could not determine your intention. Basic usage: @all-contributors please add @Someone for code, doc and infra For other usages see the documentation |
2 participants
Description
This pull request improves the responsiveness of the repository listing page to ensure a smooth and user-friendly experience across all device sizes, especially mobile devices.
Changes Made
Motivation
The initial layout was not adjusting properly on smaller screens, resulting in overflowed text, cramped UI components, and poor usability. These changes address those issues and align with mobile-first best practices using Tailwind CSS.
close #241