style: centered last button

Author: Keith-Web3

components/Card.tsx

@@ -61,11 +61,11 @@ function Card({ repo }: Props) {
         </div>
 
         {/* stars and forks cards */}
-        <div className="flex flex-wrap gap-3 xl:gap-5 text-neutral-100 cursor-pointer mt-8">
+        <div className="container-query flex flex-wrap justify-between gap-3 xl:gap-5 text-neutral-100 cursor-pointer mt-8">
           <a
             href={`${repo.html_url}/stargazers`}
             target="_blank"
-            className="group w-full flex-shrink-0 flex-grow-1 mx-auto basis-[120px] border rounded-xl p-3 xl:px-4 flex items-center gap-2 xl:gap-3 relative"
+            className="group w-full flex-shrink-0 flex-grow-1  basis-[120px] border rounded-xl p-3 xl:px-4 flex items-center gap-2 xl:gap-3 relative"
           >
             <GoStar className="text-yellow-200 text-2xl" />
             <div className="flex flex-col">
@@ -84,7 +84,7 @@ function Card({ repo }: Props) {
           <a
             href={`${repo.html_url}/forks`}
             target="_blank"
-            className="group flex-shrink-0 flex-grow-1 mx-auto basis-[120px] border rounded-xl p-3 flex items-center gap-3 relative"
+            className="group flex-shrink-0 flex-grow-1  basis-[120px] border rounded-xl p-3 flex items-center gap-3 relative"
           >
             <GoRepoForked className="text-yellow-200 text-2xl" />
             <div className="flex flex-col">
@@ -103,7 +103,7 @@ function Card({ repo }: Props) {
           <a
             href={`${repo.html_url}/issues`}
             target="_blank"
-            className="group flex-shrink-0 flex-grow-1 mx-auto basis-[120px] border rounded-xl p-3 flex items-center gap-3 relative"
+            className="group issues-btn flex-shrink-0 flex-grow-1 basis-[120px] border rounded-xl p-3 flex items-center gap-3 relative"
           >
             <GoIssueOpened className="text-yellow-200 text-2xl" />
             <div className="flex flex-col">

styles/globals.css

@@ -70,3 +70,18 @@ a {
   );
   border-radius: 2px;
 }
+
+.container-query {
+  container-type: inline-size;
+}
+
+@container (max-width: 383px) {
+  .issues-btn {
+    margin-inline: auto;
+  }
+}
+@container (max-width: 251px) {
+  .issues-btn {
+    margin-inline: 0;
+  }
+}