an app to share curated trails
sidetrail.app
atproto
nextjs
react
rsc
fix overflow on mobile
+31
-8
+1
-1
app/(home)/drafts/DraftsClientPage.tsx
+1
-1
app/(home)/drafts/DraftsClientPage.tsx
···
44
44
accentColor={draft.accentColor}
45
45
backgroundColor={draft.backgroundColor}
46
46
linkTo={`/drafts/${draft.rkey}`}
47
-
dots={[]}
47
+
dots={Array(draft.stopsCount).fill("upcoming")}
48
48
onDelete={() => handleDelete(draft.rkey)}
49
49
deleteLabel="delete draft"
50
50
deleteConfirmMessage="delete this draft?"
+8
-1
app/(home)/walking/HomeWalkingPill.css
+8
-1
app/(home)/walking/HomeWalkingPill.css
···
80
80
display: flex;
81
81
align-items: center;
82
82
gap: 0;
83
+
min-width: 0;
84
+
flex: 1 1 0;
83
85
}
84
86
85
87
.HomeWalkingPill-dotWrapper {
86
88
display: flex;
87
89
align-items: center;
90
+
flex-shrink: 1;
91
+
min-width: 0;
88
92
}
89
93
90
94
.HomeWalkingPill-dot {
91
95
width: 12px;
92
96
height: 12px;
93
97
border-radius: 50%;
98
+
flex-shrink: 0;
94
99
transition: all 0.3s ease;
95
100
}
96
101
···
121
126
122
127
.HomeWalkingPill-line {
123
128
width: 20px;
129
+
min-width: 2px;
124
130
height: 2px;
125
131
background-color: rgba(0, 0, 0, 0.08);
126
-
margin: 0 4px;
132
+
margin: 0 2px;
133
+
flex-shrink: 1;
127
134
}
128
135
129
136
@media (prefers-color-scheme: dark) {
+22
-6
app/at/(trail)/[handle]/trail/[rkey]/TrailProgress.css
+22
-6
app/at/(trail)/[handle]/trail/[rkey]/TrailProgress.css
···
28
28
display: flex;
29
29
align-items: center;
30
30
gap: 0;
31
+
min-width: 0;
32
+
flex: 1 1 0;
33
+
justify-content: center;
31
34
}
32
35
33
36
.TrailProgress-nodeWrapper {
34
37
display: flex;
35
38
align-items: center;
39
+
flex-shrink: 1;
40
+
min-width: 0;
36
41
}
37
42
38
43
.TrailProgress-node {
39
44
width: 8px;
40
45
height: 8px;
41
46
border-radius: 50%;
42
-
transition: all 0.4s ease;
47
+
transition:
48
+
transform 0.2s ease,
49
+
opacity 0.2s ease,
50
+
box-shadow 0.2s ease;
43
51
position: relative;
52
+
flex-shrink: 0;
44
53
}
45
54
46
55
.TrailProgress-node--clickable {
···
92
101
box-shadow: 0 0 0 4px var(--accent-color-transparent);
93
102
}
94
103
50% {
95
-
box-shadow: 0 0 0 5px var(--accent-color-transparent);
104
+
box-shadow: 0 0 0 6px var(--accent-color-transparent);
96
105
}
97
106
}
98
107
···
123
132
124
133
.TrailProgress-line {
125
134
width: 14px;
135
+
min-width: 2px;
126
136
height: 2px;
127
137
background-color: rgba(0, 0, 0, 0.08);
128
-
margin: 0 2px;
129
-
flex-shrink: 0;
138
+
margin: 0 1px;
139
+
flex-shrink: 1;
130
140
}
131
141
132
142
@media (prefers-color-scheme: dark) {
···
199
209
200
210
.TrailProgress-line {
201
211
width: 18px;
202
-
margin: 0 3px;
212
+
min-width: 3px;
213
+
margin: 0 2px;
203
214
}
204
215
}
205
216
···
209
220
gap: 2rem;
210
221
}
211
222
223
+
.TrailProgress-path {
224
+
flex: 0 1 auto;
225
+
}
226
+
212
227
.TrailProgress-node {
213
228
width: 12px;
214
229
height: 12px;
···
220
235
221
236
.TrailProgress-line {
222
237
width: 24px;
223
-
margin: 0 4px;
238
+
min-width: 4px;
239
+
margin: 0 3px;
224
240
}
225
241
226
242
.TrailProgress-statusWalking,