From 0f6f03509afe88969f04587810b7629d67ebbb23 Mon Sep 17 00:00:00 2001
From: Myron Blair <myronblair@gmail.com>
Date: Sun, 26 Jul 2026 19:13:45 -0500
Subject: [PATCH] Move service status bar to global chrome, fixed just below
 navbar (admin-only)

---
 frontend/src/App.js                       | 2 ++
 frontend/src/components/ServiceStatus.jsx | 5 ++++-
 frontend/src/pages/Browse.jsx             | 4 ----
 3 files changed, 6 insertions(+), 5 deletions(-)

diff --git a/frontend/src/App.js b/frontend/src/App.js
index 5a561b9..c35b448 100644
--- a/frontend/src/App.js
+++ b/frontend/src/App.js
@@ -5,6 +5,7 @@ import { ProfileProvider, useProfile } from "./lib/profile";
 import ProtectedRoute from "./components/ProtectedRoute";
 import Navbar from "./components/Navbar";
 import GrainOverlay from "./components/GrainOverlay";
+import ServiceStatus from "./components/ServiceStatus";
 import Login from "./pages/Login";
 import Register from "./pages/Register";
 import Browse from "./pages/Browse";
@@ -52,6 +53,7 @@ const Shell = ({ children }) => {
   return (
     <>
       {!hideChrome && user && active && <Navbar />}
+      {!hideChrome && user?.is_admin && active && <ServiceStatus />}
       {children}
       <GrainOverlay />
     </>
diff --git a/frontend/src/components/ServiceStatus.jsx b/frontend/src/components/ServiceStatus.jsx
index 6da0b04..71873f3 100644
--- a/frontend/src/components/ServiceStatus.jsx
+++ b/frontend/src/components/ServiceStatus.jsx
@@ -38,7 +38,10 @@ export default function ServiceStatus() {
   if (!services.length) return null;
 
   return (
-    <div className="px-6 md:px-12 pt-6" data-testid="service-status">
+    <div
+      className="fixed top-16 left-0 right-0 z-40 bg-[#0a0a0a]/95 backdrop-blur border-b border-[#222] px-6 md:px-12 py-2"
+      data-testid="service-status"
+    >
       <div className="flex flex-wrap gap-2">
         {services.map((s) => (
           <div
diff --git a/frontend/src/pages/Browse.jsx b/frontend/src/pages/Browse.jsx
index 6890fd1..206c510 100644
--- a/frontend/src/pages/Browse.jsx
+++ b/frontend/src/pages/Browse.jsx
@@ -1,15 +1,12 @@
 import { useEffect, useState, useCallback } from "react";
 import { useNavigate } from "react-router-dom";
 import api from "../lib/api";
-import { useAuth } from "../lib/auth";
 import Hero from "../components/Hero";
 import Row from "../components/Row";
 import MovieDetailModal from "../components/MovieDetailModal";
-import ServiceStatus from "../components/ServiceStatus";
 
 export default function Browse() {
   const nav = useNavigate();
-  const { user } = useAuth();
   const [featured, setFeatured] = useState(null);
   const [movies, setMovies] = useState([]);
   const [genres, setGenres] = useState([]);
@@ -60,7 +57,6 @@ export default function Browse() {
       )}
 
       <div className="-mt-20 relative z-10 pb-24">
-        {user?.is_admin && <ServiceStatus />}
         {continueWatching.length > 0 && (
           <Row title="Resume" movies={continueWatching} onCardClick={handleMore} progressMap={progressMap} />
         )}