From 9a49db8156d2663fce433abee8353f608f3a9e52 Mon Sep 17 00:00:00 2001
From: Tijn Roozen <tijn.roozen@deptagency.com>
Date: Sat, 19 Jul 2025 19:07:23 +0200
Subject: [PATCH] fix: update grid layout and improve icon rendering in
 VersionIndex component

---
 src/routes/_libraries/start.$version.index.tsx | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/src/routes/_libraries/start.$version.index.tsx b/src/routes/_libraries/start.$version.index.tsx
index 4ec21b214..739c974b0 100644
--- a/src/routes/_libraries/start.$version.index.tsx
+++ b/src/routes/_libraries/start.$version.index.tsx
@@ -111,34 +111,34 @@ export default function VersionIndex() {
             keeping up with the latest releases.
           </div>
         </div>
-        <div className="grid items-center gap-2 justify-center grid-cols-2 w-[600px] max-w-full mx-auto">
+        <div className="grid items-center gap-2 justify-center grid-cols-1 sm:grid-cols-2 w-[600px] max-w-full mx-auto">
           <Link
             to="/start/latest/docs/framework/react/examples/start-basic"
-            className={`flex items-center gap-2 py-2 px-4 bg-cyan-900 rounded text-white uppercase font-extrabold`}
+            className="flex items-center gap-2 py-2 px-4 bg-cyan-900 rounded text-white uppercase font-extrabold"
           >
-            <VscPreview /> See an Example
+            <VscPreview className="min-w-4" /> See an Example
           </Link>
           <Link
             to="/start/latest/docs/framework/react/overview"
-            className={`flex items-center gap-2 py-2 px-4 bg-cyan-800 rounded text-white uppercase font-extrabold`}
+            className="flex items-center gap-2 py-2 px-4 bg-cyan-800 rounded text-white uppercase font-extrabold"
           >
-            <FaBook /> Try the BETA
+            <FaBook className="min-w-4" /> Try the BETA
           </Link>
           <a
             href={`https://github.com/tanstack/tanstack.com`}
             className={`flex items-center gap-2 py-2 px-4 bg-cyan-700 rounded text-white uppercase font-extrabold`}
           >
-            <FaGithub /> TanStack.com Source
+            <FaGithub className="min-w-4" /> TanStack.com Source
           </a>
           <a
             href={`https://twitter.com/intent/post?text=${encodeURIComponent(
               `TanStack Start is in BETA! It's a new full-stack React framework from @Tan_Stack and you can check it out at https://tanstack.com/start/`
             )}`}
             target="_blank"
-            className={`flex items-center gap-2 py-2 px-4 bg-cyan-500 rounded text-white uppercase font-extrabold`}
+            className="flex items-center gap-2 py-2 px-4 bg-cyan-500 rounded text-white uppercase font-extrabold"
             rel="noreferrer"
           >
-            <FaTwitter /> Tweet about it!
+            <FaTwitter className="min-w-4" /> Tweet about it!
           </a>{' '}
         </div>
       </div>