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) { export default React.memo(function BackgroundBoxes({ settings }: Props) {
const rows = clampNumber(settings.rows, 4, 30, 20); const rows = clampNumber(settings.rows, 4, 30, 15);
const cols = clampNumber(settings.cols, 4, 30, 12); const cols = clampNumber(settings.cols, 4, 30, 15);
const boxColor = sanitizeColor(settings.boxColor, '#818cf8'); const boxColor = sanitizeColor(settings.boxColor, '#818cf8');
const grid = useMemo(() => { const cells = useMemo(() => {
const result: { color: string; delay: number; duration: number }[][] = []; const result: { color: string; delay: number; duration: number }[] = [];
for (let i = 0; i < rows; i++) { for (let i = 0; i < rows * cols; i++) {
const row: { color: string; delay: number; duration: number }[] = []; result.push({
for (let j = 0; j < cols; j++) { color:
row.push({ boxColor === '#818cf8' ? COLORS[Math.floor(Math.random() * COLORS.length)] : boxColor,
color: delay: Math.random() * 8,
boxColor === '#818cf8' ? COLORS[Math.floor(Math.random() * COLORS.length)] : boxColor, duration: 3 + Math.random() * 4,
delay: Math.random() * 8, });
duration: 3 + Math.random() * 4,
});
}
result.push(row);
} }
return result; return result;
}, [rows, cols, boxColor]); }, [rows, cols, boxColor]);
@@ -42,43 +38,33 @@ export default React.memo(function BackgroundBoxes({ settings }: Props) {
return ( return (
<div className="absolute inset-0 overflow-hidden"> <div className="absolute inset-0 overflow-hidden">
<div <div
className="absolute -top-1/4 left-1/4 flex h-full w-full p-4"
style={{ style={{
transform: position: 'absolute',
'translate(-40%, -60%) skewX(-48deg) skewY(14deg) scale(0.675) rotate(0deg) translateZ(0)', 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) => ( {cells.map((cell, i) => (
<div key={i} className="relative h-8 w-16 border-l border-slate-700"> <motion.div
{row.map((cell, j) => ( key={i}
<motion.div className="border border-slate-700/50"
key={j} initial={{ opacity: 0 }}
className="relative h-8 w-16 border-r border-t border-slate-700" animate={{ opacity: [0, 0.15, 0] }}
initial={{ opacity: 0 }} transition={{
animate={{ opacity: [0, 0.15, 0] }} duration: cell.duration,
transition={{ delay: cell.delay,
duration: cell.duration, repeat: Infinity,
delay: cell.delay, ease: 'easeInOut',
repeat: Infinity, }}
ease: 'easeInOut', style={{ backgroundColor: cell.color }}
}} />
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>
</div> </div>