Refactor SystemVersionComponent to remove unused imports and update styling

frontend/src/features/about/system/SystemVersionComponent.tsx

@@ -1,5 +1,4 @@
-import React, { useMemo, useEffect, useState } from "react";
+import React, { useMemo } from "react";
-import PropTypes from "prop-types";
 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}>