koi.rip
"breaking out" of containers like that is generally not a good practice. this sets TrailWalk-progressSticky's width to 100%, removes that margin black magic and TrailWalk's 800px width limit (other children that need one have their own anyway)
+1
-6
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.css
+1
-6
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.css
···
16
16
17
17
.TrailWalk {
18
18
position: relative;
19
-
max-width: 800px;
20
19
margin: 0 auto;
21
20
padding: 1.5rem 1rem 3rem;
22
21
display: flex;
23
22
flex-direction: column;
24
23
}
25
24
26
25
.TrailWalk-progressSticky {
27
26
position: sticky;
27
+
width: 100%;
28
28
top: 0;
29
29
z-index: 10;
30
30
padding: 1rem 0 0;
31
31
margin-bottom: 1.5rem;
32
32
border-bottom: 1px solid var(--border-subtle);
33
33
backdrop-filter: blur(8px);
34
34
isolation: isolate;
35
-
/* Break out of container to span full width */
36
-
margin-left: calc(-50vw + 50%);
37
-
margin-right: calc(-50vw + 50%);
38
-
padding-left: calc(50vw - 50%);
39
-
padding-right: calc(50vw - 50%);
40
35
}
41
36
42
37
.TrailWalk-progressSticky::before {