rearrange character layout and align tables to character image

src/app/components/Characters/CharacterRow.tsx

@@ -7,16 +7,18 @@ import { styled, useTheme } from "@mui/material/styles";
 import React from "react";
 import { CharacterDialog } from "./CharacterDialog";
 import { AccessToken } from "@/types";
-import { Box, Button, Tooltip } from "@mui/material";
+import { Box, Tooltip, IconButton, Typography } from "@mui/material";
+import SettingsIcon from "@mui/icons-material/Settings";
 import { EVE_IMAGE_URL } from "@/const";
 import { CharacterContext } from "@/app/context/Context";
 
 const StackItem = styled(Stack)(({ theme }) => ({
   ...theme.typography.body2,
   padding: theme.custom.compactMode ? theme.spacing(1) : theme.spacing(2),
+  display: "flex",
   textAlign: "left",
-  justifyContent: "center",
+  justifyContent: "flex-start",
-  alignItems: "center",
+  alignItems: "flex-start",
 }));
 
 export const CharacterRow = ({ character }: { character: AccessToken }) => {
@@ -29,8 +31,6 @@ export const CharacterRow = ({ character }: { character: AccessToken }) => {
   return (
     <StackItem
       key={character.character.characterId}
-      alignItems="flex-start"
-      justifyContent="flex-start"
     >
       <CharacterDialog
         character={selectedCharacter}
@@ -38,13 +38,49 @@ export const CharacterRow = ({ character }: { character: AccessToken }) => {
         updateCharacter={updateCharacter}
         closeDialog={() => setSelectedCharacter(undefined)}
       />
+      <Typography
+        sx={{
+          whiteSpace: "nowrap",
+          fontSize: theme.custom.smallText,
+          textAlign: "left",
+          lineHeight: 1.2,
+          marginBottom: "0.4rem",
+          marginLeft: "0.2rem",
+          overflow: "visible",
+          textOverflow: "clip",
+          width: "1rem"
+        }}
+      >
+        {character.character.name}
+      </Typography>
       <Tooltip title={character.comment}>
         <Box
           display="flex"
           flexDirection="column"
           maxWidth={120}
           onClick={() => setSelectedCharacter(character)}
+          position="relative"
+          sx={{ cursor: "pointer" }}
         >
+          <IconButton
+            size="small"
+            onClick={(e) => {
+              e.stopPropagation();
+              setSelectedCharacter(character);
+            }}
+            sx={{
+              p: 0,
+              position: "absolute",
+              top: 4,
+              left: 4,
+              backgroundColor: "rgba(0, 0, 0, 0.5)",
+              "&:hover": {
+                backgroundColor: "rgba(0, 0, 0, 0.7)",
+              },
+            }}
+          >
+            <SettingsIcon fontSize="small" sx={{ color: "white" }} />
+          </IconButton>
           <Image
             unoptimized
             src={`${EVE_IMAGE_URL}/characters/${character.character.characterId}/portrait?size=128`}
@@ -53,16 +89,6 @@ export const CharacterRow = ({ character }: { character: AccessToken }) => {
             height={theme.custom.cardImageSize}
             style={{ marginBottom: "0.2rem", borderRadius: 8 }}
           />
-          <Button
-            style={{
-              padding: 6,
-              fontSize: theme.custom.smallText,
-              lineHeight: 1,
-            }}
-            variant="outlined"
-          >
-            {character.character.name}
-          </Button>
         </Box>
       </Tooltip>
     </StackItem>

src/app/components/PlanetaryInteraction/PlanetaryInteractionRow.tsx

@@ -159,8 +159,8 @@ export const PlanetaryInteractionRow = ({
   const theme = useTheme();
 
   return theme.custom.compactMode ? (
-    <PlanetaryInteractionIconsRow character={character} />
+    <div style={{ marginTop: "1.2rem" }}><PlanetaryInteractionIconsRow character={character} /></div>
   ) : (
-    <PlanetaryIteractionTable character={character} />
+    <div style={{ marginTop: "1.4rem" }}><PlanetaryIteractionTable character={character} /></div>
   );
 };