Fixing look

src/components/GamingCard.tsx

@@ -58,6 +58,7 @@ const GamingCard: FC = () => {
         }
       } catch {
         if (!stopped) {
+          setStatus(undefined);
           setFetchError(true);
         }
       } finally {
@@ -83,65 +84,59 @@ const GamingCard: FC = () => {
 
   return (
     <Card>
-      <CardTitle>Gaming</CardTitle>
+      <CardTitle>Bureau Gaming</CardTitle>
 
       <CardBody>
-        {!status && !fetchError ? (
+        {!status && !fetchError && (
           <Spinner size="md" />
-        ) : (
+        )}
+  
+        {fetchError && (
+          <Alert
+            isInline
+            variant="danger"
+            title="Gaming status unavailable"
+          >
+            The Sunshine status service did not respond
+            within one second.
+          </Alert>
+        )}
+
+        {status && !fetchError && (
           <>
-            {fetchError && (
-              <Alert
-                isInline
-                variant="warning"
-                title="Gaming status unavailable"
-              >
-                The Sunshine status service did not respond
-                within one second.
-              </Alert>
+            <p>
+              Current game:{' '}
+              <strong>
+                {status.game.running
+                  ? status.game.name ?? 'Unknown game'
+                  : 'None'}
+              </strong>
+            </p>
+
+            {status.game.running && (
+              <p style={{ fontSize: '0.875rem' }}>
+                CPU:{' '}
+                <strong>
+                  {status.game.cpuPercent.toFixed(1)}%
+                </strong>
+                {' / '}
+                RAM:{' '}
+                <strong>
+                  {status.game.memoryMiB.toFixed(1)} MiB
+                </strong>
+              </p>
             )}
 
-            {status && (
-              <>
-                <p>
-                  Current game:{' '}
-                  <strong>
-                    {status.game.running
-                      ? status.game.name ?? 'Unknown game'
-                      : 'None'}
-                  </strong>
-                </p>
-
-                {status.game.running && (
-                  <>
-                    <p>
-                      CPU:{' '}
-                      <strong>
-                        {status.game.cpuPercent.toFixed(1)}%
-                      </strong>
-                    </p>
-
-                    <p>
-                      RAM:{' '}
-                      <strong>
-                        {status.game.memoryMiB.toFixed(1)} MiB
-                      </strong>
-                    </p>
-                  </>
-                )}
-
-                <p>
-                  Sunshine session:{' '}
-                  <strong>
-                    {status.sunshine.sessionActive
-                      ? status.sunshine.sessions > 1
-                        ? `Yes (${status.sunshine.sessions})`
-                        : 'Yes'
-                      : 'No'}
-                  </strong>
-                </p>
-              </>
-            )}
+            <p>
+              Sunshine session:{' '}
+              <strong>
+                {status.sunshine.sessionActive
+                  ? status.sunshine.sessions > 1
+                    ? `Yes (${status.sunshine.sessions})`
+                    : 'Yes'
+                  : 'No'}
+              </strong>
+            </p>
           </>
         )}
       </CardBody>

src/components/NowPlayingCard.tsx

@@ -96,7 +96,7 @@ const NowPlayingCard: FC = () => {
                 title="MPD unavailable"
               >
                 {status?.error ?? 'Unable to contact MPD.'}
-              </Alert>
+              </Alert><br /><br />
             )}
 
             {status?.available ? (