fix(dashboard): add tooltip for full product/variant name in pricing data grids (#15962)

* fix(dashboard): widen title column and add tooltip in pricing data grids

* address review: revert width change, use @medusajs/ui Tooltip

Author: andershermansen

.changeset/pricing-grid-tooltip.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/dashboard": patch
+---
+
+fix(dashboard): show full product/variant name via tooltip in the price list and variant pricing grids

packages/admin/dashboard/src/routes/price-lists/common/hooks/use-price-list-grid-columns.tsx

@@ -1,4 +1,5 @@
 import { HttpTypes } from "@medusajs/types"
+import { Tooltip } from "@medusajs/ui"
 import { ColumnDef } from "@tanstack/react-table"
 import { useMemo } from "react"
 import { useTranslation } from "react-i18next"
@@ -43,7 +44,9 @@ export const usePriceListGridColumns = ({
               <DataGrid.ReadonlyCell context={context}>
                 <div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
                   <Thumbnail src={entity.thumbnail} size="small" />
-                  <span className="truncate">{entity.title}</span>
+                  <Tooltip content={entity.title}>
+                    <span className="truncate">{entity.title}</span>
+                  </Tooltip>
                 </div>
               </DataGrid.ReadonlyCell>
             )
@@ -52,7 +55,9 @@ export const usePriceListGridColumns = ({
           return (
             <DataGrid.ReadonlyCell context={context} color="normal">
               <div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
-                <span className="truncate">{entity.title}</span>
+                <Tooltip content={entity.title}>
+                  <span className="truncate">{entity.title}</span>
+                </Tooltip>
               </div>
             </DataGrid.ReadonlyCell>
           )

packages/admin/dashboard/src/routes/products/common/variant-pricing-form.tsx

@@ -1,4 +1,5 @@
 import { HttpTypes } from "@medusajs/types"
+import { Tooltip } from "@medusajs/ui"
 import { useMemo } from "react"
 import { UseFormReturn, useWatch } from "react-hook-form"
 import { useTranslation } from "react-i18next"
@@ -72,7 +73,9 @@ const useVariantPriceGridColumns = ({
           return (
             <DataGrid.ReadonlyCell context={context}>
               <div className="flex h-full w-full items-center gap-x-2 overflow-hidden">
-                <span className="truncate">{entity.title}</span>
+                <Tooltip content={entity.title}>
+                  <span className="truncate">{entity.title}</span>
+                </Tooltip>
               </div>
             </DataGrid.ReadonlyCell>
           )