From 6ab597db8fcc869db6798ef714895d62b5b9c569 Mon Sep 17 00:00:00 2001
From: Slinetrac <realakayuki@gmail.com>
Date: Wed, 19 Nov 2025 17:29:11 +0800
Subject: [PATCH] fix: prevent filename from overlapping with action icons in
 backup records #5525

Closes #5525
---
 .../setting/mods/backup-history-viewer.tsx    | 83 +++++++++++--------
 1 file changed, 50 insertions(+), 33 deletions(-)

diff --git a/src/components/setting/mods/backup-history-viewer.tsx b/src/components/setting/mods/backup-history-viewer.tsx
index 4a63fc743..9b24ad25e 100644
--- a/src/components/setting/mods/backup-history-viewer.tsx
+++ b/src/components/setting/mods/backup-history-viewer.tsx
@@ -265,40 +265,57 @@ export const BackupHistoryViewer = ({
               </ListItem>
             ) : (
               pagedRows.map((row) => (
-                <ListItem
-                  key={`${row.platform}-${row.filename}`}
-                  divider
-                  secondaryAction={
-                    <Stack direction="row" spacing={0.5} alignItems="center">
-                      {isLocal && (
-                        <IconButton
-                          size="small"
-                          disabled={isBusy}
-                          onClick={() => handleExport(row.filename)}
-                        >
-                          <DownloadRounded fontSize="small" />
-                        </IconButton>
-                      )}
-                      <IconButton
-                        size="small"
-                        disabled={isBusy}
-                        onClick={() => handleDelete(row.filename)}
-                      >
-                        <DeleteOutline fontSize="small" />
-                      </IconButton>
-                      <IconButton
-                        size="small"
-                        disabled={isBusy}
-                        onClick={() => handleRestore(row.filename)}
-                      >
-                        <RestoreRounded fontSize="small" />
-                      </IconButton>
-                    </Stack>
-                  }
-                >
+                <ListItem key={`${row.platform}-${row.filename}`} divider>
                   <ListItemText
-                    primary={row.filename}
-                    secondary={`${row.platform} · ${row.backup_time.format("YYYY-MM-DD HH:mm")}`}
+                    primary={
+                      <Typography
+                        variant="body2"
+                        sx={{ wordBreak: "break-all", fontWeight: 500 }}
+                      >
+                        {row.filename}
+                      </Typography>
+                    }
+                    secondary={
+                      <Stack
+                        direction="row"
+                        alignItems="center"
+                        justifyContent="space-between"
+                        spacing={1.5}
+                      >
+                        <Typography variant="caption" color="text.secondary">
+                          {`${row.platform} · ${row.backup_time.format("YYYY-MM-DD HH:mm")}`}
+                        </Typography>
+                        <Stack
+                          direction="row"
+                          spacing={0.5}
+                          alignItems="center"
+                        >
+                          {isLocal && (
+                            <IconButton
+                              size="small"
+                              disabled={isBusy}
+                              onClick={() => handleExport(row.filename)}
+                            >
+                              <DownloadRounded fontSize="small" />
+                            </IconButton>
+                          )}
+                          <IconButton
+                            size="small"
+                            disabled={isBusy}
+                            onClick={() => handleDelete(row.filename)}
+                          >
+                            <DeleteOutline fontSize="small" />
+                          </IconButton>
+                          <IconButton
+                            size="small"
+                            disabled={isBusy}
+                            onClick={() => handleRestore(row.filename)}
+                          >
+                            <RestoreRounded fontSize="small" />
+                          </IconButton>
+                        </Stack>
+                      </Stack>
+                    }
                   />
                 </ListItem>
               ))