fix: Initial fixes related to low-resolution screens

ximu3 · Dec 13, 2024 · d58adb3 · d58adb3
1 parent f04a5d2
commit d58adb3
Show file tree

Hide file tree

Showing 10 changed files with 12 additions and 12 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-[800px]', '3xl:max-w-[1000px]')}>
+      <div className={cn('flex flex-row gap-3 justify-center max-w-[46vw]')}>
         <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/components/Game/Overview/RelatedSites/RelatedSitesCard.tsx b/src/renderer/src/components/Game/Overview/RelatedSites/RelatedSitesCard.tsx
@@ -31,7 +31,7 @@ export function RelatedSitesCard({
         <div
           className={cn(
             'flex flex-col text-sm justify-start items-start overflow-auto scrollbar-base max-h-[220px]',
-            '3xl:max-h-[408px]'
+            '3xl:max-h-[408px] sm:max-h-[3vh] '
           )}
         >
           {isEqual(relatedSites, []) || isEqual(relatedSites, [{ label: '', url: '' }])

diff --git a/src/renderer/src/components/Game/Overview/Tags/TagsCard.tsx b/src/renderer/src/components/Game/Overview/Tags/TagsCard.tsx
@@ -26,7 +26,7 @@ export function TagsCard({
       <CardContent>
         <div
           className={cn(
-            'text-sm justify-start items-start overflow-auto scrollbar-base max-h-[54px] -mb-2'
+            'text-sm justify-start items-start overflow-auto scrollbar-base sm:max-h-[5vh] max-h-[54px] -mb-2'
           )}
         >
           <div className={cn('flex flex-wrap mb-[8px]')}>

diff --git a/src/renderer/src/components/Game/Overview/description/DescriptionCard.tsx b/src/renderer/src/components/Game/Overview/description/DescriptionCard.tsx
@@ -26,7 +26,7 @@ export function DescriptionCard({
         <div
           className={cn(
             'max-h-[310px] text-sm overflow-auto scrollbar-base',
-            '3xl:max-h-[500px]',
+            '3xl:max-h-[500px] sm:max-h-[20vh]',
             'prose-a:text-primary', // Link Color
             'prose-a:no-underline hover:prose-a:underline', // underline effect
             'whitespace-pre-line'

diff --git a/src/renderer/src/components/Game/Overview/main.tsx b/src/renderer/src/components/Game/Overview/main.tsx
@@ -10,7 +10,7 @@ export function Overview({ gameId }: { gameId: string }): JSX.Element {
     <div className={cn('w-full h-full flex flex-col gap-5 pt-2', '3xl:gap-7')}>
       <Record gameId={gameId} />
       <div className={cn('flex flex-row gap-5 items-start justify-start ', '3xl:gap-7')}>
-        <div className={cn('w-3/4 flex flex-col gap-5 h-full', '3xl:w-[calc(75%-6px)] 3xl:gap-7')}>
+        <div className={cn('w-3/4 flex flex-col gap-5 h-full')}>
           <Description gameId={gameId} className={cn('grow')} />
           <Tags gameId={gameId} />
         </div>

diff --git a/src/renderer/src/components/Game/Record/ChartCard.tsx b/src/renderer/src/components/Game/Record/ChartCard.tsx
@@ -68,7 +68,7 @@ export function ChartCard({
             <Card className={cn('p-5 max-h-full rounded-[0.3rem]', '3xl:max-h-full')}>
               <TimerChart
                 data={playTimeByDateRange}
-                className={cn('max-h-[500px] w-full -ml-3', '3xl:max-h-[680px]')}
+                className={cn('max-h-[500px] w-full -ml-3', '3xl:max-h-[680px] sm:max-h-[42vh]')}
               />
             </Card>
           )}

diff --git a/src/renderer/src/components/Game/Save/main.tsx b/src/renderer/src/components/Game/Save/main.tsx
@@ -51,12 +51,12 @@ export function Save({ gameId }: { gameId: string }): JSX.Element {
   return (
     <div className="pt-2">
       <Card className="group w-full p-3">
-        <div className={cn('overflow-auto h-[684px] scrollbar-base', '3xl:h-[870px]')}>
+        <div className={cn('overflow-auto h-[684px] scrollbar-base', '3xl:h-[870px] sm:h-[70vh]')}>
           <Table className="table-fixed">
             <TableHeader>
-              <TableRow className={cn('hover:bg-transparent')}>
+              <TableRow className={cn('bg-card')}>
                 <TableHead className={cn('w-1/5')}>日期</TableHead>
-                <TableHead className={cn('w-2/3')}>备注</TableHead>
+                <TableHead className={cn('w-2/3', 'sm:w-1/3')}>备注</TableHead>
                 <TableHead className={cn('w-1/6')}>操作</TableHead>
               </TableRow>
             </TableHeader>

diff --git a/src/renderer/src/components/Game/main.tsx b/src/renderer/src/components/Game/main.tsx
@@ -27,7 +27,7 @@ export function Game({ gameId }: { gameId: string }): JSX.Element {
               className={cn(
                 background
                   ? 'relative bg-background h-[calc(100vh-64px)]'
-                  : 'relative bg-background h-[calc(100-64pxvh)]'
+                  : 'relative bg-background h-[calc(100vh-64px)]'
               )}
             >
               <Header gameId={gameId} className={cn('-top-16 left-0 right-0')} />

diff --git a/src/renderer/src/pages/GameAdder/GameList.tsx b/src/renderer/src/pages/GameAdder/GameList.tsx
@@ -14,7 +14,7 @@ export function GameList(): JSX.Element {
         <Card className={cn('grow pt-3')}>
           <CardContent className="h-full">
             <div className="w-full">
-              <ScrollArea className={cn('h-[54vh]', '3xl:h-[60vh]')}>
+              <ScrollArea className={cn('h-[54vh]', '3xl:h-[60vh]', 'sm:h-[48vh]')}>
                 <Table>
                   <TableHeader className={cn('bg-card')}>
                     <TableRow>

diff --git a/src/renderer/src/pages/GameAdder/ScreenshotList.tsx b/src/renderer/src/pages/GameAdder/ScreenshotList.tsx
@@ -72,7 +72,7 @@ export function ScreenshotList(): JSX.Element {
       <div className={cn('flex flex-col w-full h-full gap-3')}>
         <div className="w-full h-full">
           <div className={cn('scrollbar-base overflow-auto pr-3')}>
-            <div className={cn('grid grid-cols-2 gap-3 h-[630px]', '3xl:h-[790px]')}>
+            <div className={cn('grid grid-cols-2 gap-3 h-[72vh]')}>
               {screenshotList.length !== 0 ? (
                 screenshotList.map((image) => (
                   <div