From 65afb292747b0e57865bc4c0d5df320fbc58b261 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 25 Feb 2026 07:57:56 +0300
Subject: [PATCH] fix: boxes background not covering viewport

- Use 300% oversized CSS grid container instead of fixed-size flex cells
- Grid with 1fr units auto-fills the container, skew+scale covers viewport
- Simplified to flat cell array, removed SVG crosses for cleaner look
---
 .../ui/backgrounds/background-boxes.tsx       | 84 ++++++++-----------
 1 file changed, 35 insertions(+), 49 deletions(-)

diff --git a/src/components/ui/backgrounds/background-boxes.tsx b/src/components/ui/backgrounds/background-boxes.tsx
index 0f000dc..766b6fd 100644
--- a/src/components/ui/backgrounds/background-boxes.tsx
+++ b/src/components/ui/backgrounds/background-boxes.tsx
@@ -18,23 +18,19 @@ const COLORS = [
 ];
 
 export default React.memo(function BackgroundBoxes({ settings }: Props) {
-  const rows = clampNumber(settings.rows, 4, 30, 20);
-  const cols = clampNumber(settings.cols, 4, 30, 12);
+  const rows = clampNumber(settings.rows, 4, 30, 15);
+  const cols = clampNumber(settings.cols, 4, 30, 15);
   const boxColor = sanitizeColor(settings.boxColor, '#818cf8');
 
-  const grid = useMemo(() => {
-    const result: { color: string; delay: number; duration: number }[][] = [];
-    for (let i = 0; i < rows; i++) {
-      const row: { color: string; delay: number; duration: number }[] = [];
-      for (let j = 0; j < cols; j++) {
-        row.push({
-          color:
-            boxColor === '#818cf8' ? COLORS[Math.floor(Math.random() * COLORS.length)] : boxColor,
-          delay: Math.random() * 8,
-          duration: 3 + Math.random() * 4,
-        });
-      }
-      result.push(row);
+  const cells = useMemo(() => {
+    const result: { color: string; delay: number; duration: number }[] = [];
+    for (let i = 0; i < rows * cols; i++) {
+      result.push({
+        color:
+          boxColor === '#818cf8' ? COLORS[Math.floor(Math.random() * COLORS.length)] : boxColor,
+        delay: Math.random() * 8,
+        duration: 3 + Math.random() * 4,
+      });
     }
     return result;
   }, [rows, cols, boxColor]);
@@ -42,43 +38,33 @@ export default React.memo(function BackgroundBoxes({ settings }: Props) {
   return (
     <div className="absolute inset-0 overflow-hidden">
       <div
-        className="absolute -top-1/4 left-1/4 flex h-full w-full p-4"
         style={{
-          transform:
-            'translate(-40%, -60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)',
+          position: 'absolute',
+          top: '-100%',
+          left: '-100%',
+          width: '300%',
+          height: '300%',
+          display: 'grid',
+          gridTemplateRows: `repeat(${rows}, 1fr)`,
+          gridTemplateColumns: `repeat(${cols}, 1fr)`,
+          transform: 'skewX(-48deg) skewY(14deg) scale(0.675) translateZ(0)',
+          transformOrigin: 'center center',
         }}
       >
-        {grid.map((row, i) => (
-          <div key={i} className="relative h-8 w-16 border-l border-slate-700">
-            {row.map((cell, j) => (
-              <motion.div
-                key={j}
-                className="relative h-8 w-16 border-r border-t border-slate-700"
-                initial={{ opacity: 0 }}
-                animate={{ opacity: [0, 0.15, 0] }}
-                transition={{
-                  duration: cell.duration,
-                  delay: cell.delay,
-                  repeat: Infinity,
-                  ease: 'easeInOut',
-                }}
-                style={{ backgroundColor: cell.color }}
-              >
-                {j % 2 === 0 && i % 2 === 0 && (
-                  <svg
-                    xmlns="http://www.w3.org/2000/svg"
-                    fill="none"
-                    viewBox="0 0 24 24"
-                    strokeWidth="1.5"
-                    stroke="currentColor"
-                    className="pointer-events-none absolute -left-[22px] -top-[14px] h-6 w-10 stroke-[1px] text-slate-700"
-                  >
-                    <path strokeLinecap="round" strokeLinejoin="round" d="M12 6v12m6-6H6" />
-                  </svg>
-                )}
-              </motion.div>
-            ))}
-          </div>
+        {cells.map((cell, i) => (
+          <motion.div
+            key={i}
+            className="border border-slate-700/50"
+            initial={{ opacity: 0 }}
+            animate={{ opacity: [0, 0.15, 0] }}
+            transition={{
+              duration: cell.duration,
+              delay: cell.delay,
+              repeat: Infinity,
+              ease: 'easeInOut',
+            }}
+            style={{ backgroundColor: cell.color }}
+          />
         ))}
       </div>
     </div>