danabra.mov
an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
fix trail walk progress being slightly bigger than viewport
"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)
authored by
+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;
···
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;
···
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 {