From 54fda606ba91e153ceb22729ce4e46594b5a0a10 Mon Sep 17 00:00:00 2001
From: tkitsunai <kitsunai.project@gmail.com>
Date: Thu, 23 Jul 2026 21:25:15 +0900
Subject: [PATCH] fix(frontend): fix spacing and alignment inconsistencies

Several small styling inconsistencies found across pages:

- Left-align player name text in table row buttons (HistoryRow,
  TopGlobal, TopPlayer, Search, Legend), removing MUI Button's
  default min-width so left-aligned text doesn't leave an awkward
  gap for short names
- Fix uneven top/bottom padding in the page header AppBar (Legend,
  Search, Stats, TopGlobal, TopPlayer) by switching to flex
  centering instead of a fixed paddingTop with no paddingBottom
- Add missing margin between pagination controls and the table,
  on both sides (TopGlobal, TopPlayer, Player match history)
- Vertically align the rank badge, player name, and tags in the
  Player page header by wrapping them in a flex container, and
  remove magic-number `top` offsets from the platform/global_rank/
  char_rank Typography variants (replaced with vertical-align:
  middle where the parent isn't a flex container)
---
 frontend/src/components/HistoryRow.tsx | 23 ++++++++++++++++++++---
 frontend/src/pages/Legend.tsx          | 10 +++++++++-
 frontend/src/pages/Player.tsx          | 15 ++++++++++++---
 frontend/src/pages/Search.tsx          | 10 +++++++++-
 frontend/src/pages/Stats.tsx           |  9 ++++++++-
 frontend/src/pages/TopGlobal.tsx       | 14 +++++++++++---
 frontend/src/pages/TopPlayer.tsx       | 14 +++++++++++---
 frontend/src/utils/Themes.tsx          |  7 +------
 8 files changed, 81 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/HistoryRow.tsx b/frontend/src/components/HistoryRow.tsx
index c3a2396..3d54d46 100644
--- a/frontend/src/components/HistoryRow.tsx
+++ b/frontend/src/components/HistoryRow.tsx
@@ -73,7 +73,15 @@ function HistoryRow(props: {
                 </TableRow>
                 <TableRow>
                   <TableCell sx={{ px: 0, mx: 0 }} colSpan={2}>
-                    <Button component={Link} sx={{ marginLeft: "5px" }} to={``}>
+                    <Button
+                      component={Link}
+                      sx={{
+                        marginLeft: "5px",
+                        justifyContent: "flex-start",
+                        minWidth: "auto",
+                      }}
+                      to={``}
+                    >
                       {item.opponent_name}
                     </Button>
                   </TableCell>
@@ -116,7 +124,11 @@ function HistoryRow(props: {
                 <TableRow>
                   <TableCell sx={{ px: 0, mx: 0, maxWidth: "120px" }}>
                     <Button
-                      sx={{ marginLeft: "5px" }}
+                      sx={{
+                        marginLeft: "5px",
+                        justifyContent: "flex-start",
+                        minWidth: "auto",
+                      }}
                       component={Link}
                       to={`/player/${item.opponent_id}/${item.matches[0].opponent_character_short}`}
                     >
@@ -250,7 +262,11 @@ function HistoryRow(props: {
               </TableCell>
               <TableCell align="right"></TableCell>
               <TableCell>
-                <Button component={Link} to={``}>
+                <Button
+                  component={Link}
+                  sx={{ justifyContent: "flex-start", minWidth: "auto" }}
+                  to={``}
+                >
                   {item.opponent_name}
                 </Button>
               </TableCell>
@@ -279,6 +295,7 @@ function HistoryRow(props: {
               <TableCell>
                 <Button
                   component={Link}
+                  sx={{ justifyContent: "flex-start", minWidth: "auto" }}
                   to={`/player/${item.opponent_id}/${item.matches[0].opponent_character_short}`}
                 >
                   {item.opponent_name}
diff --git a/frontend/src/pages/Legend.tsx b/frontend/src/pages/Legend.tsx
index 10e43b1..8cc60c2 100644
--- a/frontend/src/pages/Legend.tsx
+++ b/frontend/src/pages/Legend.tsx
@@ -116,7 +116,14 @@ const Legend = () => {
             sx={{ position: "absolute", top: "-1px", color: "white" }}
           />
         ) : null}
-        <Box sx={{ minHeight: 100, paddingTop: "30px" }}>
+        <Box
+          sx={{
+            minHeight: 100,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
           <Typography align="center" variant="pageHeader">
             Legend Players
           </Typography>
@@ -154,6 +161,7 @@ const Legend = () => {
                   <TableCell>
                     <Button
                       component={Link}
+                      sx={{ justifyContent: "flex-start", minWidth: "auto" }}
                       to={`/player/${player.id}/${player.char_short}`}
                     >
                       {player.name}
diff --git a/frontend/src/pages/Player.tsx b/frontend/src/pages/Player.tsx
index 404f8bb..f6ec2a6 100644
--- a/frontend/src/pages/Player.tsx
+++ b/frontend/src/pages/Player.tsx
@@ -59,7 +59,7 @@ function PlayerHeader({
   const playerInfo = player ? (
     <>
       {player.tags && player.tags.length > 0 && (
-        <Box>
+        <Box sx={{ flexBasis: "100%" }}>
           {player.tags.map((e) => (
             <Tag key={e.tag} style={JSON.parse(e.style)}>
               {e.tag}
@@ -139,7 +139,16 @@ function PlayerHeader({
           variant="pageHeader"
           sx={{ fontSize: 30, marginTop: { xs: 2, lg: 0 } }}
         >
-          {playerInfo}
+          <Box
+            sx={{
+              display: "inline-flex",
+              alignItems: "center",
+              flexWrap: "wrap",
+              justifyContent: "center",
+            }}
+          >
+            {playerInfo}
+          </Box>
         </Typography>
         {aliasSection}
       </Box>
@@ -289,7 +298,7 @@ function MatchHistory({
           </Table>
         </TableContainer>
       </Box>
-      <Box sx={{ mx: { xs: 1, lg: 3 } }}>
+      <Box sx={{ mx: { xs: 1, lg: 3 }, mt: 2 }}>
         <Button onClick={onPrev}>Prev</Button>
         <Button style={showNext ? {} : { display: "none" }} onClick={onNext}>
           Next
diff --git a/frontend/src/pages/Search.tsx b/frontend/src/pages/Search.tsx
index eb7a442..5d636a5 100644
--- a/frontend/src/pages/Search.tsx
+++ b/frontend/src/pages/Search.tsx
@@ -85,6 +85,7 @@ const SearchResults = ({ resultsPromise }: SearchResultsProps) => {
                 <TableCell>
                   <Button
                     component={Link}
+                    sx={{ justifyContent: "flex-start", minWidth: "auto" }}
                     to={`/player/${player.id}/${player.char_short}`}
                   >
                     {player.name}
@@ -122,7 +123,14 @@ const Search = () => {
         style={{ backgroundImage: "none" }}
         sx={{ backgroundColor: "secondary.main" }}
       >
-        <Box sx={{ minHeight: 100, paddingTop: "30px" }}>
+        <Box
+          sx={{
+            minHeight: 100,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
           <Typography align="center" variant="pageHeader">
             Search Results
           </Typography>
diff --git a/frontend/src/pages/Stats.tsx b/frontend/src/pages/Stats.tsx
index cae6327..41208af 100644
--- a/frontend/src/pages/Stats.tsx
+++ b/frontend/src/pages/Stats.tsx
@@ -151,7 +151,14 @@ const Stats = () => {
         style={{ backgroundImage: "none" }}
         sx={{ backgroundColor: "secondary.main" }}
       >
-        <Box sx={{ minHeight: 100, paddingTop: "30px" }}>
+        <Box
+          sx={{
+            minHeight: 100,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
           <Typography align="center" variant="pageHeader">
             Stats
           </Typography>
diff --git a/frontend/src/pages/TopGlobal.tsx b/frontend/src/pages/TopGlobal.tsx
index 3161eb6..532b25a 100644
--- a/frontend/src/pages/TopGlobal.tsx
+++ b/frontend/src/pages/TopGlobal.tsx
@@ -183,7 +183,14 @@ const TopGlobal = () => {
             sx={{ position: "absolute", top: "-1px", color: "white" }}
           />
         ) : null}
-        <Box sx={{ minHeight: 100, paddingTop: "30px" }}>
+        <Box
+          sx={{
+            minHeight: 100,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
           <Typography align="center" variant="pageHeader">
             Top Players
           </Typography>
@@ -202,7 +209,7 @@ const TopGlobal = () => {
               : "Updating..."}
           </Typography>
         )}
-        <Box sx={{ display: "inline-block" }}>
+        <Box sx={{ display: "inline-block", mb: 2 }}>
           <Button onClick={(event) => onPrev(event)}>Prev</Button>
           <Button
             style={showNext ? {} : { display: "none" }}
@@ -240,6 +247,7 @@ const TopGlobal = () => {
                   <TableCell>
                     <Button
                       component={Link}
+                      sx={{ justifyContent: "flex-start", minWidth: "auto" }}
                       to={`/player/${player.id}/${player.char_short}`}
                     >
                       {player.name}
@@ -279,7 +287,7 @@ const TopGlobal = () => {
             </TableBody>
           </Table>
         </TableContainer>
-        <Box sx={{ display: "inline-block" }}>
+        <Box sx={{ display: "inline-block", mt: 2 }}>
           <Button onClick={(event) => onPrev(event)}>Prev</Button>
           <Button
             style={showNext ? {} : { display: "none" }}
diff --git a/frontend/src/pages/TopPlayer.tsx b/frontend/src/pages/TopPlayer.tsx
index 722d46d..eae57bf 100644
--- a/frontend/src/pages/TopPlayer.tsx
+++ b/frontend/src/pages/TopPlayer.tsx
@@ -176,7 +176,14 @@ const TopPlayer = () => {
             sx={{ position: "absolute", top: "-1px", color: "white" }}
           />
         ) : null}
-        <Box sx={{ minHeight: 100, paddingTop: "30px" }}>
+        <Box
+          sx={{
+            minHeight: 100,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center",
+          }}
+        >
           <Typography align="center" variant="pageHeader">
             {charLong} Leaderboard
           </Typography>
@@ -195,7 +202,7 @@ const TopPlayer = () => {
               : "Updating..."}
           </Typography>
         )}
-        <Box sx={{ mx: 3, display: "inline-block" }}>
+        <Box sx={{ mx: 3, display: "inline-block", mb: 2 }}>
           <Button onClick={() => onPrev()}>Prev</Button>
           <Button
             style={showNext ? {} : { display: "none" }}
@@ -233,6 +240,7 @@ const TopPlayer = () => {
                   <TableCell>
                     <Button
                       component={Link}
+                      sx={{ justifyContent: "flex-start", minWidth: "auto" }}
                       to={`/player/${player.id}/${player.char_short}`}
                     >
                       {player.name}
@@ -272,7 +280,7 @@ const TopPlayer = () => {
             </TableBody>
           </Table>
         </TableContainer>
-        <Box sx={{ mx: 3, display: "inline-block" }}>
+        <Box sx={{ mx: 3, display: "inline-block", mt: 2 }}>
           <Button onClick={() => onPrev()}>Prev</Button>
           <Button
             style={showNext ? {} : { display: "none" }}
diff --git a/frontend/src/utils/Themes.tsx b/frontend/src/utils/Themes.tsx
index 04c98ea..e0ac5c8 100644
--- a/frontend/src/utils/Themes.tsx
+++ b/frontend/src/utils/Themes.tsx
@@ -79,8 +79,6 @@ function createCharacterTheme(config: CharacterThemeConfig): Theme {
                   padding: "8px 10px",
                   display: "inline-block",
                   marginLeft: "8px",
-                  top: "-4px",
-                  position: "relative",
                 },
               },
               {
@@ -94,8 +92,7 @@ function createCharacterTheme(config: CharacterThemeConfig): Theme {
                   padding: "8px 10px",
                   display: "inline-block",
                   marginLeft: "8px",
-                  top: "-4px",
-                  position: "relative",
+                  verticalAlign: "middle",
                 },
               },
               {
@@ -109,8 +106,6 @@ function createCharacterTheme(config: CharacterThemeConfig): Theme {
                   padding: "8px 10px",
                   display: "inline-block",
                   marginLeft: "8px",
-                  top: "-4px",
-                  position: "relative",
                 },
               },
             ],