Further small screen adjustments

client/src/components/Server/ExpansionsBar.tsx

@@ -1,10 +1,4 @@
-import {
-  Box,
-  ToggleButton,
-  ToggleButtonGroup,
-  Tooltip,
-  useMediaQuery,
-} from '@mui/material';
+import { Box, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
 import { ServerData } from '../../data/ServerData';
 
 const expansionButtons = [
@@ -12,7 +6,7 @@ const expansionButtons = [
     key="rotz"
     value="rotz"
     aria-label="rotz-enabled"
-    className="py-0"
+    className="px-1 py-0"
     disabled
   >
     RotZ
@@ -21,7 +15,7 @@ const expansionButtons = [
     key="cop"
     value="cop"
     aria-label="cop-enabled"
-    className="py-0"
+    className="px-1 py-0"
     disabled
   >
     CoP
@@ -30,7 +24,7 @@ const expansionButtons = [
     key="toau"
     value="toau"
     aria-label="toau-enabled"
-    className="py-0"
+    className="px-1 py-0"
     disabled
   >
     ToAU
@@ -39,7 +33,7 @@ const expansionButtons = [
     key="wotg"
     value="wotg"
     aria-label="wotg-enabled"
-    className="py-0"
+    className="px-1 py-0"
     disabled
   >
     WotG
@@ -48,7 +42,7 @@ const expansionButtons = [
     key="soa"
     value="soa"
     aria-label="soa-enabled"
-    className="py-0"
+    className="px-1 py-0"
     disabled
   >
     SoA
@@ -57,7 +51,7 @@ const expansionButtons = [
     key="addons"
     value="addons"
     aria-label="addons-enabled"
-    className="py-0"
+    className="px-1 py-0"
     disabled
   >
     +
@@ -68,7 +62,6 @@ type ExpansionBarProps = { server: ServerData };
 
 export default function ExpansionBar({ server }: ExpansionBarProps) {
   const { expansions } = server;
-  const isSmallScreen = useMediaQuery('(max-width:400px)');
 
   const addons = ['acp', 'amk', 'asa', 'abyssea', 'voidwatch', 'rov', 'tvr'];
   let enabledAddons = addons.filter((prop) => expansions[prop]);
@@ -95,7 +88,6 @@ export default function ExpansionBar({ server }: ExpansionBarProps) {
       >
         <ToggleButtonGroup
           size="small"
-          orientation={isSmallScreen ? 'vertical' : 'horizontal'}
           value={
             expansions && [
               expansions.rotz && 'rotz',

client/src/components/Server/ServerCard.tsx

@@ -20,7 +20,6 @@ import {
   Tooltip,
   Typography,
   alpha,
-  useMediaQuery,
 } from '@mui/material';
 import {
   Children,
@@ -47,7 +46,6 @@ type ServerCardProps = {
 
 export default function ServerCard({ server, children }: ServerCardProps) {
   const { themeMode } = useThemeModeContext();
-  const isSmallScreen = useMediaQuery('(max-width:400px)');
   const [clipboardTooltip, setClipboardTooltip] = useState('Copy server URL.');
   const [clipboardTooltipOpen, setClipboardTooltipOpen] = useState(false);
   const handleClipboardTooltipClose = () => {
@@ -188,15 +186,8 @@ export default function ServerCard({ server, children }: ServerCardProps) {
               </Tooltip>
             </Box>
           </Box>
-          <Box
-            // className={
-            //   isSmallScreen
-            //     ? 'flex grow flex-col items-center justify-center py-1 pl-4'
-            //     : 'grow py-1 pl-4'
-            // }
-            className="grow py-1 pl-4"
-          >
-            <Box className="flex content-center">
+          <Box className="grow flex-col py-1 pl-4">
+            <Box className="flex">
               <Typography
                 variant="h5"
                 color={(theme) => alpha(theme.palette.text.primary, 0.87)}
@@ -231,7 +222,7 @@ export default function ServerCard({ server, children }: ServerCardProps) {
                   </Tooltip>
                 )}
             </Box>
-            <Box className="flex content-center">
+            <Box className="flex">
               <Typography
                 variant="subtitle2"
                 color={(theme) => alpha(theme.palette.text.primary, 0.6)}
@@ -267,17 +258,17 @@ export default function ServerCard({ server, children }: ServerCardProps) {
                   </IconButton>
                 </Tooltip>
               )}
-            </Box>
-            <ExpansionBar server={server} />
-          </Box>
-          <Box className="flex items-center justify-center">
               <Typography
                 variant="h5"
+                className="flex grow justify-end"
+                sx={{ lineHeight: 1.0 }}
                 color={(theme) => theme.palette.text.secondary}
               >
                 {`Lv.${server.max_level}`}
               </Typography>
             </Box>
+            <ExpansionBar server={server} />
+          </Box>
         </AccordionSummary>
         <AccordionDetails
           className="p-2 pt-0"
@@ -343,7 +334,6 @@ export default function ServerCard({ server, children }: ServerCardProps) {
           )}
         </Box>
         <Box className="flex items-center whitespace-nowrap">
-          {/* <ServerDetailsModal id={server.id} /> */}
           <Typography variant="caption" sx={{ lineHeight: 1 }}>
             Updated: {new Date(server.updated).toLocaleString()}
           </Typography>