Barazo default frontend
barazo.forum
fix(ui): use sticky positioning for reply composer and auth gate (#181)
Replace fixed positioning with sticky bottom-0 so the reply bar
sticks to the viewport while scrolling but settles into document
flow at the page bottom, making the footer accessible.
authored by
Guido X Jansen
and committed by
GitHub
09773676
8ab8f7f6
+8
-6
+1
-1
src/components/auth-gate.tsx
+1
-1
src/components/auth-gate.tsx
···
16
16
return (
17
17
<div
18
18
className={cn(
19
-
'fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60',
19
+
'sticky bottom-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60',
20
20
className
21
21
)}
22
22
>
+6
-4
src/components/reply-composer.tsx
+6
-4
src/components/reply-composer.tsx
···
1
1
/**
2
-
* ReplyComposer - Fixed bottom bar for replying to topics and replies.
2
+
* ReplyComposer - Sticky bottom bar for replying to topics and replies.
3
+
* Sticks to viewport bottom while scrolling; settles into flow at page end
4
+
* so the footer remains accessible.
3
5
* Collapse/expand states, reply targeting with quote banner.
4
6
* Supports keyboard shortcuts: `r` to open (via imperative ref), `Escape` to collapse.
5
7
*/
···
170
172
return (
171
173
<div
172
174
className={cn(
173
-
'fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-muted/80 backdrop-blur',
175
+
'sticky bottom-0 z-30 border-t border-border bg-muted/80 backdrop-blur',
174
176
className
175
177
)}
176
178
>
···
186
188
return (
187
189
<div
188
190
className={cn(
189
-
'fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60',
191
+
'sticky bottom-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60',
190
192
className
191
193
)}
192
194
>
···
208
210
<div
209
211
ref={composerRef}
210
212
className={cn(
211
-
'fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-background shadow-lg',
213
+
'sticky bottom-0 z-30 border-t border-border bg-background shadow-lg',
212
214
className
213
215
)}
214
216
>