fix: responsiveness of repository component (#157)

* fix: repo overflowing on mobile * refact: prettier style fix --------- Co-authored-by: Eddie Jaoude <[email protected]>
EddieHubCommunity · Oct 1, 2024 · d24b970 · d24b970
1 parent 72895a1
commit d24b970
Showing 1 changed file with 35 additions and 29 deletions.
diff --git a/src/components/Repos.js b/src/components/Repos.js
@@ -79,59 +79,65 @@ export default function Repos({ minimumVotes = 5, keyword, sort }) {
         <li
           key={idx}
           className={classNames([
-            "relative flex items-center space-x-4 px-4 py-4 sm:px-6 lg:px-8",
+            "relative sm:flex items-center w-full sm:w-auto space-y-4 sm:space-x-4 space-x-0 sm:space-y-0 px-4 py-4 sm:px-6 lg:px-8",
             repo.topics.length && "tooltip",
           ])}
           data-tip={repo.topics.join(", ")}
         >
           <Image
-            className="inline-block rounded-md h-12 w-12"
+            className="hidden w-12 h-12 rounded-md sm:block"
             src={repo.logo}
             alt={`Logo for ${repo.owner}/${repo.name}`}
             width={40}
             height={40}
           />
-          <div className="min-w-0 flex-auto">
-            <div className="flex items-center gap-x-3">
+          <div className="flex-auto min-w-0">
+            <div className="flex items-start gap-x-3">
               <div
                 className={classNames([
                   statuses[repo.status],
-                  "flex-none rounded-full p-1",
+                  "flex-none mt-1 rounded-full p-1",
                 ])}
               >
-                <div className="h-2 w-2 rounded-full bg-current" />
+                <div className="w-2 h-2 bg-current rounded-full" />
               </div>
-              <div className="flex flex-row gap-4 items-center">
+              <div className="flex flex-row flex-wrap items-center gap-2 md:gap-4">
                 <h2 className="min-w-0 text-sm font-semibold leading-6 text-white">
                   <Link
                     href={`/rate?owner=${repo.owner}&name=${repo.name}`}
-                    className="flex gap-x-2"
+                    className="inline-block w-full text-left whitespace-normal"
                   >
-                    <span className="truncate">{repo.owner}</span>
-                    <span className="text-gray-400">/</span>
-                    <span className="whitespace-nowrap">{repo.name}</span>
+                    {repo.owner}
+                    <span className="mx-2 text-gray-400">/</span>
+                    {repo.name}
                     <span className="absolute inset-0" />
                   </Link>
                 </h2>
-                {repo.language && (
-                  <p className="text-xs text-gray-400">({repo.language})</p>
-                )}
-                {repo.stars && (
-                  <p className="text-xs hidden sm:inline-block text-gray-400">
-                    ({abbreviateNumber(repo.stars)} ⭐️)
-                  </p>
-                )}
+                <div className="flex gap-4">
+                  {repo.language && (
+                    <p className="text-xs text-gray-400">({repo.language})</p>
+                  )}
+                  {repo.stars && (
+                    <p className="text-xs hidden sm:inline-block text-gray-400">
+                      ({abbreviateNumber(repo.stars)} ⭐️)
+                    </p>
+                  )}
+                </div>
               </div>
             </div>
-            <div className="mt-3 flex items-center gap-x-2.5 text-xs leading-5 text-gray-400">
-              <p className="truncate">{repo.description}</p>
-              <svg
-                viewBox="0 0 2 2"
-                className="h-0.5 w-0.5 flex-none fill-gray-300"
-              >
-                <circle cx={1} cy={1} r={1} />
-              </svg>
-              <p className="whitespace-nowrap">{repo.status}</p>
+
+            <div className="mt-3 flex items-center gap-x-2.5 text-xs flex-wrap leading-5 text-gray-400">
+              <p className="text-left md:text-center">
+                {repo.description}{" "}
+                <svg
+                  viewBox="0 0 2 2"
+                  className="h-0.5 w-0.5  inline-block mx-2 fill-gray-300"
+                >
+                  <circle cx={1} cy={1} r={1} />
+                </svg>
+                <span className="">{repo.status}</span>
+              </p>
+              <div className="flex items-center gap-x-2.5"></div>
             </div>
           </div>
           <div
@@ -143,7 +149,7 @@ export default function Repos({ minimumVotes = 5, keyword, sort }) {
             {repo.rating.toFixed(1)} / 5 ({repo.votes})
           </div>
           <ChevronRightIcon
-            className="h-5 w-5 flex-none text-gray-400"
+            className="flex-none hidden w-5 h-5 text-gray-400 sm:block"
             aria-hidden="true"
           />
         </li>