Improve DataColocation on very small phones

Author: hasparus

src/components/index-page/data-colocation/component-tree.tsx

@@ -28,23 +28,23 @@ export const ComponentTree = forwardRef(function ComponentTree(
           </ComponentLabel>
         </div>
 
-        <div className="h-4" />
+        <div className="h-4 max-[375px]:h-1" />
 
         <div className="flex h-12 items-center" data-sector="2">
           <ComponentLabel className="border-neu-600 bg-neu-400 dark:border-neu-200 dark:bg-neu-50">
             {names[1]}
           </ComponentLabel>
         </div>
 
-        <div className="h-4" />
+        <div className="h-4 max-[375px]:h-1" />
 
         <div className="flex h-12 items-center" data-sector="3">
           <ComponentLabel className="border-sec-base bg-sec-lighter dark:border-sec-dark dark:bg-sec-darker/50">
             {names[2]}
           </ComponentLabel>
         </div>
 
-        <div className="h-4" />
+        <div className="h-4 max-[375px]:h-1" />
 
         <div className="flex h-12 items-center" data-sector="4">
           <ComponentLabel className="border-pri-base bg-pri-lighter/40 dark:border-pri-dark dark:bg-pri-darker/50">
@@ -53,7 +53,7 @@ export const ComponentTree = forwardRef(function ComponentTree(
         </div>
       </div>
 
-      <div className="flex flex-col items-center">
+      <div className="flex flex-col items-center max-[375px]:-translate-y-2.5 max-[375px]:scale-[.85]">
         <div
           className="flex size-12 items-center justify-center bg-neu-100 dark:bg-neu-50"
           data-sector="1"