Fix: There was an issue introduced during refactoring. The problem occurs when the user drags too quickly from left to right: the mouse suddenly leaves the dialog window and loses the drag content. This causes the dragging to get stuck and results in poor UX. (#642)

This is the reason behind the rather complex border logic. Increasing or changing the border requires recalculating the icon’s position. It’s not particularly nice, but it works quite smoothly.

Author: aiAdrian

src/app/view/dialogs/trainrun-and-section-dialog/trainrun-and-section-dialog.component.scss

@@ -101,23 +101,30 @@
   cursor: move;
 
   .dialog-drag-handle-icon {
-    transform: translate(-12px, 242px);
+    transform: translate(-12px, 230px);
     pointer-events: none;
     opacity: 0.25;
   }
+}
 
-  &:active .dialog-drag-handle-icon {
-    color: #eb0000;
-    opacity: 0.5;
+.dialog-drag-and-close-handle-area:hover {
+  .dialog-drag-handle-icon {
+    transform: translate(-12px, 230px);
+    pointer-events: none;
   }
 }
 
-::ng-deep
-  .trainrun-dialog-container:active
-  ~ .dialog-drag-and-close-handle-area
+.dialog-drag-and-close-handle-area:active {
+  border: 116px solid rgba(0, 0, 0, 0);
+
   .dialog-drag-handle-icon {
-  color: #eb0000;
-  opacity: 0.5;
+    transform: translate(-112px, 130px);
+    pointer-events: none;
+  }
+
+  .dialog-close-button-icon {
+    transform: translate(-114px, -160px);
+  }
 }
 
 .sbb-tab-group {