fix table styles

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} />
+  )
+}