style: adjust layout and alignment for improved responsiveness

Author: ErwanDecoster

src/routes/__root.tsx

@@ -3,7 +3,7 @@ import { TanStackRouterDevtools } from '@tanstack/react-router-devtools';
 
 export const Route = createRootRoute({
   component: () => (
-    <div className="mx-auto w-full px-6 md:px-10 lg:px-20 mb-20">
+    <div className="mx-auto mb-20 w-full px-6 md:px-10 lg:px-20">
       <Outlet />
       <TanStackRouterDevtools />
     </div>

src/routes/index.tsx

@@ -11,27 +11,27 @@ export const Route = createFileRoute('/')({
 
 function Index() {
   return (
-    <div className="mt-8 flex flex-col items-center gap-20">
-      <div className="radial-bg before:bg-grey-800 border-secondary relative z-0 h-80 w-full max-w-[1408px] overflow-hidden rounded-2xl border">
+    <div className="mt-8 flex flex-col gap-20">
+      <div className="radial-bg before:bg-grey-800 border-secondary relative z-0 mx-auto h-80 w-full max-w-[1408px] overflow-hidden rounded-2xl border">
         <div className="absolute inset-0 -z-10 blur-2xl sm:blur-[100px] lg:blur-[150px]">
           <div className="absolute top-3/4 right-0 aspect-[23/30] w-1/2 rounded-full bg-orange-400/40" />
-          <div className="absolute top-0 right-0 hidden aspect-square h-full translate-x-1/2 -translate-y-1/2 rounded-full bg-yellow-100/50 sm:block" />
+          <div className="absolute top-0 right-0 hidden aspect-square h-full translate-x-1/2 -translate-y-1/2 rounded-full bg-yellow-100/50 md:block" />
         </div>
       </div>
-      <div className="grid grid-cols-6 gap-x-6 gap-y-10">
-        <div className="col-span-3">
+      <div className="flex flex-col gap-x-6 gap-y-10 lg:grid lg:grid-cols-6">
+        <div className="lg:col-span-3">
           <DealsPreviewTable />
         </div>
-        <div className="col-span-3">
+        <div className="lg:col-span-3">
           <TasksPreviewTable />
         </div>
-        <div className="col-span-2">
+        <div className="lg:col-span-2">
           <AppsPreviewTable />
         </div>
-        <div className="col-span-2">
+        <div className="lg:col-span-2">
           <DatasetsPreviewTable />
         </div>
-        <div className="col-span-2">
+        <div className="lg:col-span-2">
           <WorkerpoolsPreviewTable />
         </div>
       </div>