Bulk-Edit-App: Freeze top row with Field Names [INTEG-2953] (#10076)

* freeze top row with Field Names

* removing unused import

Author: FBanfi

apps/bulk-edit/src/locations/Page/components/TableHeader.tsx

@@ -22,7 +22,7 @@ export const TableHeader: React.FC<TableHeaderProps> = ({
 }) => {
   return (
     <Table.Head style={styles.tableHead}>
-      <Table.Row>
+      <Table.Row style={styles.stickyTableRow}>
         {fields.length > 0 && (
           <Table.Cell as="th" key={DISPLAY_NAME_COLUMN} style={styles.stickyTableHeader}>
             Display name

apps/bulk-edit/src/locations/Page/styles.ts

@@ -1,5 +1,4 @@
 import tokens from '@contentful/f36-tokens';
-import { SortMenu } from './components/SortMenu';
 
 const SIDEBAR_WIDTH = 220;
 const STICKY_SPACER_SPACING = 24;
@@ -14,7 +13,7 @@ export const styles = {
     position: 'sticky',
     left: 0,
     top: 0,
-    zIndex: 3,
+    zIndex: 4,
     background: tokens.colorWhite,
   },
   mainContent: {
@@ -52,6 +51,12 @@ export const styles = {
     borderRight: `1px solid ${tokens.gray300}`,
     minWidth: `${CELL_WIDTH}px`,
   },
+  stickyTableRow: {
+    background: tokens.colorWhite,
+    position: 'sticky',
+    top: 0,
+    zIndex: 2,
+  },
   cell: {
     borderRight: `1px solid ${tokens.gray300}`,
     minWidth: `${CELL_WIDTH}px`,
@@ -74,7 +79,7 @@ export const styles = {
   stickySpacer: {
     position: 'sticky',
     left: SIDEBAR_WIDTH,
-    zIndex: 1,
+    zIndex: 3,
     top: 0,
     background: tokens.colorWhite,
     width: STICKY_SPACER_SPACING,