fix: fix styling when dragging items on a mobile device (#8750)

**Related Issue:** #8728 ## Summary - Fixes fallback ghost element styling to not overflow its container. - adds fallback class for sortable items.
Esri · Feb 15, 2024 · fb75f2b · fb75f2b
1 parent 8357a78
commit fb75f2b
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 1 deletion.
diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss
@@ -1,7 +1,9 @@
 @mixin sortable-helper-classes() {
   .calcite-sortable--chosen,
   .calcite-sortable--ghost,
-  .calcite-sortable--drag {
+  .calcite-sortable--drag,
+  .calcite-sortable--fallback {
+    position: relative;
     overflow: hidden;
   }
 

diff --git a/packages/calcite-components/src/utils/sortableComponent.ts b/packages/calcite-components/src/utils/sortableComponent.ts
@@ -13,6 +13,7 @@ export const CSS = {
   ghostClass: "calcite-sortable--ghost",
   chosenClass: "calcite-sortable--chosen",
   dragClass: "calcite-sortable--drag",
+  fallbackClass: "calcite-sortable--fallback",
 };
 
 /**