From 5f234938b8d02bc412e8b6bd85fbc64e12e0a98c Mon Sep 17 00:00:00 2001
From: Tudor Stanciu <tudor.stanciu94@gmail.com>
Date: Sun, 10 Nov 2024 02:19:57 +0200
Subject: [PATCH] Refactor SystemVersionComponent to remove unused imports and
 update styling

---
 .../about/system/SystemVersionComponent.tsx   | 31 ++++++-------------
 1 file changed, 9 insertions(+), 22 deletions(-)

diff --git a/frontend/src/features/about/system/SystemVersionComponent.tsx b/frontend/src/features/about/system/SystemVersionComponent.tsx
index 8465ec1..39fa583 100644
--- a/frontend/src/features/about/system/SystemVersionComponent.tsx
+++ b/frontend/src/features/about/system/SystemVersionComponent.tsx
@@ -1,5 +1,4 @@
-import React, { useMemo, useEffect, useState } from "react";
-import PropTypes from "prop-types";
+import React, { useMemo } from "react";
 import { List, ListItem, ListItemText, ListItemAvatar, Theme } from "@mui/material";
 import Avatar from "@mui/material/Avatar";
 import WebAssetIcon from "@mui/icons-material/WebAsset";
@@ -37,25 +36,6 @@ const SystemVersionComponent: React.FC<Props> = ({ data }) => {
   const { t } = useTranslation();
   const theme = useTheme();
   const styles = useMemo(() => getStyles(theme), [theme]);
-  const [listClass, setListClass] = useState(styles.horizontally);
-
-  useEffect(() => {
-    const mediaQuery = window.matchMedia("(max-width: 800px)");
-
-    const handleMatches = (event: MediaQueryListEvent) => {
-      const cssClass: any = event.matches ? styles.vertical : styles.horizontally;
-      setListClass(cssClass);
-    };
-
-    mediaQuery.addEventListener("change", handleMatches);
-
-    // Initial check
-    handleMatches(mediaQuery as unknown as MediaQueryListEvent);
-
-    return () => {
-      mediaQuery.removeEventListener("change", handleMatches);
-    };
-  }, [styles.horizontally, styles.vertical]);
 
   const lastReleaseDate = useMemo(() => {
     const format = "DD-MM-YYYY HH:mm:ss";
@@ -85,7 +65,14 @@ const SystemVersionComponent: React.FC<Props> = ({ data }) => {
 
   return (
     <Paper variant="outlined">
-      <List sx={listClass}>
+      <List
+        sx={{
+          display: { xs: "block", md: "flex" },
+          flexDirection: { md: "row" },
+          padding: 0,
+          width: "100%"
+        }}
+      >
         <ListItem>
           <ListItemAvatar>
             <Avatar sx={styles.versionAvatar}>