change compat mode to change the grid

src/app/components/Account/AccountCard.tsx

@@ -2,6 +2,8 @@ import { AccessToken } from "@/types";
 import { Box, Stack, Typography } from "@mui/material";
 import { CharacterRow } from "../Characters/CharacterRow";
 import { PlanetaryInteractionRow } from "../PlanetaryInteraction/PlanetaryInteractionRow";
+import { useContext } from "react";
+import { SessionContext } from "@/app/context/Context";
 
 export const AccountCard = ({
   characters,
@@ -10,11 +12,13 @@ export const AccountCard = ({
   characters: AccessToken[];
   sessionReady: boolean;
 }) => {
+  const { compactMode } = useContext(SessionContext);
   return (
     <Box
       sx={{
         padding: 1,
-        borderBottom: "solid 1px gray",
+        borderBottom: compactMode ? "" : "solid 1px gray",
+        borderRight: compactMode ? "solid 1px gray" : "",
       }}
     >
       <Typography style={{ fontSize: "0.8rem" }} paddingLeft={2}>

src/app/components/MainGrid.tsx

@@ -1,4 +1,4 @@
-import { useContext, useEffect, useState } from "react";
+import { useContext, useEffect } from "react";
 import {
   Box,
   CssBaseline,
@@ -23,7 +23,6 @@ const darkTheme = createTheme({
 
 export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
   const { characters } = useContext(CharacterContext);
-  const { compactMode } = useContext(SessionContext);
   const groupByAccount = characters.reduce<Grouped>((group, character) => {
     const { account } = character;
     group[account ?? ""] = group[account ?? ""] ?? [];
@@ -31,25 +30,23 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
     return group;
   }, {});
 
+  const { compactMode } = useContext(SessionContext);
+
   return (
     <ThemeProvider theme={darkTheme}>
       <CssBaseline />
       <Box sx={{ flexGrow: 1 }}>
         <ResponsiveAppBar />
         <Grid container spacing={1}>
-          <Grid
+          {Object.values(groupByAccount).map((g, id) => (
-            item
+            <Grid
-            xs={12}
+              item
-            style={{ display: compactMode ? "flex" : "block" }}
+              xs={compactMode ? 6 : 12}
-          >
+              key={`account-${id}-${g[0].account}`}
-            {Object.values(groupByAccount).map((g, id) => (
+            >
-              <AccountCard
+              <AccountCard characters={g} sessionReady={sessionReady} />
-                key={`account-${id}-${g[0].account}`}
+            </Grid>
-                characters={g}
+          ))}
-                sessionReady={sessionReady}
-              />
-            ))}
-          </Grid>
         </Grid>
       </Box>
     </ThemeProvider>