Adjust expansion bar display for small screens

client/src/components/Server/ExpansionsBar.tsx

@@ -1,4 +1,10 @@
-import { Box, ToggleButton, ToggleButtonGroup, Tooltip } from '@mui/material';
+import {
+  Box,
+  ToggleButton,
+  ToggleButtonGroup,
+  Tooltip,
+  useMediaQuery,
+} from '@mui/material';
 import { ServerData } from '../../data/ServerData';
 
 const expansionButtons = [
@@ -47,12 +53,22 @@ const expansionButtons = [
   >
     SoA
   </ToggleButton>,
+  <ToggleButton
+    key="addons"
+    value="addons"
+    aria-label="addons-enabled"
+    className="py-0"
+    disabled
+  >
+    +
+  </ToggleButton>,
 ];
 
 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]);
@@ -79,6 +95,7 @@ export default function ExpansionBar({ server }: ExpansionBarProps) {
       >
         <ToggleButtonGroup
           size="small"
+          orientation={isSmallScreen ? 'vertical' : 'horizontal'}
           value={
             expansions && [
               expansions.rotz && 'rotz',
@@ -89,20 +106,13 @@ export default function ExpansionBar({ server }: ExpansionBarProps) {
               enabledAddons.length !== 0 && 'addons',
             ]
           }
-          sx={{ '& button': { maxHeight: '1rem' } }}
+          sx={{
+            '& button': {
+              maxHeight: '1rem',
+            },
+          }}
         >
           {expansionButtons}
-          {enabledAddons.length !== 0 && (
-            <ToggleButton
-              key="addons"
-              value="addons"
-              aria-label="addons-enabled"
-              className="py-0"
-              disabled
-            >
-              +
-            </ToggleButton>
-          )}
         </ToggleButtonGroup>
       </Tooltip>
     </Box>

client/src/components/Server/ServerCard.tsx

@@ -20,6 +20,7 @@ import {
   Tooltip,
   Typography,
   alpha,
+  useMediaQuery,
 } from '@mui/material';
 import {
   Children,
@@ -46,6 +47,7 @@ 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 = () => {
@@ -112,7 +114,7 @@ export default function ServerCard({ server, children }: ServerCardProps) {
   return (
     <Card className="mb-2" raised={themeMode === 'light'}>
       <Accordion
-        className="my-0"
+        className="my-0 min-w-fit"
         disableGutters
         elevation={0}
         square
@@ -186,7 +188,14 @@ export default function ServerCard({ server, children }: ServerCardProps) {
               </Tooltip>
             </Box>
           </Box>
-          <Box className="grow py-1 pl-4">
+          <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">
               <Typography
                 variant="h5"