fix(admin-ui): Update order edit variants table to fit longer content (#3608)

* Fix stock cell check, update table columns to fit longer content

* Create nine-planes-kneel.md

* Update check

Co-authored-by: Carlos R. L. Rodrigues <37986729+carlos-r-l-rodrigues@users.noreply.github.com>

---------

Co-authored-by: Carlos R. L. Rodrigues <37986729+carlos-r-l-rodrigues@users.noreply.github.com>

.changeset/nine-planes-kneel.md

@@ -0,0 +1,5 @@
+---
+"@medusajs/admin-ui": patch
+---
+
+fix(admin-ui): Update order edit variants table to fit longer content

packages/admin-ui/ui/src/domain/orders/edit/variants-table.tsx

@@ -64,7 +64,7 @@ const VariantsTable: React.FC<Props> = (props) => {
       )
     }
 
-    if (!isLoading && (!variant || !variant.inventory)) {
+    if (!isLoading && !variant?.inventory?.length) {
       return <div className="text-right">{original.inventory_quantity}</div>
     }
 
@@ -102,14 +102,7 @@ const VariantsTable: React.FC<Props> = (props) => {
     )
   }
 
-  const columns = useMemo(() => {
+  const ProductCell = ({ row: { original } }) => {
-    return [
-      {
-        Header: (
-          <div className="text-small font-semibold text-gray-500">Name</div>
-        ),
-        accessor: "title",
-        Cell: ({ row: { original } }) => {
     return (
       <div className="flex items-center">
         <div className="my-1.5 mr-4 flex h-[40px] w-[30px] items-center">
@@ -122,35 +115,31 @@ const VariantsTable: React.FC<Props> = (props) => {
             <ImagePlaceholder />
           )}
         </div>
-              <div className="flex flex-col">
+        <div className="flex max-w-[200px] flex-col">
-                <span>{original.product.title}</span>
+          <Tooltip
-                {original.title}
+            content={
+              <span className="font-normal">{original.product.title}</span>
+            }
+            maxWidth={400}
+          >
+            <div className="truncate">
+              {original.sku ?? original.product.title}
+            </div>
+          </Tooltip>
+          <span className="text-grey-50">{original.title}</span>
         </div>
       </div>
     )
-        },
+  }
-      },
+
+  const columns = useMemo(() => {
+    return [
       {
         Header: (
-          <div className="text-small font-semibold text-gray-500">SKU</div>
+          <div className="text-small font-semibold text-gray-500">Product</div>
         ),
         accessor: "sku",
-        Cell: ({ row: { original } }) => <div>{original.sku}</div>,
+        Cell: ProductCell,
-      },
-      {
-        Header: (
-          <div className="text-small font-semibold text-gray-500">Options</div>
-        ),
-        accessor: "options",
-        Cell: ({ row: { original } }) => {
-          const options = original.options?.map(({ value }) => value).join(", ")
-
-          return (
-            <div title={options} className="max-w-[160px] truncate">
-              <span>{options}</span>
-            </div>
-          )
-        },
       },
       {
         Header: (