danabra.mov / sidetrail
an app to share curated trails sidetrail.app
atproto nextjs react rsc
50
fork

Configure Feed

Select the types of activity you want to include in your feed.

fix top back button being slightly bigger than viewport

`BackButton-top`'s width is set to `100vw` which makes it "leak". this saves the issue by moving it out of width-limiting elements and tweaking it's dimensions :>

authored by

koi.rip and committed by tangled.org 86523d5c a22c9810

+7 -7
+2 -3
app/BackButton.css
··· 26 26 } 27 27 28 28 .BackButton-top { 29 - width: 100vw; 29 + width: 100%; 30 30 align-self: center; 31 - margin: -2rem 0 1rem; 32 - padding: 2.5rem 0 0.5rem; 31 + padding-top: 2.5rem; 33 32 transition: 34 33 background 0.2s ease, 35 34 text-decoration 0.2s ease;
+1 -1
app/at/(trail)/[handle]/trail/[rkey]/TrailOverview.css
··· 18 18 position: relative; 19 19 max-width: 600px; 20 20 margin: 0 auto; 21 - padding: 2rem 2rem 4rem; 21 + padding: 1.5rem 2rem 4rem; 22 22 display: flex; 23 23 flex-direction: column; 24 24 }
+2 -2
app/at/(trail)/[handle]/trail/[rkey]/TrailOverview.tsx
··· 175 175 } as React.CSSProperties 176 176 } 177 177 > 178 - <div className="TrailOverview"> 179 - <BackButton fallbackPath={isEditing ? "/drafts" : "/"} variant="top" /> 178 + <BackButton fallbackPath={isEditing ? "/drafts" : "/"} variant="top" /> 180 179 180 + <div className="TrailOverview"> 181 181 <div className="TrailOverview-header"> 182 182 {isEditing ? ( 183 183 <>
+2 -1
app/at/(trail)/[handle]/trail/[rkey]/TrailWalk.tsx
··· 225 225 } as React.CSSProperties 226 226 } 227 227 > 228 + <BackButton fallbackPath="/" variant="top" /> 229 + 228 230 <div className="TrailWalk"> 229 - <BackButton fallbackPath="/" variant="top" /> 230 231 <TrailHeader title={header.title} description={header.description} /> 231 232 232 233 <div className="TrailWalk-progressSticky">