Merge pull request #1075 from Shelf-nu/fix-chromium-bug-while-scrolli…

…ng-over-tables-with-row-hover-effects

fixing issue with scrolling cause by an ancient chromium bug

app/components/booking/booking-assets-column.tsx

@@ -1,5 +1,4 @@
-import { useMemo } from "react";
-
+import React, { useMemo } from "react";
 import type { Kit } from "@prisma/client";
 import { AssetStatus, BookingStatus } from "@prisma/client";
 import { useLoaderData } from "@remix-run/react";
@@ -136,12 +135,8 @@ export function BookingAssetsColumn() {
                       const kit = assets[0].kit as Kit;
 
                       return (
-                        <>
-                          <ListItem
-                            item={kit}
-                            key={kit.id}
-                            className="bg-gray-50"
-                          >
+                        <React.Fragment key={kit.id}>
+                          <ListItem item={kit} className="bg-gray-50">
                             <Td className="w-full">
                               <Button
                                 to={`/kits/${kit.id}`}
@@ -173,7 +168,7 @@ export function BookingAssetsColumn() {
                               />
                             </ListItem>
                           ))}
-                        </>
+                        </React.Fragment>
                       );
                     })}
                   </tbody>

app/components/list/list-item.tsx

@@ -17,13 +17,22 @@ export const ListItem = ({
   className?: string;
 }) => (
   <tr
-    key={item.id}
     onClick={navigate ? () => navigate(item.id, item) : undefined}
     className={tw(
       "hover:bg-gray-50",
       navigate ? "cursor-pointer" : "",
       className
     )}
+    /**
+     * Chromium based browsers have a bug since 2014 that is related to
+     * hover effects on table rows while scrolling.
+     *  We add the following styles to fix the issue.
+     */
+    style={{
+      transform: "translateZ(0)",
+      willChange: "transform",
+      backgroundAttachment: "initial",
+    }}
   >
     {children}
   </tr>