fix table styles

src/app/(home)/players/[id]/page.tsx

@@ -9,7 +9,6 @@ export default async function PlayerPage({
 }: {
   params: Promise<{ id: string }>
 }) {
-  const session = await auth()
   const { id } = await params
   if (id) {
     await Promise.all([

src/app/(home)/players/[id]/user.tsx

@@ -5,14 +5,13 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
-} from '@/components/ui/tooltip'
+} from '@/components/ui/mobile-tooltip'
 import type React from 'react'
 import { useState } from 'react'
 
 import { GamesTable } from '@/app/players/[id]/_components/games-table'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Badge } from '@/components/ui/badge'
-import { Card, CardContent, CardHeader } from '@/components/ui/card'
 import {
   Select,
   SelectContent,
@@ -78,7 +77,6 @@ export function UserInfo() {
     channel_id: RANKED_CHANNEL,
     user_id: id,
   })
-  console.log({ vanillaUserRank, rankedUserRank })
 
   // Filter games by leaderboard if needed
   const filteredGamesByLeaderboard =
@@ -142,13 +140,12 @@ export function UserInfo() {
     .at(0)
 
   return (
-    <div className='min-h-screen bg-gradient-to-b from-gray-50 to-gray-100 dark:from-zinc-900 dark:to-zinc-950'>
+    <div className='flex flex-1 flex-col overflow-hidden'>
-      <div className='container mx-auto'>
+      <div className='mx-auto flex w-[calc(100%-1rem)] max-w-fd-container flex-1 flex-col'>
-        <Card className='overflow-hidden border-none bg-white py-0 shadow-lg dark:bg-zinc-900'>
+        <div className='py-8'>
-          <CardHeader className='border-gray-200 border-b bg-white p-6 dark:border-zinc-800 dark:bg-zinc-900'>
           <div className='flex flex-col items-center gap-6 md:flex-row'>
             <div className='relative'>
-                <Avatar className='h-24 w-24 border-4 border-gray-100 shadow-md dark:border-zinc-800'>
+              <Avatar className='size-24'>
                 <AvatarImage
                   src={profileData.avatar}
                   alt={profileData.username}
@@ -329,9 +326,8 @@ export function UserInfo() {
               )}
             </div>
           </div>
-          </CardHeader>
+        </div>
 
-          <CardContent className='p-0'>
         <Tabs defaultValue='matches' className='p-6'>
           <div className='mb-6 flex flex-col items-start justify-between gap-4 sm:flex-row sm:items-center'>
             <TabsList className='bg-gray-100 dark:bg-zinc-800'>
@@ -390,8 +386,7 @@ export function UserInfo() {
                   mmr={
                     lastRankedGame
                       ? Math.trunc(
-                              lastRankedGame.playerMmr +
+                          lastRankedGame.playerMmr + lastRankedGame.mmrChange
-                                lastRankedGame.mmrChange
                         )
                       : undefined
                   }
@@ -407,8 +402,7 @@ export function UserInfo() {
                   mmr={
                     lastVanillaGame
                       ? Math.trunc(
-                              lastVanillaGame.playerMmr +
+                          lastVanillaGame.playerMmr + lastVanillaGame.mmrChange
-                                lastVanillaGame.mmrChange
                         )
                       : undefined
                   }
@@ -438,8 +432,6 @@ export function UserInfo() {
             </div>
           </TabsContent>
         </Tabs>
-          </CardContent>
-        </Card>
       </div>
     </div>
   )

src/app/_components/leaderboard.tsx

@@ -169,7 +169,7 @@ export function LeaderboardPage() {
 
   return (
     <div className='flex flex-1 flex-col overflow-hidden'>
-      <div className=' mx-auto flex w-[calc(100%-1rem)] max-w-fd-container flex-1 flex-col'>
+      <div className='mx-auto flex w-[calc(100%-1rem)] max-w-fd-container flex-1 flex-col'>
         <div className='flex flex-1 flex-col overflow-hidden border-none'>
           <Tabs
             defaultValue={leaderboardType}
@@ -273,7 +273,7 @@ function RawLeaderboardTable({
       <div
         ref={tableContainerRef}
         className='flex-1 overflow-auto overflow-x-auto'
-        style={{ maxHeight: 'calc(100vh - 300px)' }}
+        style={{ maxHeight: 'calc(100vh - 200px)' }}
       >
         <Table>
           <TableHeader className='sticky top-0 z-10 bg-white dark:bg-zinc-900'>

src/app/docs/layout.tsx

@@ -4,7 +4,6 @@ import type { ReactNode } from 'react'
 import { source } from '../../../lib/source'
 
 export default function Layout({ children }: { children: ReactNode }) {
-  console.log(baseOptions)
   return (
     <DocsLayout {...baseOptions} tree={source.pageTree}>
       {children}

src/components/ui/mobile-tooltip.tsx

@@ -0,0 +1,71 @@
+'use client'
+
+import type {
+  PopoverContentProps,
+  PopoverProps,
+  PopoverTriggerProps,
+} from '@radix-ui/react-popover'
+import type {
+  TooltipContentProps,
+  TooltipProps,
+  TooltipProviderProps,
+  TooltipTriggerProps,
+} from '@radix-ui/react-tooltip'
+import { createContext, useContext, useEffect, useState } from 'react'
+import { Popover, PopoverContent, PopoverTrigger } from './popover'
+import {
+  Tooltip as OriginalTooltip,
+  TooltipContent as OriginalTooltipContent,
+  TooltipProvider as OriginalTooltipProvider,
+  TooltipTrigger as OriginalTooltipTrigger,
+} from './tooltip'
+
+const TouchContext = createContext<boolean | undefined>(undefined)
+const useTouch = () => useContext(TouchContext)
+
+export const TooltipProvider = ({
+  children,
+  ...props
+}: TooltipProviderProps) => {
+  const [isTouch, setTouch] = useState<boolean | undefined>(undefined)
+
+  useEffect(() => {
+    setTouch(window.matchMedia('(pointer: coarse)').matches)
+  }, [])
+
+  return (
+    <TouchContext.Provider value={isTouch}>
+      <OriginalTooltipProvider {...props}>{children}</OriginalTooltipProvider>
+    </TouchContext.Provider>
+  )
+}
+
+export const Tooltip = (props: TooltipProps & PopoverProps) => {
+  const isTouch = useTouch()
+
+  return isTouch ? <Popover {...props} /> : <OriginalTooltip {...props} />
+}
+
+export const TooltipTrigger = (
+  props: TooltipTriggerProps & PopoverTriggerProps
+) => {
+  const isTouch = useTouch()
+
+  return isTouch ? (
+    <PopoverTrigger {...props} />
+  ) : (
+    <OriginalTooltipTrigger {...props} />
+  )
+}
+
+export const TooltipContent = (
+  props: TooltipContentProps & PopoverContentProps
+) => {
+  const isTouch = useTouch()
+
+  return isTouch ? (
+    <PopoverContent {...props} />
+  ) : (
+    <OriginalTooltipContent {...props} />
+  )
+}