From 7c01e6eb56d203d8811072141f9399fd844b64b2 Mon Sep 17 00:00:00 2001
From: Matt Driscoll <mdriscoll@esri.com>
Date: Wed, 14 Feb 2024 11:47:01 -0800
Subject: [PATCH] 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.
---
 packages/calcite-components/src/assets/styles/_sortable.scss | 4 +++-
 packages/calcite-components/src/utils/sortableComponent.ts   | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/packages/calcite-components/src/assets/styles/_sortable.scss b/packages/calcite-components/src/assets/styles/_sortable.scss
index 82d9714b688..ae119bc7ea5 100644
--- 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
index 699da0de0eb..9aac092fa77 100644
--- 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",
 };
 
 /**