Remove dynamic transform in styles from sortable

frontend/src/metabase/core/components/Sortable/Sortable.module.css

@@ -0,0 +1,3 @@
+.dragging {
+  z-index: 10;
+}

frontend/src/metabase/core/components/Sortable/Sortable.tsx

@@ -3,7 +3,7 @@ import { useSortable } from "@dnd-kit/sortable";
 import { CSS } from "@dnd-kit/utilities";
 import type { CSSProperties, ElementType, ReactNode } from "react";
 
-import { SortableDiv } from "./Sortable.styled";
+import S from "./Sortable.module.css";
 
 export interface SortableProps {
   id: UniqueIdentifier;
@@ -20,7 +20,7 @@ export interface SortableProps {
  */
 export function Sortable({
   id,
-  as = "div",
+  as: Component = "div",
   children,
   disabled = false,
   draggingStyle,
@@ -39,13 +39,16 @@ export function Sortable({
     animateLayoutChanges: () => false,
   });
 
+  const style = {
+    ...(isDragging ? draggingStyle : {}),
+    transform: CSS.Translate.toString(transform),
+    transition: transition,
+  };
+
   return (
-    <SortableDiv
-      style={isDragging ? draggingStyle : {}}
-      as={as}
-      transform={CSS.Translate.toString(transform)}
-      transition={transition}
-      isDragging={isDragging}
+    <Component
+      className={isDragging ? S.dragging : undefined}
+      style={style}
       data-is-dragging={isDragging}
       ref={setNodeRef}
       {...attributes}
@@ -53,6 +56,6 @@ export function Sortable({
       role={role}
     >
       {children}
-    </SortableDiv>
+    </Component>
   );
 }

frontend/src/metabase/core/components/TabButton/TabButton.tsx

@@ -282,5 +282,7 @@ export function RenameableTabButton({
 
 export const TabButton = Object.assign(_TabButton, {
   Root: TabButtonRoot,
-  Renameable: RenameableTabButton,
+  Renameable: Object.assign(RenameableTabButton, {
+    Root: RenameableTabButtonStyled,
+  }),
 });

frontend/src/metabase/core/components/TabRow/TabRow.styled.tsx

@@ -1,7 +1,6 @@
 // eslint-disable-next-line no-restricted-imports
 import styled from "@emotion/styled";
 
-import { SortableDiv } from "metabase/core/components/Sortable";
 import { TabButton } from "metabase/core/components/TabButton";
 import TabLink from "metabase/core/components/TabLink";
 import BaseTabList from "metabase/core/components/TabList";
@@ -32,7 +31,7 @@ export const TabList = styled(BaseTabList)`
     margin-right: 0.75rem;
   }
 
-  ${SortableDiv}:not(:last-child) {
+  ${TabButton.Renameable.Root}:not(:last-child) {
     margin-right: 0.75rem;
   }
 `;