Fixed schedule rotations form (#3904)

# What this PR does

- Improves the calculation of dragging area limits
- Fixes some minor margin/padding inconsistencies for which horizontal
scrollbar was appended

## Which issue(s) this PR fixes

#3868

## Checklist

- [ ] Unit, integration, and e2e (if applicable) tests updated
- [ ] Documentation added (or `pr:no public docs` PR label added if not
required)
- [ ] `CHANGELOG.md` updated (or `pr:no changelog` PR label added if not
required)

src/components/UserGroups/UserGroups.module.css

@@ -32,8 +32,6 @@
   display: flex;
   flex-direction: column;
   gap: 1px;
-  max-height: 300px;
-  overflow: auto;
 }
 
 .user {

src/components/WorkingHours/WorkingHours.tsx

@@ -52,9 +52,9 @@ export const WorkingHours: FC<WorkingHoursProps> = (props) => {
             <rect
               className={cx('stripes')}
               key={index}
-              x={`${(start * 100) / duration}%`}
+              x={`${duration > 0 ? (start * 100) / duration : 0}%`} // x/0 is NaN
               y={0}
-              width={`${(diff * 100) / duration}%`}
+              width={`${duration > 0 ? (diff * 100) / duration : 0} %`} // x/0 is NaN
               height="100%"
               fill={light ? 'url(#stripes_light)' : 'url(#stripes)'}
             />

src/containers/RotationForm/RotationForm.module.css

@@ -1,12 +1,11 @@
 .container {
-  margin: 15px -15px;
+  margin: 15px 0;
   padding: 15px 0;
   border-top: var(--border-medium);
   border-bottom: var(--border-medium);
-}
-
-.content {
-  padding: 0 15px;
+  width: 100%;
+  max-height: 56vh;
+  overflow-y: auto;
 }
 
 .override-form-content {
@@ -97,3 +96,21 @@
   margin-bottom: 10px;
   width: 100%;
 }
+
+@media (max-height: 768px) {
+  .container {
+    max-height: 45vh;
+  }
+}
+
+@media (max-height: 868px) {
+  .container {
+    max-height: 48vh;
+  }
+}
+
+@media (max-height: 968px) {
+  .container {
+    max-height: 52vh;
+  }
+}

src/containers/RotationForm/RotationForm.tsx

@@ -57,9 +57,10 @@ import {
   getUTCWeekStart,
   getWeekStartString,
 } from 'pages/schedule/Schedule.helpers';
+import { isTopNavbar } from 'plugin/GrafanaPluginRootPage.helpers';
 import { useStore } from 'state/useStore';
 import { getCoords, waitForElement } from 'utils/DOM';
-import { GRAFANA_HEADER_HEIGHT } from 'utils/consts';
+import { GRAFANA_HEADER_HEIGHT, GRAFANA_LEGACY_SIDEBAR_WIDTH } from 'utils/consts';
 import { useDebouncedCallback } from 'utils/hooks';
 
 import styles from './RotationForm.module.css';
@@ -421,6 +422,13 @@ export const RotationForm = observer((props: RotationFormProps) => {
     }
   }, [store.timezoneStore.selectedTimezoneOffset]);
 
+  useEffect(() => {
+    window.addEventListener('resize', onResize);
+    return () => {
+      window.removeEventListener('resize', onResize);
+    };
+  }, []);
+
   const isFormValid = useMemo(() => !Object.keys(errors).length, [errors]);
 
   const hasUpdatedShift = shift && shift.updated_shift;
@@ -440,7 +448,7 @@ export const RotationForm = observer((props: RotationFormProps) => {
             handle=".drag-handler"
             defaultClassName={cx('draggable')}
             positionOffset={{ x: 0, y: offsetTop }}
-            bounds={bounds || 'body'}
+            bounds={{ ...bounds } || 'body'}
             onStart={onDraggableInit}
           >
             <div {...props}>{children}</div>
@@ -699,18 +707,38 @@ export const RotationForm = observer((props: RotationFormProps) => {
     </>
   );
 
+  function onResize() {
+    onHide();
+  }
+
   function onDraggableInit(_e: DraggableEvent, data: DraggableData) {
     if (!data) {
       return;
     }
 
-    const scrollbarView = document.querySelector('.scrollbar-view')?.getBoundingClientRect();
-
-    const x = data.node.offsetLeft;
-    const top = -data.node.offsetTop + (scrollbarView?.top || 100);
-    const bottom = window.innerHeight - (data.node.offsetTop + data.node.offsetHeight);
-
-    setDraggableBounds({ left: -x, right: x, top: top - offsetTop, bottom: bottom - offsetTop });
+    // top navbar display has 2 scrollbar-view elements (navbar & content)
+    const baseReferenceEl = document.querySelectorAll<HTMLElement>('.scrollbar-view')[1];
+
+    const baseReferenceElRect = baseReferenceEl.getBoundingClientRect();
+
+    const { right, bottom } = baseReferenceElRect;
+
+    setDraggableBounds(
+      isTopNavbar()
+        ? {
+            // values are adjusted by any padding/margin differences
+            left: -data.node.offsetLeft + 4,
+            right: right - (data.node.offsetLeft + data.node.offsetWidth) - 12,
+            top: -offsetTop + GRAFANA_HEADER_HEIGHT + 4,
+            bottom: bottom - data.node.offsetHeight - offsetTop - 12,
+          }
+        : {
+            left: -data.node.offsetLeft + 4 + GRAFANA_LEGACY_SIDEBAR_WIDTH,
+            right: right - (data.node.offsetLeft + data.node.offsetWidth) - 12,
+            top: -offsetTop + 4,
+            bottom: bottom - data.node.offsetHeight - offsetTop - 12,
+          }
+    );
   }
 });
 

src/utils/consts.ts

@@ -19,6 +19,8 @@ export const FALLBACK_LICENSE = CLOUD_VERSION_REGEX.test(APP_VERSION) ? GRAFANA_
 // height of new Grafana sticky header with breadcrumbs
 export const GRAFANA_HEADER_HEIGHT = 80;
 
+export const GRAFANA_LEGACY_SIDEBAR_WIDTH = 56;
+
 // Reusable breakpoint sizes
 export const BREAKPOINT_TABS = 1024;