deco/obs-ss-plugin-webui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Fix status dot alignment in Footer component

Browse source 
- 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
This commit is contained in:
Decobus 2025-07-22 16:42:24 -04:00
parent 7302a38ceb
commit ae171fd961
1 changed files with 4 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

8
components/Footer.tsx
View file

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