etkr4k/bedolaga-cabinet
1
0
Fork 0
mirror of https://github.com/chillpadclub/bedolaga-cabinet.git synced 2026-07-28 09:33:46 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: boxes background not covering viewport

Browse Source 
- 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
This commit is contained in:
Fringg
2026-02-25 07:57:56 +03:00
parent f16f96e442
commit 65afb29274
1 changed files with 35 additions and 49 deletions
Download Patch File Download Diff File Expand all files Collapse all files

84
src/components/ui/backgrounds/background-boxes.tsx
View File

@@ -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>