From ae171fd96152d60d2d8652f65c08bba4e882506c Mon Sep 17 00:00:00 2001
From: Decobus <deco@deco.sh>
Date: Tue, 22 Jul 2025 16:42:24 -0400
Subject: [PATCH] Fix status dot alignment in Footer component

- Restructure connection status layout for better hierarchy
- Move status dot to be inline with Connected/Disconnected text
- Use proper flex alignment (items-center) for dot and text
- Separate title from status indicator for cleaner UI
- Maintain consistent spacing with gap-2
---
 components/Footer.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Footer.tsx b/components/Footer.tsx
index 9d2e03c..edbcb26 100644
--- a/components/Footer.tsx
+++ b/components/Footer.tsx
@@ -81,10 +81,10 @@ export default function Footer() {
         <div className="grid-2">
           {/* Connection Status */}
           <div>
-            <div className="flex items-center gap-3 mb-4">
-              <div className={`status-dot ${obsStatus?.connected ? 'connected' : 'disconnected'}`}></div>
-              <div>
-                <h3 className="font-semibold">OBS Studio</h3>
+            <div className="mb-4">
+              <h3 className="font-semibold mb-2">OBS Studio</h3>
+              <div className="flex items-center gap-2">
+                <div className={`status-dot ${obsStatus?.connected ? 'connected' : 'disconnected'}`}></div>
                 <p className="text-sm opacity-60">
                   {obsStatus?.connected ? 'Connected' : 'Disconnected'}
                 </p>