fix GameHeader and BatchAdder on small size

ximu3 · Dec 16, 2024 · 4687394 · 4687394
1 parent d9a1969
commit 4687394
Show file tree

Hide file tree

Showing 3 changed files with 3 additions and 3 deletions.
diff --git a/src/renderer/src/components/Game/Header.tsx b/src/renderer/src/components/Game/Header.tsx
@@ -77,7 +77,7 @@ export function Header({ gameId, className }: { gameId: string; className?: stri
         className
       )}
     >
-      <div className={cn('flex flex-row gap-3 justify-center max-w-[46vw]')}>
+      <div className={cn('flex flex-row gap-3 grow overflow-hidden')}>
         <div className={cn('truncate')}>
           <span className={cn('font-bold text-2xl text-accent-foreground')}>{name}</span>
           {showOriginalNameInGameHeader && originalName && originalName !== name && (

diff --git a/src/renderer/src/pages/GameBatchAdder/GameList.tsx b/src/renderer/src/pages/GameBatchAdder/GameList.tsx
@@ -16,7 +16,7 @@ export function GameList(): JSX.Element {
     })
   }
   return (
-    <div className="w-[870px] h-[670px] 3xl:h-[812px]">
+    <div className="w-[870px] h-[75vh]">
       <div className="py-[10px]">
         <GameListTable />
         <div className="flex flex-row-reverse pt-[20px]">

diff --git a/src/renderer/src/pages/GameBatchAdder/GameListTable.tsx b/src/renderer/src/pages/GameBatchAdder/GameListTable.tsx
@@ -28,7 +28,7 @@ export function GameListTable(): JSX.Element {
       </Table>
       <Table>
         <TableBody>
-          <div className={cn('overflow-auto scrollbar-base w-full', 'h-[570px] 3xl:h-[712px]')}>
+          <div className={cn('overflow-auto scrollbar-base w-full', 'h-[calc(75vh-100px)]')}>
             {games.map((game) => (
               <GameListItem key={game.dataId} game={game} />
             ))}