Update ServerRow.tsx

kokofixcomputers · Oct 8, 2024 · 6972b62 · 6972b62
1 parent a9d997d
commit 6972b62
Showing 1 changed file with 10 additions and 8 deletions.
diff --git a/resources/scripts/components/dashboard/ServerRow.tsx b/resources/scripts/components/dashboard/ServerRow.tsx
@@ -46,7 +46,7 @@ const StatusIndicatorBox = styled(GreyRowBox)<{ $status: ServerPowerState | unde
 type Timer = ReturnType<typeof setInterval>;
 
 export default ({ server, className }: { server: Server; className?: string }) => {
-    const interval = useRef<Timer>(null) as React.MutableRefObject<Timer>;
+    const interval = useRef<Timer | null>(null) as React.MutableRefObject<Timer | null>;
     const [isSuspended, setIsSuspended] = useState(server.status === 'suspended');
     const [stats, setStats] = useState<ServerStats | null>(null);
 
@@ -67,7 +67,9 @@ export default ({ server, className }: { server: Server; className?: string }) =
         });
 
         return () => {
-            interval.current && clearInterval(interval.current);
+            if (interval.current) {
+                clearInterval(interval.current);
+            }
         };
     }, [isSuspended]);
 
@@ -105,13 +107,13 @@ export default ({ server, className }: { server: Server; className?: string }) =
                 <div css={tw`flex flex-col col-span-full sm:flex-row items-baseline justify-center`}>
                     {!stats || isSuspended ? (
                         isSuspended ? (
-                            <div css={tw`flex-1 text-center`}>
+                            <div css={tw`flex justify-center flex-col items-center`}>
                                 <span css={tw`bg-red-500 rounded px-2 py-1 text-red-100 text-xs`}>
                                     {server.status === 'suspended' ? 'Suspended' : 'Connection Error'}
                                 </span>
                             </div>
                         ) : server.isTransferring || server.status ? (
-                            <div css={tw`flex-1 text-center`}>
+                            <div css={tw`flex justify-center flex-col items-center`}>
                                 <span css={tw`bg-neutral-500 rounded px-2 py-1 text-neutral-100 text-xs`}>
                                     {server.isTransferring
                                         ? 'Transferring'
@@ -129,25 +131,25 @@ export default ({ server, className }: { server: Server; className?: string }) =
                 </div>
             </div>
             {stats && (
-                <div css={tw`flex items-baseline justify-center col-span-full`}>
+                <div css={tw`flex items-baseline justify-between col-span-full sm:flex-row sm:justify-around`}>
                     <React.Fragment>
-                        <div css={tw`flex flex-col items-center sm:block hidden`}>
+                        <div css={tw`flex flex-col items-center sm:block`}>
                             <div css={tw`flex justify-center text-neutral-500`}>
                                 <Icon.Cpu size={20} />
                                 <IconDescription $alarm={alarms.cpu}>
                                     {stats.cpuUsagePercent.toFixed(2)}%
                                 </IconDescription>
                             </div>
                         </div>
-                        <div css={tw`flex flex-col items-center sm:block hidden`}>
+                        <div css={tw`flex flex-col items-center sm:block`}>
                             <div css={tw`flex justify-center text-gray-500`}>
                                 <Icon.PieChart size={20} />
                                 <IconDescription $alarm={alarms.memory}>
                                     {bytesToString(stats.memoryUsageInBytes)}
                                 </IconDescription>
                             </div>
                         </div>
-                        <div css={tw`flex flex-col items-center sm:block hidden`}>
+                        <div css={tw`flex flex-col items-center sm:block`}>
                             <div css={tw`flex justify-center text-gray-500`}>
                                 <Icon.HardDrive size={20} />
                                 <IconDescription>{bytesToString(stats?.diskUsageInBytes)}</IconDescription>