From ea23b66cbf2b9b0a487059cef9f8f148b0d17a21 Mon Sep 17 00:00:00 2001
From: cottongin <cottongin@users.noreply.github.com>
Date: Sun, 5 Apr 2026 04:49:17 -0400
Subject: [PATCH] feat: move presence bar to sticky bottom-right widget

Reposition the presence bar from above main content to a sticky
bottom-right indicator that docks above the footer on scroll.
Sized to fit content rather than spanning full width.

Made-with: Cursor
---
 frontend/src/App.jsx                    | 6 +++---
 frontend/src/components/PresenceBar.jsx | 4 ++--
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 443a233..e195902 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -157,9 +157,6 @@ function App() {
         </div>
       </nav>
 
-      {/* Admin Presence */}
-      <PresenceBar />
-
       {/* Main Content */}
       <main className="container mx-auto px-4 py-8 flex-grow">
         <Routes>
@@ -172,6 +169,9 @@ function App() {
         </Routes>
       </main>
 
+      {/* Admin Presence */}
+      <PresenceBar />
+
       {/* Footer */}
       <footer className="bg-white dark:bg-gray-800 border-t border-gray-200 dark:border-gray-700 mt-12 flex-shrink-0">
         <div className="container mx-auto px-4 py-6">
diff --git a/frontend/src/components/PresenceBar.jsx b/frontend/src/components/PresenceBar.jsx
index f9a0bb5..e885ccb 100644
--- a/frontend/src/components/PresenceBar.jsx
+++ b/frontend/src/components/PresenceBar.jsx
@@ -46,8 +46,8 @@ function PresenceBar() {
   if (!hasViewers && !hasServices) return null;
 
   return (
-    <div className="container mx-auto px-2 sm:px-4 pt-3">
-      <div className="bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 px-4 py-2">
+    <div className="sticky bottom-0 z-40 flex justify-end px-4 pb-2 pointer-events-none">
+      <div className="pointer-events-auto bg-white dark:bg-gray-800 rounded-lg shadow-sm border border-gray-200 dark:border-gray-700 px-4 py-2 w-fit">
         <div className="flex items-center gap-4 flex-wrap">
           {hasViewers && (
             <div className="flex items-center gap-2">