From 0977367692abd410e3ca92f196dcb58479dca6fb Mon Sep 17 00:00:00 2001
From: Guido X Jansen <x@gui.do>
Date: Thu, 5 Mar 2026 21:41:43 +0100
Subject: [PATCH] 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.
---
 src/components/auth-gate.tsx           |  2 +-
 src/components/reply-composer.tsx      | 10 ++++++----
 src/components/topic-detail-client.tsx |  2 +-
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/components/auth-gate.tsx b/src/components/auth-gate.tsx
index 6a85d44..2ec5eb9 100644
--- a/src/components/auth-gate.tsx
+++ b/src/components/auth-gate.tsx
@@ -16,7 +16,7 @@ export function AuthGate({ message, className }: AuthGateProps) {
   return (
     <div
       className={cn(
-        'fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60',
+        'sticky bottom-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60',
         className
       )}
     >
diff --git a/src/components/reply-composer.tsx b/src/components/reply-composer.tsx
index 4777e72..49a2067 100644
--- a/src/components/reply-composer.tsx
+++ b/src/components/reply-composer.tsx
@@ -1,5 +1,7 @@
 /**
- * ReplyComposer - Fixed bottom bar for replying to topics and replies.
+ * ReplyComposer - Sticky bottom bar for replying to topics and replies.
+ * Sticks to viewport bottom while scrolling; settles into flow at page end
+ * so the footer remains accessible.
  * Collapse/expand states, reply targeting with quote banner.
  * Supports keyboard shortcuts: `r` to open (via imperative ref), `Escape` to collapse.
  */
@@ -170,7 +172,7 @@ export const ReplyComposer = forwardRef<ReplyComposerHandle, ReplyComposerProps>
       return (
         <div
           className={cn(
-            'fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-muted/80 backdrop-blur',
+            'sticky bottom-0 z-30 border-t border-border bg-muted/80 backdrop-blur',
             className
           )}
         >
@@ -186,7 +188,7 @@ export const ReplyComposer = forwardRef<ReplyComposerHandle, ReplyComposerProps>
       return (
         <div
           className={cn(
-            'fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60',
+            'sticky bottom-0 z-30 border-t border-border bg-background/95 backdrop-blur supports-[backdrop-filter]:bg-background/60',
             className
           )}
         >
@@ -208,7 +210,7 @@ export const ReplyComposer = forwardRef<ReplyComposerHandle, ReplyComposerProps>
       <div
         ref={composerRef}
         className={cn(
-          'fixed bottom-0 left-0 right-0 z-30 border-t border-border bg-background shadow-lg',
+          'sticky bottom-0 z-30 border-t border-border bg-background shadow-lg',
           className
         )}
       >
diff --git a/src/components/topic-detail-client.tsx b/src/components/topic-detail-client.tsx
index 1ceb92f..877d46d 100644
--- a/src/components/topic-detail-client.tsx
+++ b/src/components/topic-detail-client.tsx
@@ -166,7 +166,7 @@ export function TopicDetailClient({ topic, replies }: TopicDetailClientProps) {
       </div>
 
       {/* Reply thread with reply buttons */}
-      <div className="mt-8 pb-16">
+      <div className="mt-8">
         <ReplyThread
           replies={replies}
           topicUri={topic.uri}
-- 
2.51.2