[PM-12776] Draggable Items within a dialog (#11396)

* increase z-index `cdk-drag-preview` so it displays on top of modals/dialogs when draggable elements are within them

* update comment overlay z-index and add ticket number

* update comment

libs/components/src/tw-theme.css

@@ -1,9 +1,9 @@
 @import "./reset.css";
 
-/** 
-  Note that the value of the *-600 colors is currently equivalent to the value 
+/**
+  Note that the value of the *-600 colors is currently equivalent to the value
   of the *-500 variant of that color. This is a temporary change to make BW-42
-  updates easier. 
+  updates easier.
 
   TODO remove comment when the color palette portion of BW-42 is completed.
 */
@@ -196,7 +196,7 @@
 @import "./toast/toast.tokens.css";
 @import "./toast/toastr.css";
 
-/** 
+/**
  * tw-break-words does not work with table cells:
  * https://github.com/tailwindlabs/tailwindcss/issues/835
  */
@@ -204,7 +204,7 @@ td.tw-break-words {
   overflow-wrap: anywhere;
 }
 
-/** 
+/**
  * tw-list-none hides summary arrow in Firefox & Chrome but not Safari:
  * https://github.com/tailwindlabs/tailwindcss/issues/924#issuecomment-915509785
  */
@@ -213,7 +213,7 @@ summary.tw-list-none::-webkit-details-marker {
   display: none;
 }
 
-/** 
+/**
  * Arbitrary values can't be used with `text-align`:
  * https://github.com/tailwindlabs/tailwindcss/issues/802#issuecomment-849013311
  */
@@ -222,10 +222,11 @@ summary.tw-list-none::-webkit-details-marker {
 }
 
 /**
- * Bootstrap uses z-index: 1050 for modals, dialogs should appear above them.
- * Remove once bootstrap is removed from our codebase.
- * CL-XYZ
+ * Bootstrap uses z-index: 1050 for modals, dialogs and drag-and-drop previews should appear above them.
+ * When bootstrap is removed, test if these styles are still needed and that overlays display properly over other content.
+ * CL-483
  */
+.cdk-drag-preview,
 .cdk-overlay-container,
 .cdk-global-overlay-wrapper,
 .cdk-overlay-connected-position-bounding-box,