Merge pull request #220 from SharizHussain/feature/ResponsiveSolved

Feature/responsive solved

Author: max-programming

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

@@ -14,7 +14,7 @@ export function Button({
     <div className="relative inline-block group w-fit">
       <button
         className={cn(
-          'bg-hacktoberfest-black m-1 hover:bg-hacktoberfest-dark-green btn btn-lg text-hacktoberfest-light rounded-2xl leading-none border-none',
+          'bg-hacktoberfest-black m-1 hover:bg-hacktoberfest-dark-green btn btn-md md:btn-lg text-hacktoberfest-light rounded-2xl leading-none border-none',
           className
         )}
         {...props}

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

@@ -117,15 +117,15 @@ export function Sorter() {
 
   return (
     <div className="flex items-center justify-center gap-2 mb-8">
-      <div className="dropdown dropdown-hover">
+      <div className="dropdown group dropdown-hover">
         <Button
           tabIndex={0}
           className="hover:bg-hacktoberfest-green hover:text-hacktoberfest-dark-green"
         >
           <Code className="w-6 h-6 mr-2" />
           Language
         </Button>
-        <div className="z-50 h-64 p-2 overflow-y-scroll shadow dropdown-content bg-base-100 rounded-box w-60">
+        <div className="z-50 h-64 p-2 overflow-y-scroll shadow dropdown-content hidden group-hover:block bg-base-100 rounded-box w-60">
           <ul tabIndex={0} className="menu menu-vertical">
             {mainLanguages.sort(sortByName).map(language => (
               <li key={language} onClick={handleClick}>
@@ -137,15 +137,15 @@ export function Sorter() {
           </ul>
         </div>
       </div>
-      <div className="dropdown dropdown-hover">
+      <div className="dropdown dropdown-hover group">
         <Button
           tabIndex={0}
           className="hover:bg-hacktoberfest-green hover:text-hacktoberfest-dark-green"
         >
           <ArrowUpAZ className="w-6 h-6 mr-2" />
           {selectedSort()}
         </Button>
-        <div className="z-50 h-64 p-2 overflow-y-scroll shadow dropdown-content bg-base-100 rounded-box w-60">
+        <div className="z-50 h-64 p-2 overflow-y-scroll shadow dropdown-content hidden group-hover:block -ml-16 bg-base-100 rounded-box w-60">
           <ul tabIndex={0} className="menu menu-vertical">
             {navigationItems.map((item, index) => {
               const sp = item.onSelect(new URLSearchParams(searchParams));

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

@@ -144,7 +144,7 @@ async function getRepos(
 
 async function getReportedRepos() {
   const client = getXataClient();
-  const reports = await client.db.reports
+  const reports = await client.db.reports 
     .select(['repoId'])
     .filter({ valid: false })
     .getMany();

src/components/footer.tsx

@@ -8,7 +8,7 @@ const formatter = new Intl.ListFormat('en', {
 
 export function Footer() {
   return (
-    <footer className="text-center text-white py-4 text-lg border-t-[0.5px] border-dashed border-t-hacktoberfest-light-green">
+    <footer className="text-center pb-10 text-white py-4 text-lg border-t-[0.5px] border-dashed border-t-hacktoberfest-light-green">
       <div className="container px-4 mx-auto">
         <Link href="/contributors">
           Made with <span className="text-red-500">💗</span> by{' '}