hone top bar and add xl breakpoint

src/app/components/Backup/DowloadButton.tsx

@@ -11,7 +11,7 @@ export const DowloadButton = () => {
           JSON.stringify(characters)
         )}`}
         download={`eve-pi-characters.json`}
-        sx={{ my: 2, color: "white", display: "block" }}
+        sx={{ color: "white", display: "block" }}
       >
         Backup
       </Button>

src/app/components/Backup/UploadButton.tsx

@@ -10,7 +10,7 @@ export const UploadButton = () => {
         <Button
           style={{ width: "100%" }}
           onClick={() => setUploadDialogOpen(true)}
-          sx={{ my: 2, color: "white", display: "block" }}
+          sx={{ color: "white", display: "block" }}
         >
           Restore
         </Button>

src/app/components/CCP/CCPButton.tsx

@@ -11,7 +11,7 @@ export const CCPButton = () => {
           href="https://community.eveonline.com/support/policies/eve-online-content-creation-terms-of-use-en/"
           target="_blank"
           style={{ width: "100%" }}
-          sx={{ my: 2, color: "white", display: "block" }}
+          sx={{ color: "white", display: "block" }}
         >
           CCP ©
         </Button>

src/app/components/CompactModeButton/CompactModeButton.tsx

@@ -10,7 +10,6 @@ export const CompactModeButton = () => {
         value="check"
         selected={compactMode}
         onChange={toggleCompactMode}
-        style={{ margin: "1rem 0" }}
       >
         Compact mode
       </ToggleButton>

src/app/components/Discord/DiscordButton.tsx

@@ -7,7 +7,7 @@ export const DiscordButton = () => {
           href="https://discord.gg/MDapvGyw"
           target="_blank"
           style={{ width: "100%" }}
-          sx={{ my: 2, color: "white", display: "block" }}
+          sx={{ color: "white", display: "block" }}
         >
           Discord
         </Button>

src/app/components/Github/GitHubButton.tsx

@@ -7,7 +7,7 @@ export const GitHubButton = () => {
           href="https://github.com/calli-eve/eve-pi"
           target="_blank"
           style={{ width: "100%" }}
-          sx={{ my: 2, color: "white", display: "block" }}
+          sx={{ color: "white", display: "block" }}
         >
           GitHub
         </Button>

src/app/components/Login/LoginButton.tsx

@@ -9,7 +9,7 @@ export const LoginButton = () => {
       <Tooltip title="Login with your EVE characters to track your planets">
         <Button
           style={{ width: "100%" }}
-          sx={{ my: 2, color: "white", display: "block" }}
+          sx={{ color: "white", display: "block" }}
           onClick={() => setLoginDialogOpen(true)}
         >
           Login

src/app/components/MainGrid.tsx

@@ -85,6 +85,7 @@ export const MainGrid = ({ sessionReady }: { sessionReady: boolean }) => {
               item
               xs={12}
               sm={compactMode ? 6 : 12}
+              xl={compactMode ? 3 : 12}
               key={`account-${id}-${g[0].account}`}
             >
               <AccountCard characters={g} sessionReady={sessionReady} />