fix(admin-ui): fix height of Bulk Editor cells to always be 40px (#5737)

medusajs · Nov 27, 2023 · d552673 · d552673
1 parent 547b16e
commit d552673
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 8 deletions.
diff --git a/.changeset/chilled-lions-wash.md 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/.../ui/src/components/organisms/product-variants-section/edit-prices-modal/currency-cell.tsx b/.../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/...src/components/organisms/product-variants-section/edit-prices-modal/edit-prices-table.tsx b/...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>