openstatus.dev
Openstatus
www.openstatus.dev
fix: pattern not repeating & screen overflow due to mouse effect (#171)
* update: className to absolute from fixed
* fix: overflow & background repetition
* fix: empty-screen
* update: removed not required z-index class
authored by
Kartik Khorwal
and committed by
GitHub
c2146a96
eab83bba
+28
-25
+28
-25
apps/web/src/app/_components/background.tsx
+28
-25
apps/web/src/app/_components/background.tsx
···
13
13
useMouseMove();
14
14
return (
15
15
<>
16
-
<div className="absolute -z-50 h-full w-full">
17
-
<div className="bg-muted-foreground/20 absolute inset-0 z-[-1]" />
18
-
<div className="bg-gradient-radial from-muted-foreground/80 absolute left-[--x] top-[--y] z-[-1] h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full from-0% to-transparent to-90% blur-md" />
19
-
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
20
-
<defs>
21
-
<pattern
22
-
id="dotted-pattern"
23
-
width="16"
24
-
height="16"
25
-
patternUnits="userSpaceOnUse"
26
-
>
27
-
<circle cx="2" cy="2" r="1" fill="black" />
28
-
</pattern>
29
-
<mask id="dots-mask">
30
-
<rect width="100%" height="100%" fill="white" />
31
-
<rect width="100%" height="100%" fill="url(#dotted-pattern)" />
32
-
</mask>
33
-
</defs>
34
-
<rect
35
-
width="100%"
36
-
height="100%"
37
-
fill="hsl(var(--background))"
38
-
mask="url(#dots-mask)"
39
-
/>
40
-
</svg>
16
+
<div className="fixed top-0 left-0 -z-50">
17
+
<div className="sticky top-0 left-0 h-screen w-screen overflow-hidden">
18
+
<div className="bg-muted-foreground/20 absolute inset-0 z-[-1]" />
19
+
<div className="bg-gradient-radial from-muted-foreground/80 absolute left-[--x] top-[--y] z-[-1] h-56 w-56 -translate-x-1/2 -translate-y-1/2 rounded-full from-0% to-transparent to-90% blur-md" />
20
+
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
21
+
<defs>
22
+
<pattern
23
+
id="dotted-pattern"
24
+
width="16"
25
+
height="16"
26
+
patternUnits="userSpaceOnUse"
27
+
>
28
+
<circle cx="2" cy="2" r="1" fill="black" />
29
+
</pattern>
30
+
<mask id="dots-mask">
31
+
<rect width="100%" height="100%" fill="white" />
32
+
<rect width="100%" height="100%" fill="url(#dotted-pattern)" />
33
+
</mask>
34
+
</defs>
35
+
<rect
36
+
width="100%"
37
+
height="100%"
38
+
fill="hsl(var(--background))"
39
+
mask="url(#dots-mask)"
40
+
/>
41
+
</svg>
42
+
</div>
41
43
</div>
44
+
42
45
{children}
43
46
</>
44
47
);