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
+1
-6
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.css
+1
-6
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.css
···
16
17
.TrailWalk {
18
position: relative;
19
-
max-width: 800px;
20
margin: 0 auto;
21
padding: 1.5rem 1rem 3rem;
22
display: flex;
···
25
26
.TrailWalk-progressSticky {
27
position: sticky;
28
top: 0;
29
z-index: 10;
30
padding: 1rem 0 0;
···
32
border-bottom: 1px solid var(--border-subtle);
33
backdrop-filter: blur(8px);
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
}
41
42
.TrailWalk-progressSticky::before {
···
16
17
.TrailWalk {
18
position: relative;
19
margin: 0 auto;
20
padding: 1.5rem 1rem 3rem;
21
display: flex;
···
24
25
.TrailWalk-progressSticky {
26
position: sticky;
27
+
width: 100%;
28
top: 0;
29
z-index: 10;
30
padding: 1rem 0 0;
···
32
border-bottom: 1px solid var(--border-subtle);
33
backdrop-filter: blur(8px);
34
isolation: isolate;
35
}
36
37
.TrailWalk-progressSticky::before {