feat(api): use position:sticky for grid swimlanes

ui/src/Components/Grid/AlertGrid/Grid.tsx

@@ -39,6 +39,7 @@ const Grid: FC<{
   groupWidth: number;
   grid: APIGridT;
   outerPadding: number;
+  paddingTop: number;
 }> = ({
   alertStore,
   settingsStore,
@@ -47,6 +48,7 @@ const Grid: FC<{
   groupWidth,
   grid,
   outerPadding,
+  paddingTop,
 }) => {
   const context = React.useContext(ThemeContext);
   const { ref, repack } = useGrid(gridSizesConfig);
@@ -123,6 +125,7 @@ const Grid: FC<{
           grid={grid}
           isExpanded={isExpanded}
           onToggle={onCollapseClick}
+          paddingTop={paddingTop}
         />
       </CSSTransition>
       <div

ui/src/Components/Grid/AlertGrid/Swimlane.tsx

@@ -18,9 +18,20 @@ const Swimlane: FC<{
   grid: APIGridT;
   isExpanded: boolean;
   onToggle: (event: MouseEvent) => void;
-}> = ({ alertStore, settingsStore, grid, isExpanded, onToggle }) => {
+  paddingTop: number;
+}> = ({
+  alertStore,
+  settingsStore,
+  grid,
+  isExpanded,
+  onToggle,
+  paddingTop,
+}) => {
   return (
-    <h5 className="components-grid-swimlane d-flex flex-row justify-content-between rounded px-2 py-1 my-1 border border-dark">
+    <h5
+      className="components-grid-swimlane d-flex flex-row justify-content-between rounded px-2 py-1 my-1 border border-dark"
+      style={{ top: paddingTop }}
+    >
       <span className="flex-shrink-0 flex-grow-0 d-none d-sm-block">
         <span className="badge components-label px-0 ms-1 me-3">
           <FontAwesomeIcon icon={faTh} className="text-muted" />

ui/src/Components/Grid/AlertGrid/index.test.tsx

@@ -114,6 +114,7 @@ const ShallowGrid = () => {
       groupWidth={420}
       grid={MockGrid()}
       outerPadding={0}
+      paddingTop={0}
     />
   );
 };
@@ -128,6 +129,7 @@ const MountedGrid = (theme?: ThemeCtx) => {
       groupWidth={420}
       grid={MockGrid()}
       outerPadding={0}
+      paddingTop={0}
     />,
     {
       wrappingComponent: ThemeContext.Provider,
@@ -234,6 +236,7 @@ describe("<Grid />", () => {
         groupWidth={420}
         grid={alertStore.data.grids[0]}
         outerPadding={0}
+        paddingTop={0}
       />,
       {
         wrappingComponent: ThemeContext.Provider,
@@ -269,6 +272,7 @@ describe("<Grid />", () => {
         groupWidth={420}
         grid={alertStore.data.grids[0]}
         outerPadding={0}
+        paddingTop={0}
       />,
       {
         wrappingComponent: ThemeContext.Provider,

ui/src/Components/Grid/AlertGrid/index.tsx

@@ -1,4 +1,4 @@
-import { FC, useEffect, useState, useRef } from "react";
+import { FC, useEffect, useState, useRef, useCallback } from "react";
 
 import { autorun } from "mobx";
 import { observer } from "mobx-react-lite";
@@ -57,6 +57,17 @@ const AlertGrid: FC<{
 
   useHotkeys("alt+space", alertStore.status.togglePause);
 
+  const [paddingTop, setPaddingTop] = useState<number>(0);
+  const onNavbarResize = useCallback((event) => {
+    setPaddingTop(event.detail);
+  }, []);
+  useEffect(() => {
+    window.addEventListener("navbarResize", onNavbarResize);
+    return () => {
+      window.removeEventListener("navbarResize", onNavbarResize);
+    };
+  }, [onNavbarResize]);
+
   return (
     <>
       <div
@@ -66,16 +77,18 @@ const AlertGrid: FC<{
         }}
       />
       {alertStore.data.grids.map((grid) => (
-        <Grid
-          key={`${grid.labelName}/${grid.labelValue}`}
-          alertStore={alertStore}
-          silenceFormStore={silenceFormStore}
-          settingsStore={settingsStore}
-          gridSizesConfig={gridSizesConfig}
-          groupWidth={groupWidth}
-          grid={grid}
-          outerPadding={alertStore.data.gridPadding}
-        />
+        <div key={`${grid.labelName}/${grid.labelValue}`}>
+          <Grid
+            alertStore={alertStore}
+            silenceFormStore={silenceFormStore}
+            settingsStore={settingsStore}
+            gridSizesConfig={gridSizesConfig}
+            groupWidth={groupWidth}
+            grid={grid}
+            outerPadding={alertStore.data.gridPadding}
+            paddingTop={paddingTop}
+          />
+        </div>
       ))}
     </>
   );

ui/src/Components/NavBar/index.tsx

@@ -40,6 +40,11 @@ const NavBar: FC<{
       const paddingTop = idle ? 0 : height + 8;
       document.body.style.paddingTop = `${paddingTop}px`;
       setContainerClass(idle ? "invisible" : "visible");
+
+      const toggleEvent = new CustomEvent("navbarResize", {
+        detail: paddingTop,
+      });
+      window.dispatchEvent(toggleEvent);
     },
     [height]
   );

ui/src/Styles/Components/_AlertGrid.scss

@@ -3,4 +3,7 @@
   background-color: $grid-swimlane-bg;
   margin-left: 0.3rem;
   margin-right: 0.3rem;
+
+  position: sticky;
+  z-index: 101;
 }