fix table styles

src/components/Table/Styled/StyledCell.tsx

@@ -33,8 +33,9 @@ export const StyledCell = styled("div")(({ theme }) => ({
     borderTop: `1px solid ${theme.palette.divider}`,
   },
 
-  "&[aria-invalid='true']": {
-    boxShadow: `inset 0 0 0 2px ${theme.palette.error.main}`,
+  "&[aria-invalid='true'] .cell-contents": {
+    outline: `2px dotted ${theme.palette.error.main}`,
+    outlineOffset: -2,
   },
 }));
 StyledCell.displayName = "StyledCell";

src/components/Table/TableHeader.tsx

@@ -12,7 +12,7 @@ import FinalColumnHeader from "./FinalColumn/FinalColumnHeader";
 import { DragVertical } from "@src/assets/icons";
 
 import { tableScope, selectedCellAtom } from "@src/atoms/tableScope";
-import { DEFAULT_ROW_HEIGHT, TABLE_PADDING } from "@src/components/Table";
+import { DEFAULT_ROW_HEIGHT } from "@src/components/Table";
 
 export interface ITableHeaderProps {
   headerGroups: HeaderGroup<TableRow>[];
@@ -93,7 +93,7 @@ export const TableHeader = memo(function TableHeader({
                         style={{
                           width: header.getSize(),
                           left: header.column.getIsPinned()
-                            ? header.column.getStart() - TABLE_PADDING
+                            ? header.column.getStart()
                             : undefined,
                           ...provided.draggableProps.style,
                           zIndex: header.column.getIsPinned() ? 11 : 10,

src/components/fields/MultiSelect/index.tsx

@@ -34,7 +34,7 @@ export const config: IFieldConfig = {
     "Multiple values from predefined options. Options are searchable and users can optionally input custom values.",
   TableCell: withTableCell(DisplayCell, EditorCell, "popover", {
     disablePadding: true,
-    transparentPopover: true,
+    transparentPopover: false,
   }),
   SideDrawerField,
   settings: Settings,