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

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
unified split
+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">