From f16f96e442506484eae9434ae51c5f0f2fc45729 Mon Sep 17 00:00:00 2001
From: Fringg <egor.andrianovv@gmail.com>
Date: Wed, 25 Feb 2026 07:53:30 +0300
Subject: [PATCH] fix: boxes background not covering full screen

- Use original Aceternity positioning: translate(-40%,-60%) with
  -top-1/4 left-1/4 to cover viewport after skew transform
- Switch from CSS grid to flex layout matching original structure
- Add cross (+) SVG markers at grid intersections
- Use pastel color palette from original, animate opacity per cell
- Increase default rows to 20 for better coverage
---
 .../ui/backgrounds/background-boxes.tsx       | 94 ++++++++++++-------
 src/components/ui/backgrounds/registry.ts     | 12 +--
 2 files changed, 68 insertions(+), 38 deletions(-)

diff --git a/src/components/ui/backgrounds/background-boxes.tsx b/src/components/ui/backgrounds/background-boxes.tsx
index 78decc0..0f000dc 100644
--- a/src/components/ui/backgrounds/background-boxes.tsx
+++ b/src/components/ui/backgrounds/background-boxes.tsx
@@ -1,4 +1,4 @@
-import { useMemo } from 'react';
+import React, { useMemo } from 'react';
 import { motion } from 'framer-motion';
 import { sanitizeColor, clampNumber } from './types';
 
@@ -6,17 +6,35 @@ interface Props {
   settings: Record<string, unknown>;
 }
 
-export default function BackgroundBoxes({ settings }: Props) {
-  const rows = clampNumber(settings.rows, 2, 30, 12);
-  const cols = clampNumber(settings.cols, 2, 30, 12);
+const COLORS = [
+  '#93c5fd',
+  '#f9a8d4',
+  '#86efac',
+  '#fde047',
+  '#fca5a5',
+  '#d8b4fe',
+  '#a5b4fc',
+  '#c4b5fd',
+];
+
+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 boxColor = sanitizeColor(settings.boxColor, '#818cf8');
 
-  const boxes = useMemo(() => {
-    const result: { row: number; col: number; color: string }[] = [];
-    for (let r = 0; r < rows; r++) {
-      for (let c = 0; c < cols; c++) {
-        result.push({ row: r, col: c, color: boxColor });
+  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);
     }
     return result;
   }, [rows, cols, boxColor]);
@@ -24,33 +42,45 @@ export default function BackgroundBoxes({ settings }: Props) {
   return (
     <div className="absolute inset-0 overflow-hidden">
       <div
-        className="absolute inset-0"
+        className="absolute -top-1/4 left-1/4 flex h-full w-full p-4"
         style={{
-          display: 'grid',
-          gridTemplateRows: `repeat(${rows}, 1fr)`,
-          gridTemplateColumns: `repeat(${cols}, 1fr)`,
-          transform: 'skewX(-48deg) skewY(14deg) scale(0.675) translateX(10%)',
-          transformOrigin: 'center center',
+          transform:
+            'translate(-40%, -60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)',
         }}
       >
-        {boxes.map((box, i) => (
-          <motion.div
-            key={i}
-            className="border border-white/5"
-            initial={{ opacity: 0 }}
-            animate={{
-              opacity: [0, 0.08, 0],
-            }}
-            transition={{
-              duration: 3 + Math.random() * 4,
-              delay: Math.random() * 5,
-              repeat: Infinity,
-              ease: 'easeInOut',
-            }}
-            style={{ backgroundColor: box.color }}
-          />
+        {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>
         ))}
       </div>
     </div>
   );
-}
+});
diff --git a/src/components/ui/backgrounds/registry.ts b/src/components/ui/backgrounds/registry.ts
index 7f1925a..45aa514 100644
--- a/src/components/ui/backgrounds/registry.ts
+++ b/src/components/ui/backgrounds/registry.ts
@@ -337,17 +337,17 @@ export const backgroundRegistry: BackgroundDefinition[] = [
         key: 'rows',
         label: 'admin.backgrounds.rows',
         type: 'number',
-        min: 4,
-        max: 20,
-        step: 1,
-        default: 12,
+        min: 10,
+        max: 40,
+        step: 5,
+        default: 20,
       },
       {
         key: 'cols',
         label: 'admin.backgrounds.cols',
         type: 'number',
-        min: 4,
-        max: 20,
+        min: 5,
+        max: 25,
         step: 1,
         default: 12,
       },