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,20 +16,22 @@ 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">
+        {/* Desktop Layout */}
+        <div className="hidden md:flex justify-between items-center gap-4">
+          {/* Logo */}
+          <Link href="/" className="flex-shrink-0">
             <LogoIconsSvg />
           </Link>
 
-          {/* Desktop Search - Hidden on mobile */}
-          <div className="hidden md:block">
+          {/* Search Form */}
+          <div className="flex-1 max-w-md">
             <SearchForm />
           </div>
 
-          {/* Desktop Navigation - Hidden on mobile */}
-          <div className="hidden md:flex gap-2 lg:ml-40">
+          {/* Navigation Actions */}
+          <div className="flex gap-2 flex-shrink-0 items-center">
             <form action={session ? signOutAction : signInAction}>
-              <Button className="text-xs sm:text-sm">
+              <Button className="text-sm whitespace-nowrap">
                 {session && session.user ? 'Sign Out' : 'Sign In'}
               </Button>
             </form>
@@ -49,16 +51,19 @@ export async function Header() {
               <IoLogoGithub size="1.5rem" color="white" title="GitHub" />
             </a>
           </div>
-
-          {/* Mobile Hamburger Menu */}
-          <MobileMenu session={session} />
         </div>
 
-        {/* Mobile Search - Visible only on mobile */}
-        <div className="md:hidden md:mt-4">
-          <SearchForm />
+        {/* Mobile Layout */}
+        <div className="md:hidden">
+          {/* Logo and Hamburger Menu */}
+          <div className="flex justify-between items-center ">
+            <Link href="/" className="flex-shrink-0">
+              <LogoIconsSvg />
+            </Link>
+            <MobileMenu session={session} />
+          </div>
         </div>
       </div>
     </header>
   );
-}
+}

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

@@ -27,12 +27,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 +41,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 +75,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

@@ -35,21 +35,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]/_components/repo-card.tsx

@@ -35,10 +35,10 @@ export function RepoCard({ repo }: RepoCardProps) {
     <section className="transition duration-300 shadow-sm card bg-hacktoberfest-blue ring-1 ring-hacktoberfest-light hover:scale-105 hover:shadow-2xl hover:shadow-hacktoberfest-light-blue h-125">
       <div className="relative p-6 card-body">
         <div className="flex-1">
-          <div className="flex items-center gap-2 justify-between">
+          <div className="flex items-center justify-between gap-4 overflow-hidden">
             <div className="flex items-center gap-2">
               <a
-                className="border-2 rounded-full h-14 aspect-square p-1.5 border-hacktoberfest-beige"
+                className="border-2 rounded-full h-12 w-12 sm:h-14 sm:w-14 p-1.5 border-hacktoberfest-beige flex-shrink-0"
                 href={repo.owner.html_url}
                 title={repo.owner.login}
                 target="_blank"
@@ -50,9 +50,9 @@ export function RepoCard({ repo }: RepoCardProps) {
                   className="rounded-full"
                 />
               </a>
-              <h2 className="overflow-hidden text-3xl cursor-pointer text-hacktoberfest-light line-clamp-1">
+              <h2 className="overflow-hidden text-xl sm:text-3xl cursor-pointer text-hacktoberfest-light line-clamp-1">
                 <a
-                  href={repo.html_url + '?ref=finder.usmans.me'}
+                  href={repo.html_url + "?ref=finder.usmans.me"}
                   title={repo.name}
                   target="_blank"
                   rel="noreferrer"
@@ -64,6 +64,7 @@ export function RepoCard({ repo }: RepoCardProps) {
             <ReportButton repo={repo} />
           </div>
 
+
           <h6 className="my-5 text-lg text-hacktoberfest-beige">
             {emojify(truncatedDescription)}
             {repo.description?.length > MAX_DESCRIPTION_LENGTH && (

src/app/(public)/repos/[language]/_components/stars-filter.tsx

@@ -53,16 +53,16 @@ export function StarsFilter() {
 
   return (
     <form
-      className="w-full px-2 m-2 mx-auto mb-4 sm:w-3/4 xl:w-2/4 form-control"
+      className="w-full px-4 mx-auto mb-4 sm:w-3/4 xl:w-2/4 form-control"
       onSubmit={handleSubmit(onSubmit)}
     >
-      <div className="flex flex-col gap-2 sm:flex-row">
+      <div className="flex flex-col sm:flex-row gap-3 items-stretch">
         <Controller
           name="startStars"
           render={({ field }) => (
             <input
               type="number"
-              className="w-3/5 pr-4 m-auto text-center bg-transparent sm:w-full input input-bordered md:text-left text-hacktoberfest-light placeholder:text-hacktoberfest-beige border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none transition-colors duration-200 placeholder:line-clamp-1"
+              className="w-full px-4 py-3 text-center sm:text-left bg-transparent input input-bordered text-hacktoberfest-light placeholder:text-hacktoberfest-beige border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none transition-colors duration-200"
               {...field}
               onChange={e => field.onChange(e.target.valueAsNumber)}
               placeholder="Star's Starting Range"
@@ -76,7 +76,7 @@ export function StarsFilter() {
           render={({ field }) => (
             <input
               type="number"
-              className="w-3/5 pr-4 m-auto text-center bg-transparent sm:w-full input input-bordered md:text-left text-hacktoberfest-light placeholder:text-hacktoberfest-beige border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none transition-colors duration-200"
+              className="w-full px-4 py-3 text-center sm:text-left bg-transparent input input-bordered text-hacktoberfest-light placeholder:text-hacktoberfest-beige border-hacktoberfest-light focus:border-hacktoberfest-light-blue focus:outline-none transition-colors duration-200"
               {...field}
               onChange={e => field.onChange(e.target.valueAsNumber)}
               placeholder="Star's Finish Range"
@@ -86,16 +86,13 @@ export function StarsFilter() {
           control={control}
         />
 
-        {/* Flex container to center the button */}
-        <div className="flex items-center justify-center">
-          <button
-            className="w-3/5 mx-auto btn bg-hacktoberfest-blue border-hacktoberfest-light text-hacktoberfest-light hover:bg-hacktoberfest-light-blue hover:text-hacktoberfest-blue transition-colors duration-200 md:w-full"
-            type="submit"
-          >
-            Search
-          </button>
-        </div>
+        <button
+          className="w-full sm:w-auto sm:min-w-[120px] px-6 py-3 btn bg-hacktoberfest-blue border-hacktoberfest-light text-hacktoberfest-light hover:bg-hacktoberfest-light-blue hover:text-hacktoberfest-blue transition-colors duration-200 whitespace-nowrap"
+          type="submit"
+        >
+          Search
+        </button>
       </div>
     </form>
   );
-}
+}

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

@@ -36,36 +36,38 @@ export default async function ReposPage({
     <>
       <Header />
       <ScrollToTop />
-      <div className="container mx-auto mt-32">
-        <div className="min-h-screen pt-5">
-          <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">
-                <span className="font-bold heading-text">
-                  {repos.total_count}
-                </span>{' '}
-                repositories for{' '}
-                <span className="font-bold heading-text">
-                  {sp.q
-                    ? sp.q + ' in ' + capitalize(decodeURIComponent(language))
-                    : capitalize(decodeURIComponent(language))}
-                </span>
-              </h1>
+      <div className="w-full overflow-x-hidden">
+        <div className="container mx-auto px-4 pt-32 sm:pt-36 md:pt-40 pb-8">
+          <div className="min-h-screen">
+            <div className="text-center mb-8">
+              <div className="max-w-4xl mx-auto">
+                <h1 className="mb-6 text-2xl sm:text-3xl md:text-4xl lg:text-5xl font-medium uppercase text-hacktoberfest-light break-words px-2">
+                  <span className="font-bold heading-text">
+                    {repos.total_count}
+                  </span>{' '}
+                  repositories for{' '}
+                  <span className="font-bold heading-text">
+                    {sp.q
+                      ? sp.q + ' in ' + capitalize(decodeURIComponent(language))
+                      : capitalize(decodeURIComponent(language))}
+                  </span>
+                </h1>
+              </div>
+            </div>
+            <Sorter />
+            <StarsFilter />
+            <div className="grid grid-cols-1 gap-6 px-2 sm:px-4 sm:grid-cols-2 lg:grid-cols-3">
+              {repos.items.map(repo => (
+                <RepoCard key={repo.id} repo={repo} />
+              ))}
             </div>
           </div>
-          <Sorter />
-          <StarsFilter />
-          <div className="grid grid-cols-1 gap-8 p-4 md:grid-cols-2 lg:grid-cols-3">
-            {repos.items.map(repo => (
-              <RepoCard key={repo.id} repo={repo} />
-            ))}
-          </div>
+          <Pagination
+            page={page}
+            totalCount={repos.total_count}
+            searchParams={sp}
+          />
         </div>
-        <Pagination
-          page={page}
-          totalCount={repos.total_count}
-          searchParams={sp}
-        />
       </div>
     </>
   );

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']
       },