fix(admin-ui): Fix Y-axis scroll in bulk editor (#5726)

.changeset/lovely-ghosts-lick.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): Makes it possible to scroll overflow on the Y-axis in the /products/:id bulk editor

packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-actions.tsx

@@ -1,7 +1,7 @@
-import React, { useMemo } from "react"
+import { useMemo } from "react"
 
-import { useAdminRegions, useAdminStore } from "medusa-react"
 import * as DropdownMenu from "@radix-ui/react-dropdown-menu"
+import { useAdminRegions, useAdminStore } from "medusa-react"
 
 import Button from "../../../fundamentals/button"
 import AdjustmentsIcon from "../../../fundamentals/icons/adjustments-icon"
@@ -38,7 +38,7 @@ function EditPricesActions(props: EditPricesActionsProps) {
   return (
     <div
       style={{ fontSize: 13 }}
-      className="flex items-center gap-2 border-t py-[12px] px-4"
+      className="border-ui-border-base flex items-center gap-2 border-b border-t px-4 py-[12px]"
     >
       <DropdownMenu.Root>
         <DropdownMenu.Trigger asChild>

packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-table.tsx

@@ -1,18 +1,18 @@
-import React, { useEffect, useMemo, useRef, useState } from "react"
-import { useAdminRegions, useAdminStore } from "medusa-react"
 import { Product } from "@medusajs/client-types"
+import { useAdminRegions, useAdminStore } from "medusa-react"
+import React, { useEffect, useMemo, useRef, useState } from "react"
 
+import useNotification from "../../../../hooks/use-notification"
+import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
+import Tooltip from "../../../atoms/tooltip"
+import IconBuildingTax from "../../../fundamentals/icons/building-tax-icon"
+import CurrencyCell from "./currency-cell"
 import {
   getCurrencyPricesOnly,
   getRegionPricesOnly,
-  mod,
   isText,
+  mod,
 } from "./utils"
-import IconBuildingTax from "../../../fundamentals/icons/building-tax-icon"
-import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
-import Tooltip from "../../../atoms/tooltip"
-import CurrencyCell from "./currency-cell"
-import useNotification from "../../../../hooks/use-notification"
 
 enum ArrowMove {
   UP,
@@ -669,21 +669,22 @@ function EditPricesTable(props: EditPricesTableProps) {
   }
 
   return (
-    <div className="h-full overflow-x-auto">
+    // 60px is the height of the subheader, 64px is the height of the header
+    <div className="h-[calc(100%-60px-64px)] overflow-auto">
       <table
         onMouseMove={
           /** prevent default browser highlighting while dragging **/
           (e) => e.preventDefault()
         }
         style={{ fontSize: 13, borderCollapse: "collapse" }}
-        className="w-full table-auto"
+        className="h-full w-full table-auto"
       >
         <thead>
           <tr
             style={{ height: 42 }}
             className="tw-text-medusa-text-subtle h-2 text-left font-normal"
           >
-            <th className="h-2 border pl-4 font-medium text-gray-400">
+            <th className="h-2 border border-t-0 pl-4 font-medium text-gray-400">
               Product
             </th>
             {props.currencies.map((c) => {
@@ -691,7 +692,7 @@ function EditPricesTable(props: EditPricesTableProps) {
               return (
                 <th
                   key={c}
-                  className="min-w-[220px] border px-4 font-medium text-gray-400"
+                  className="min-w-[220px] border border-t-0 px-4 font-medium text-gray-400"
                 >
                   <div className="flex items-center justify-between">
                     <span>Price {c.toUpperCase()}</span>
@@ -712,7 +713,7 @@ function EditPricesTable(props: EditPricesTableProps) {
               return (
                 <th
                   key={r}
-                  className="min-w-[220px] max-w-[220px]  border px-4 font-medium text-gray-400"
+                  className="min-w-[220px] max-w-[220px]  border border-t-0 px-4 font-medium text-gray-400"
                 >
                   <div className="flex items-center justify-between gap-2">
                     <span className="flex overflow-hidden">

packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/index.tsx

@@ -1,26 +1,26 @@
 import { MoneyAmount, Product } from "@medusajs/client-types"
+import { useAdminRegions, useAdminUpdateVariant } from "medusa-react"
+import { useEffect, useMemo, useRef, useState } from "react"
 import {
   getAllProductPricesCurrencies,
   getAllProductPricesRegions,
   getCurrencyPricesOnly,
   getRegionPricesOnly,
 } from "./utils"
-import { useAdminRegions, useAdminUpdateVariant } from "medusa-react"
-import { useEffect, useMemo, useRef, useState } from "react"
 
-import Button from "../../../fundamentals/button"
-import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
-import CrossIcon from "../../../fundamentals/icons/cross-icon"
-import DeletePrompt from "../../delete-prompt"
-import EditPricesActions from "./edit-prices-actions"
-import EditPricesTable from "./edit-prices-table"
-import Fade from "../../../atoms/fade-wrapper"
-import Modal from "../../../molecules/modal"
-import SavePrompt from "./save-prompt"
 import mapKeys from "lodash/mapKeys"
 import pick from "lodash/pick"
 import pickBy from "lodash/pickBy"
 import useNotification from "../../../../hooks/use-notification"
+import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
+import Fade from "../../../atoms/fade-wrapper"
+import Button from "../../../fundamentals/button"
+import CrossIcon from "../../../fundamentals/icons/cross-icon"
+import Modal from "../../../molecules/modal"
+import DeletePrompt from "../../delete-prompt"
+import EditPricesActions from "./edit-prices-actions"
+import EditPricesTable from "./edit-prices-table"
+import SavePrompt from "./save-prompt"
 
 type EditPricesModalProps = {
   close: () => void