From bb2ae79cf0a3a890942de872d58ed0a0b9faaa1e Mon Sep 17 00:00:00 2001
From: y2_znt <yonideserbaix@gmail.com>
Date: Mon, 6 Oct 2025 00:17:37 +0200
Subject: [PATCH] refactor: update layout and responsiveness of DBVersionIndex
 component

Modified the DBVersionIndex component to enhance layout responsiveness by adjusting max-width properties and grid structure for better display on various screen sizes.
---
 src/routes/_libraries/db.$version.index.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/routes/_libraries/db.$version.index.tsx b/src/routes/_libraries/db.$version.index.tsx
index 65eaa0c8..1bf60210 100644
--- a/src/routes/_libraries/db.$version.index.tsx
+++ b/src/routes/_libraries/db.$version.index.tsx
@@ -56,7 +56,7 @@ function DBVersionIndex() {
             <h3 className="text-3xl text-center mx-auto leading-tight font-extrabold tracking-tight sm:text-4xl lg:leading-none mt-2">
               Blazing fast apps 🔥
             </h3>
-            <p className="mt-6 text-xl w-3xl mx-auto leading-7 opacity-75 max-w-[500px] lg:max-w-[800px]">
+            <p className="mt-6 text-xl mx-auto leading-7 opacity-75 max-w-[90vw] sm:max-w-[500px] lg:max-w-[800px]">
               Built on a{' '}
               <a
                 href="https://github.com/electric-sql/d2ts"
@@ -70,7 +70,7 @@ function DBVersionIndex() {
               apps.
             </p>
           </div>
-          <div className="grid grid-flow-row grid-cols-2 gap-x-10 lg:gap-x-12 gap-y-4 mx-auto max-w-[500px] lg:max-w-[650px]">
+          <div className="grid grid-flow-row grid-cols-1 sm:grid-cols-2 gap-x-4 sm:gap-x-10 lg:gap-x-12 gap-y-4 mx-auto max-w-[90vw] sm:max-w-[500px] lg:max-w-[650px]">
             <div>
               <h4 className="text-xl my-2">🔥 Blazing fast query engine</h4>
               <p>For sub-millisecond live queries.</p>