Merge pull request #104 from fishshi/fix/Adapt

fix: Fix AttributesDialog on small size
ximu3 · Dec 16, 2024 · d9a1969 · d9a1969
2 parents a14d846 + 55c4475
commit d9a1969
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 4 deletions.
diff --git a/src/renderer/src/components/Game/Config/AttributesDialog/Media/main.tsx b/src/renderer/src/components/Game/Config/AttributesDialog/Media/main.tsx
@@ -76,7 +76,7 @@ export function Media({ gameId }: { gameId: string }): JSX.Element {
                 <GameImage
                   gameId={gameId}
                   type="icon"
-                  className={cn('w-16 h-16 object-cover')}
+                  className={cn('max-h-16 h-[calc(30vh-160px)] aspect-[1] object-cover')}
                   fallback={<div>暂无图标</div>}
                 />
               </div>
@@ -115,7 +115,7 @@ export function Media({ gameId }: { gameId: string }): JSX.Element {
                 <GameImage
                   gameId={gameId}
                   type="background"
-                  className={cn('w-[500px] h-[264px] object-cover')}
+                  className={cn('max-h-[264px] h-[calc(60vh-200px)] aspect-[2] object-cover')}
                   fallback={<div>暂无背景</div>}
                 />
               </div>
@@ -156,7 +156,7 @@ export function Media({ gameId }: { gameId: string }): JSX.Element {
                 <GameImage
                   gameId={gameId}
                   type="cover"
-                  className={cn('w-[300px] h-[458px] object-cover')}
+                  className={cn('max-h-[458px] h-[calc(90vh-230px)] aspect-[2/3] object-cover')}
                   fallback={<div>暂无封面</div>}
                 />
               </div>

diff --git a/src/renderer/src/components/Game/Config/AttributesDialog/main.tsx b/src/renderer/src/components/Game/Config/AttributesDialog/main.tsx
@@ -16,7 +16,7 @@ export function AttributesDialog({
   const [gameName] = useDBSyncedState('', `games/${gameId}/metadata.json`, ['name'])
   return (
     <Dialog open={true} onOpenChange={(state) => setIsOpen(state)}>
-      <DialogContent className={cn('w-[1000px] h-[700px] max-w-none flex flex-col')}>
+      <DialogContent className={cn('w-[1000px] max-h-[700px] h-[90vh] max-w-none flex flex-col')}>
         <DialogHeader>
           <DialogTitle>{`${gameName} - 属性`}</DialogTitle>
         </DialogHeader>