Improve repository listing page responsiveness for mobile devices

src/app/(public)/_components/button.tsx

@@ -14,13 +14,13 @@ export function Button({
     <div className="relative inline-block group w-fit transition-all duration-500">
       <button
         className={cn(
-          'text-sm font-bold inline-flex justify-center items-center uppercase py-3 px-4 text-center text-white bg-primary-btn-gradient shadow-primary-btn-shadow hover:bg-primary-btn-hover-gradient min-w-20 active:scale-95 active:shadow-lg transition-all duration-150 ease-in-out',
+          'text-xs sm:text-sm font-bold inline-flex justify-center items-center uppercase py-2 sm:py-3 px-3 sm:px-4 text-center text-white bg-primary-btn-gradient shadow-primary-btn-shadow hover:bg-primary-btn-hover-gradient min-w-16 sm:min-w-20 active:scale-95 active:shadow-lg transition-all duration-150 ease-in-out whitespace-nowrap',
           className
         )}
         {...props}
       >
         <p className="btn-clip group-hover:opacity-0 duration-300 group-hover:scale-95"></p>
-        <span className="relative z-20 flex justify-center items-center text-hacktoberfest-light gap-2 font-bold">
+        <span className="relative z-20 flex justify-center items-center text-hacktoberfest-light gap-1 sm:gap-2 font-bold">
           {children}
         </span>
       </button>

src/app/(public)/_components/header.tsx

@@ -16,26 +16,26 @@ export async function Header() {
   return (
     <header className="fixed top-0 left-0 w-full z-50 py-3 px-4 sm:px-6">
       <div className="border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
-        <div className="flex justify-between items-center">
-          <Link href="/" className="z-5">
+        <div className="flex justify-between items-center flex-wrap gap-2">
+          <Link href="/" className="z-5 flex-shrink-0">
             <LogoIconsSvg />
           </Link>
 
           {/* Desktop Search - Hidden on mobile */}
-          <div className="hidden md:block">
+          <div className="hidden md:block flex-1 max-w-md mx-4">
             <SearchForm />
           </div>
 
           {/* Desktop Navigation - Hidden on mobile */}
-          <div className="hidden md:flex gap-2 lg:ml-40">
+          <div className="hidden md:flex gap-2 flex-shrink-0">
             <form action={session ? signOutAction : signInAction}>
-              <Button className="text-xs sm:text-sm">
+              <Button className="text-xs sm:text-sm whitespace-nowrap">
                 {session && session.user ? 'Sign Out' : 'Sign In'}
               </Button>
             </form>
             <Link
               href="/contributors"
-              className="btn btn-square btn-ghost umami--click--contributors-button hover:text-hacktoberfest-light transition-colors"
+              className="btn btn-square btn-ghost umami--click--contributors-button hover:text-hacktoberfest-light transition-colors flex-shrink-0"
             >
               <BsPeopleFill size="1.5rem" color="white" title="Contributors" />
             </Link>
@@ -44,7 +44,7 @@ export async function Header() {
               href="https://github.com/max-programming/hacktoberfest-projects"
               target="_blank"
               rel="noreferrer"
-              className="btn btn-square btn-ghost umami--click--github-button hover:text-hacktoberfest-light transition-colors"
+              className="btn btn-square btn-ghost umami--click--github-button hover:text-hacktoberfest-light transition-colors flex-shrink-0"
             >
               <IoLogoGithub size="1.5rem" color="white" title="GitHub" />
             </a>
@@ -55,7 +55,7 @@ export async function Header() {
         </div>
 
         {/* Mobile Search - Visible only on mobile */}
-        <div className="md:hidden md:mt-4">
+        <div className="md:hidden mt-4">
           <SearchForm />
         </div>
       </div>

src/app/(public)/_components/hero.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { useRouter } from 'next/navigation';
 
 import { Search } from 'lucide-react';
@@ -27,12 +25,12 @@ export function Hero() {
   return (
     <div className="relative bg-hero-gradient ">
       <div className="z-50 flex flex-col space-y-8 justify-center items-center text-center min-h-screen pt-28 sm:pt-24">
-        <div className="max-w-md space-y-5">
-          <h1 className="text-5xl font-medium uppercase heading-text">
+        <div className="max-w-md space-y-5 px-4">
+          <h1 className="text-3xl sm:text-4xl md:text-5xl font-medium uppercase heading-text">
             Search your language
           </h1>
           <form
-            className="items-center w-full max-w-xs mx-auto form-control outline-none "
+            className="items-center w-full max-w-xs mx-auto form-control outline-none"
             onSubmit={handleSearch}
           >
             <div className="flex w-full">
@@ -41,29 +39,29 @@ export function Hero() {
                   type="text"
                   placeholder="Search for your language"
                   className="w-full max-w-xs bg-transparent rounded-tr-none rounded-br-none input input-bordered text-hacktoberfest-light border-hacktoberfest-light
-                  focus:border-hacktoberfest-light focus:!outline-none focus-visible:!outline-none placeholder:text-hacktoberfest-light"
+                  focus:border-hacktoberfest-light focus:!outline-none focus-visible:!outline-none placeholder:text-hacktoberfest-light text-sm sm:text-base"
                   name="search"
                 />
               </div>
               <button
                 type="submit"
-                className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light    hover:bg-primary-btn-hover-gradient"
+                className="bg-transparent rounded-tl-none rounded-bl-none group btn btn-square text-hacktoberfest-light border-hacktoberfest-light hover:!border-hacktoberfest-light hover:bg-primary-btn-hover-gradient flex-shrink-0"
               >
-                <Search />
+                <Search size={16} className="sm:w-5 sm:h-5" />
               </button>
             </div>
           </form>
-          <p className="font-medium uppercase text-hacktoberfest-light">
+          <p className="font-medium uppercase text-hacktoberfest-light text-sm sm:text-base">
             Or select the programming language you would like to find
             repositories for.
           </p>
-          <div className="flex flex-wrap gap-6 items-center justify-center ">
+          <div className="flex flex-wrap gap-4 sm:gap-6 items-center justify-center">
             {mainLanguages.map(language => (
               <LanguageButton key={language} language={language} />
             ))}
           </div>
           <div className="dropdown dropdown-top">
-            <Button tabIndex={0} className="umami--click--otherlangs-button">
+            <Button tabIndex={0} className="umami--click--otherlangs-button text-sm sm:text-base">
               Other languages
             </Button>
 
@@ -75,7 +73,7 @@ export function Hero() {
                 <li key={language}>
                   <Link
                     href={`/repos/${language.toLowerCase()}`}
-                    className="text-gray-700 hover:text-white hover:bg-hacktoberfest-blue rounded-lg transition-colors duration-200 px-3 py-2"
+                    className="text-gray-700 hover:text-white hover:bg-hacktoberfest-blue rounded-lg transition-colors duration-200 px-3 py-2 text-sm"
                   >
                     {language}
                   </Link>

src/app/(public)/_components/mobile-menu.tsx

@@ -20,43 +20,43 @@ export function MobileMenu({ session }: MobileMenuProps) {
   const toggleMenu = () => setIsOpen(!isOpen);
 
   return (
-    <div className="md:hidden">
+    <div className="md:hidden flex-shrink-0">
       {/* Hamburger Button */}
       <button
         onClick={toggleMenu}
         className="text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
         aria-label="Toggle menu"
       >
-        {isOpen ? <HiX size="1.5rem" /> : <HiMenu size="1.5rem" />}
+        {isOpen ? <HiX size="1.25rem" /> : <HiMenu size="1.25rem" />}
       </button>
 
       {/* Mobile Menu Overlay */}
       {isOpen && (
-        <div className="absolute top-full left-0 right-0 mt-2  bg-hacktoberfest-light-blue border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
-          <div className="flex flex-col gap-4">
+        <div className="absolute top-full left-0 right-0 mt-2 bg-hacktoberfest-light-blue border border-hacktoberfest-light-blue rounded-lg py-4 px-4 sm:px-6 container mx-auto backdrop-blur-md shadow-lg">
+          <div className="flex flex-col gap-3">
             <form action={session ? signOutAction : signInAction}>
-              <Button className="w-full text-center text-xs sm:text-sm">
+              <Button className="w-full text-center text-xs">
                 {session && session.user ? 'Sign Out' : 'Sign In'}
               </Button>
             </form>
 
             <Link
               href="/contributors"
-              className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-3 rounded-lg"
+              className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
               onClick={() => setIsOpen(false)}
             >
-              <BsPeopleFill size="1.2rem" />
+              <BsPeopleFill size="1.1rem" />
               <span className="text-sm font-medium">Contributors</span>
             </Link>
 
             <a
               href="https://github.com/max-programming/hacktoberfest-projects"
               target="_blank"
               rel="noreferrer"
-              className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-3 rounded-lg"
+              className="flex items-center gap-3 text-white hover:text-hacktoberfest-light transition-colors p-2 rounded-lg"
               onClick={() => setIsOpen(false)}
             >
-              <IoLogoGithub size="1.2rem" />
+              <IoLogoGithub size="1.1rem" />
               <span className="text-sm font-medium">GitHub</span>
             </a>
           </div>

src/app/(public)/_components/search-form.tsx

@@ -1,5 +1,3 @@
-'use client';
-
 import { usePathname, useSearchParams, useRouter } from 'next/navigation';
 import { useForm } from 'react-hook-form';
 import { GoX } from 'react-icons/go';
@@ -35,21 +33,21 @@ export function SearchForm() {
   }
 
   return (
-    <div className="hidden px-2 mb-3 sm:flex-1 sm:max-w-md sm:mb-0 sm:px-6 sm:inline-flex">
+    <div className="w-full">
       <form
-        className="w-full m-2 mx-auto form-control"
+        className="w-full form-control"
         onSubmit={handleSubmit(onSubmit)}
       >
         <div className="relative">
           <input
             placeholder="Search"
-            className="w-full pr-16 bg-transparent text-hacktoberfest-light input input-bordered border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none placeholder:text-hacktoberfest-beige transition-colors duration-200"
+            className="w-full pr-16 bg-transparent text-hacktoberfest-light input input-bordered border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none placeholder:text-hacktoberfest-beige transition-colors duration-200 text-sm sm:text-base"
             type="text"
             {...register('searchQuery', { required: true })}
           />
           {searchQuery && searchQuery.trim() !== '' && (
             <button
-              className="absolute top-0 right-0 rounded-l-none btn btn-ghost"
+              className="absolute top-0 right-0 rounded-l-none btn btn-ghost btn-sm"
               type="button"
               onClick={() => reset()}
             >

src/app/(public)/repos/[language]/page.tsx

@@ -36,11 +36,11 @@ export default async function ReposPage({
     <>
       <Header />
       <ScrollToTop />
-      <div className="container mx-auto mt-32">
-        <div className="min-h-screen pt-5">
+      <div className="container mx-auto px-4 mt-16 md:mt-32">
+        <div className="min-h-screen pt-5 sm:pt-8 md:pt-12">
           <div className="text-center">
             <div className="w-5/6 max-w-md mx-auto">
-              <h1 className="mb-5 text-5xl font-medium uppercase text-hacktoberfest-light">
+              <h1 className="mb-5 text-3xl sm:text-4xl md:text-5xl font-medium uppercase text-hacktoberfest-light">
                 <span className="font-bold heading-text">
                   {repos.total_count}
                 </span>{' '}
@@ -55,7 +55,7 @@ export default async function ReposPage({
           </div>
           <Sorter />
           <StarsFilter />
-          <div className="grid grid-cols-1 gap-8 p-4 md:grid-cols-2 lg:grid-cols-3">
+          <div className="grid grid-cols-1 gap-8 p-4 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4">
             {repos.items.map(repo => (
               <RepoCard key={repo.id} repo={repo} />
             ))}
@@ -69,6 +69,7 @@ export default async function ReposPage({
       </div>
     </>
   );
+
 }
 
 export async function generateMetadata({

tailwind.config.ts

@@ -8,6 +8,11 @@ const config = {
   media: false, // or 'media' or 'class'
   theme: {
     extend: {
+      screens: {
+        'xs': '320px',
+        // This adds support for very small screens
+        // Now we can use xs:text-xs, xs:px-2, etc.
+      },
       fontFamily: {
         mono: ['var(--font-atkinson-hyperlegible-mono)', 'monospace']
       },