From d5526736ecffab19dd4633ed64e08e097e433abe Mon Sep 17 00:00:00 2001
From: Kasper Fabricius Kristensen
 <45367945+kasperkristensen@users.noreply.github.com>
Date: Mon, 27 Nov 2023 16:34:53 +0000
Subject: [PATCH] fix(admin-ui): fix height of Bulk Editor cells to always be
 40px (#5737)

---
 .changeset/chilled-lions-wash.md                          | 5 +++++
 .../edit-prices-modal/currency-cell.tsx                   | 8 ++++----
 .../edit-prices-modal/edit-prices-table.tsx               | 8 ++++----
 3 files changed, 13 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/chilled-lions-wash.md

diff --git a/.changeset/chilled-lions-wash.md b/.changeset/chilled-lions-wash.md
new file mode 100644
index 0000000000000..20991959f12c7
--- /dev/null
+++ b/.changeset/chilled-lions-wash.md
@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): Fix height of Bulk Editor cells when product has few variants"
diff --git a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/currency-cell.tsx b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/currency-cell.tsx
index 2d9fc5cd56102..4e2779e7210b1 100644
--- a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/currency-cell.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/currency-cell.tsx
@@ -1,10 +1,10 @@
-import React, { forwardRef, useEffect, useRef, useState } from "react"
 import { ProductVariant } from "@medusajs/client-types"
-import AmountField from "react-currency-input-field"
 import clsx from "clsx"
+import React, { forwardRef, useEffect, useRef, useState } from "react"
+import AmountField from "react-currency-input-field"
 
-import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
 import { useAdminRegions } from "medusa-react"
+import { currencies as CURRENCY_MAP } from "../../../../utils/currencies"
 
 /**
  * Return currency metadata or metadata of region's currency
@@ -197,7 +197,7 @@ function CurrencyCell(props: CurrencyCellProps) {
     <td
       onMouseOver={() => onColumnOver(currencyCode || region)}
       onMouseDown={onCellMouseDown}
-      className={clsx("relative cursor-pointer border pr-2 pl-4", {
+      className={clsx("relative h-10 cursor-pointer border pl-4 pr-2", {
         "bg-blue-100": isSelected && !isAnchor,
       })}
       style={{
diff --git a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-table.tsx b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-table.tsx
index 8733fb6acac2f..167e5e5df7dd4 100644
--- a/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-table.tsx
+++ b/packages/admin-ui/ui/src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-table.tsx
@@ -677,12 +677,12 @@ function EditPricesTable(props: EditPricesTableProps) {
           (e) => e.preventDefault()
         }
         style={{ fontSize: 13, borderCollapse: "collapse" }}
-        className="h-full w-full table-auto"
+        className="w-full table-auto"
       >
         <thead>
           <tr
             style={{ height: 42 }}
-            className="tw-text-medusa-text-subtle h-2 text-left font-normal"
+            className="tw-text-medusa-text-subtle h-10 text-left font-normal"
           >
             <th className="h-2 border border-t-0 pl-4 font-medium text-gray-400">
               Product
@@ -734,7 +734,7 @@ function EditPricesTable(props: EditPricesTableProps) {
           </tr>
         </thead>
         <tbody>
-          <tr style={{ lineHeight: 3, background: "#f9fafb" }}>
+          <tr style={{ lineHeight: 3, background: "#f9fafb" }} className="">
             <td className="border pl-4 pr-4">
               <div className="text-black-800 flex items-center gap-2 overflow-hidden">
                 {props.product.thumbnail && (
@@ -768,7 +768,7 @@ function EditPricesTable(props: EditPricesTableProps) {
                 onMouseEnter={() => onMouseRowEnter(variant.id)}
                 style={{ lineHeight: 3 }}
               >
-                <td className="whitespace-nowrap border pl-10 pr-4 text-gray-600">
+                <td className="h-10 whitespace-nowrap border pl-10 pr-4 text-gray-600">
                   {variant.title} {variant.sku && `∙ ${variant.sku}`}
                 </td>