fix: Initial fixes related to low-resolution screens

src/main/scraper/steam/common.ts

@@ -143,7 +143,7 @@ export async function checkSteamGameExists(appId: string): Promise<boolean> {
     return data[appId]?.success || false
   } catch (error) {
     console.error(`Error checking game existence for ID ${appId}:`, error)
-    return false
+    throw error
   }
 }
 

src/renderer/src/components/Game/Overview/Record/main.tsx

@@ -14,31 +14,31 @@ export function Record({ gameId }: { gameId: string }): JSX.Element {
   const [score] = useDBSyncedState(-1, `games/${gameId}/record.json`, ['score'])
   const [playingTime] = useDBSyncedState(0, `games/${gameId}/record.json`, ['playingTime'])
   return (
-    <div className={cn('flex flex-row gap-5', '3xl:gap-7')}>
-      <RecordCard
-        title="游玩时间"
-        content={playingTime !== 0 ? formatTimeToChinese(playingTime) : '暂无'}
-        icon="icon-[mdi--timer-outline] w-[20px] h-[20px]"
-        className={cn('w-1/4')}
-      />
-      <RecordCard
-        title="最后运行日期"
-        content={lastRunDate ? formatDateToISO(lastRunDate) : '从未运行'}
-        icon="icon-[mdi--calendar-blank-multiple] w-[18px] h-[18px]"
-        className={cn('w-1/4')}
-      />
-      <RecordCard
-        title="状态"
-        content={formatPlayStatusToChinese(playStatus)}
-        icon="icon-[mdi--bookmark-outline] w-[20px] h-[20px]"
-        className={cn('w-1/4')}
-      />
-      <RecordCard
-        title="我的评分"
-        content={formatScoreToChinese(score)}
-        icon="icon-[mdi--starburst-outline] w-[18px] h-[18px]"
-        className={cn('w-1/4')}
-      />
+    <div className={cn('flex gap-5', '3xl:gap-7')}>
+      <div className={cn('w-3/4 grid grid-cols-3 gap-5', '3xl:gap-7')}>
+        <RecordCard
+          title="游玩时间"
+          content={playingTime !== 0 ? formatTimeToChinese(playingTime) : '暂无'}
+          icon="icon-[mdi--timer-outline] w-[20px] h-[20px]"
+        />
+        <RecordCard
+          title="最后运行日期"
+          content={lastRunDate ? formatDateToISO(lastRunDate) : '从未运行'}
+          icon="icon-[mdi--calendar-blank-multiple] w-[18px] h-[18px]"
+        />
+        <RecordCard
+          title="状态"
+          content={formatPlayStatusToChinese(playStatus)}
+          icon="icon-[mdi--bookmark-outline] w-[20px] h-[20px]"
+        />
+      </div>
+      <div className={cn('w-1/4')}>
+        <RecordCard
+          title="我的评分"
+          content={formatScoreToChinese(score)}
+          icon="icon-[mdi--starburst-outline] w-[18px] h-[18px]"
+        />
+      </div>
     </div>
   )
 }

src/renderer/src/components/Game/Overview/main.tsx

@@ -10,16 +10,11 @@ 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-[calc(75%-4px)] flex flex-col gap-5 shrink-0 h-full',
-            '3xl:w-[calc(75%-6px)] 3xl:gap-7'
-          )}
-        >
+        <div className={cn('w-3/4 flex flex-col gap-5 h-full', '3xl:w-[calc(75%-6px)] 3xl:gap-7')}>
           <Description gameId={gameId} className={cn('grow')} />
           <Tags gameId={gameId} />
         </div>
-        <div className={cn('flex flex-col gap-5 grow', '3xl:gap-7')}>
+        <div className={cn('flex flex-col gap-5 w-1/4', '3xl:gap-7')}>
           <Information gameId={gameId} />
           <RelatedSites gameId={gameId} />
         </div>

src/renderer/src/components/ui/accordion.tsx

@@ -24,7 +24,7 @@ const AccordionTrigger = React.forwardRef<
     <AccordionPrimitive.Trigger
       ref={ref}
       className={cn(
-        'flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180',
+        'flex flex-1 items-center non-draggable justify-between py-4 text-sm font-medium transition-all text-left [&[data-state=open]>svg]:rotate-180',
         className
       )}
       {...props}

src/renderer/src/components/ui/button.tsx

@@ -5,7 +5,7 @@ import { cva, type VariantProps } from 'class-variance-authority'
 import { cn } from '~/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+  'inline-flex items-center non-draggable justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {

src/renderer/src/components/ui/chart.tsx

@@ -51,7 +51,7 @@ const ChartContainer = React.forwardRef<
         data-chart={chartId}
         ref={ref}
         className={cn(
-          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          "flex aspect-video non-draggable justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
           className
         )}
         {...props}

src/renderer/src/components/ui/dialog.tsx

@@ -55,7 +55,7 @@ const DialogContent = React.forwardRef<
           onClick={() => {
             if (onClose) onClose()
           }}
-          className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
+          className="absolute non-draggable right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground"
         >
           <Cross2Icon className="h-4 w-4" />
           <span className="sr-only">Close</span>

src/renderer/src/components/ui/dropdown-menu.tsx

@@ -27,7 +27,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
-      'flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
+      'flex cursor-default non-draggable gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0',
       inset && 'pl-8',
       className
     )}

src/renderer/src/components/ui/input.tsx

@@ -13,7 +13,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
         spellCheck="false"
         type={type}
         className={cn(
-          'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          'flex h-9 w-full non-draggable rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
           variant === 'ghost' &&
             'border-0 bg-transparent hover:bg-accent transition-none focus:hover:bg-transparent truncate shadow-none',
           className

src/renderer/src/components/ui/switch.tsx

@@ -11,7 +11,7 @@ const Switch = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
-      'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
+      'peer inline-flex non-draggable h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
       className
     )}
     {...props}

src/renderer/src/components/ui/table.tsx

@@ -4,9 +4,7 @@ import { cn } from '~/utils'
 
 const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
   ({ className, ...props }, ref) => (
-    <div className="relative w-full overflow-auto">
-      <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
-    </div>
+    <table ref={ref} className={cn('w-full caption-bottom text-sm', className)} {...props} />
   )
 )
 Table.displayName = 'Table'
@@ -15,7 +13,12 @@ const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
-  <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />
+  <thead
+    ref={ref}
+    // Manually added sticky top-0 to fix header not sticking to top of table
+    className={cn('sticky top-0 [&_tr]:border-b', className)}
+    {...props}
+  />
 ))
 TableHeader.displayName = 'TableHeader'
 

src/renderer/src/components/ui/tabs.tsx

@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      'inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
+      'inline-flex items-center non-draggable justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow',
       className
     )}
     {...props}

src/renderer/src/components/ui/textarea.tsx

@@ -10,7 +10,7 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
       <textarea
         spellCheck="false"
         className={cn(
-          'scrollbar-base flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+          'scrollbar-base non-draggable flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
           className
         )}
         ref={ref}

src/renderer/src/pages/GameAdder/GameList.tsx

@@ -1,5 +1,6 @@
 import { cn } from '~/utils'
 import { Card, CardContent } from '@ui/card'
+import { ScrollArea } from '@ui/scroll-area'
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@ui/table'
 import { toast } from 'sonner'
 import { useGameAdderStore } from './store'
@@ -8,25 +9,21 @@ import { Search } from './Search'
 export function GameList(): JSX.Element {
   const { setName, id, setId, gameList } = useGameAdderStore()
   return (
-    <div className={cn('w-[726px] h-[750px] p-3', '3xl:w-[876px] 3xl:h-[1000px]')}>
+    <div className={cn('w-[726px] h-[84vh] p-3', '3xl:w-[876px]')}>
       <div className={cn('flex flex-col w-full h-full gap-3')}>
         <Card className={cn('grow pt-3')}>
           <CardContent className="h-full">
             <div className="w-full">
-              <Table>
-                <TableHeader>
-                  <TableRow>
-                    <TableHead className={cn('w-[300px]', '3xl:w-[350px]')}>游戏名称</TableHead>
-                    <TableHead className={cn('w-[150px]', '3xl:w-[200px]')}>发行日期</TableHead>
-                    <TableHead className={cn('w-[150px]', '3xl:w-[200px]')}>开发商</TableHead>
-                  </TableRow>
-                </TableHeader>
-              </Table>
-              <Table>
-                <TableBody>
-                  <div
-                    className={cn('overflow-auto h-[466px] w-full scrollbar-base', '3xl:h-[712px]')}
-                  >
+              <ScrollArea className={cn('h-[54vh]', '3xl:h-[60vh]')}>
+                <Table>
+                  <TableHeader className={cn('bg-card')}>
+                    <TableRow>
+                      <TableHead className={cn('w-1/2')}>游戏名称</TableHead>
+                      <TableHead className={cn('w-1/4')}>发行日期</TableHead>
+                      <TableHead className={cn('w-1/4')}>开发商</TableHead>
+                    </TableRow>
+                  </TableHeader>
+                  <TableBody>
                     {gameList.map((game) => (
                       <TableRow
                         key={game.name}
@@ -61,14 +58,14 @@ export function GameList(): JSX.Element {
                         </TableCell>
                       </TableRow>
                     ))}
-                  </div>
-                </TableBody>
-              </Table>
+                  </TableBody>
+                </Table>
+              </ScrollArea>
             </div>
           </CardContent>
         </Card>
         <Card>
-          <Search className={cn('w-full p-3 text-sm')} />
+          <Search className={cn('w-full p-3 text-sm', '3xl:w-full')} />
         </Card>
       </div>
     </div>

src/renderer/src/pages/GameAdder/Search.tsx

@@ -87,7 +87,7 @@ export function Search({ className }: { className?: string }): JSX.Element {
     }
   }
   return (
-    <div className={cn('w-[600px] h-[170px]', className)}>
+    <div className={cn('w-[36vw] h-auto', '3xl:w-[30vw]', className)}>
       <div className={cn('flex flex-col w-full h-full gap-3 p-3 justify-center')}>
         <div className={cn('flex flex-row gap-3 items-center justify-start')}>
           <div>数据来源</div>

src/renderer/src/pages/GameAdder/main.tsx

@@ -1,51 +1,25 @@
 import { cn } from '~/utils'
 import { Dialog, DialogContent } from '@ui/dialog'
-import { toast } from 'sonner'
 import { MemoryRouter, Routes, Route, Navigate, useNavigate } from 'react-router-dom'
 import { useGameAdderStore } from './store'
 import { GameList } from './GameList'
 import { Search } from './Search'
 import { ScreenshotList } from './ScreenshotList'
 
 function GameAdderContent(): JSX.Element {
-  const {
-    isOpen,
-    setIsOpen,
-    isLoading,
-    setDataSource,
-    setDbId,
-    setId,
-    setName,
-    setScreenshotList,
-    setScreenshotUrl,
-    setGameList,
-    setIsLoading
-  } = useGameAdderStore()
+  const { isOpen, handleClose } = useGameAdderStore()
   const navigate = useNavigate()
-  function handleClose(): void {
-    if (isLoading) {
-      toast.warning('请等待游戏添加完成')
-      return
-    }
-    setIsOpen(false)
-    setDataSource('steam')
-    setDbId('')
-    setId('')
-    setName('')
-    setScreenshotList([])
-    setScreenshotUrl('')
-    setGameList([])
-    setIsLoading(false)
-    navigate('/')
-  }
   return (
     <Dialog open={isOpen}>
       <DialogContent
         className={cn('w-auto h-auto max-w-none flex flex-col gap-5')}
         onInteractOutside={(e) => {
           e.preventDefault()
         }}
-        onClose={handleClose}
+        onClose={() => {
+          handleClose()
+          navigate('/')
+        }}
       >
         <Routes>
           <Route index element={<Navigate to={'search'} />} />

src/renderer/src/pages/GameAdder/store.ts

@@ -1,4 +1,5 @@
 import { create } from 'zustand'
+import { toast } from 'sonner'
 
 export type DataSource = 'vndb' | 'igdb' | 'steam' | 'bangumi'
 
@@ -33,9 +34,10 @@ interface GameAdderState {
   setScreenshotList: (screenshotList: string[]) => void
   screenshotUrl: string
   setScreenshotUrl: (screenshotUrl: string) => void
+  handleClose: () => void
 }
 
-export const useGameAdderStore = create<GameAdderState>((set) => ({
+export const useGameAdderStore = create<GameAdderState>((set, get) => ({
   isOpen: false,
   setIsOpen: (isOpen): void => set({ isOpen }),
   isLoading: false,
@@ -53,7 +55,34 @@ export const useGameAdderStore = create<GameAdderState>((set) => ({
   screenshotList: [],
   setScreenshotList: (screenshotList): void => set({ screenshotList }),
   screenshotUrl: '',
-  setScreenshotUrl: (screenshotUrl): void => set({ screenshotUrl })
+  setScreenshotUrl: (screenshotUrl): void => set({ screenshotUrl }),
+  handleClose: (): void => {
+    const {
+      isLoading,
+      setIsOpen,
+      setDataSource,
+      setDbId,
+      setId,
+      setName,
+      setScreenshotList,
+      setScreenshotUrl,
+      setGameList,
+      setIsLoading
+    } = get()
+    if (isLoading) {
+      toast.warning('请等待游戏添加完成')
+      return
+    }
+    setIsOpen(false)
+    setDataSource('steam')
+    setDbId('')
+    setId('')
+    setName('')
+    setScreenshotList([])
+    setScreenshotUrl('')
+    setGameList([])
+    setIsLoading(false)
+  }
 }))
 
 export const initializeStore = (defaultDataSource: DataSource): void => {