From 930c32bdba4a16420190fe4d75b5b03205fdd07e Mon Sep 17 00:00:00 2001
From: Martin Marosi <marvusm.mmi@gmail.com>
Date: Mon, 16 Sep 2024 12:08:49 +0200
Subject: [PATCH] Fix all services dropdown and preview banner offset.

---
 .../AllServicesDropdown/AllServicesDropdown.scss          | 8 ++++++++
 src/components/AllServicesDropdown/AllServicesMenu.tsx    | 8 +++++++-
 2 files changed, 15 insertions(+), 1 deletion(-)

diff --git a/src/components/AllServicesDropdown/AllServicesDropdown.scss b/src/components/AllServicesDropdown/AllServicesDropdown.scss
index 84561dc0e..bbab4107b 100644
--- a/src/components/AllServicesDropdown/AllServicesDropdown.scss
+++ b/src/components/AllServicesDropdown/AllServicesDropdown.scss
@@ -14,10 +14,18 @@
   @media screen and (min-width: $pf-v5-global--breakpoint--2xl) {
     top: 70px;
     height: 100vh;
+    &.preview-offset {
+      // consider the preview banner
+      top: calc(70px + 32px);
+    }
   }
   @media screen and (max-width: $pf-v5-global--breakpoint--2xl) {
     top: 118px;
     height: 100vh;
+    &.preview-offset {
+      // consider the preview banner
+      top: calc(118px + 32px);
+    }
   }
 
   // pos has to be important to override PF styles that get lazy loaded!
diff --git a/src/components/AllServicesDropdown/AllServicesMenu.tsx b/src/components/AllServicesDropdown/AllServicesMenu.tsx
index 1f7d3026e..7e4cc2cb7 100644
--- a/src/components/AllServicesDropdown/AllServicesMenu.tsx
+++ b/src/components/AllServicesDropdown/AllServicesMenu.tsx
@@ -7,6 +7,8 @@ import { Panel, PanelMain } from '@patternfly/react-core/dist/dynamic/components
 import { Sidebar, SidebarContent, SidebarPanel } from '@patternfly/react-core/dist/dynamic/components/Sidebar';
 import { TabContent } from '@patternfly/react-core/dist/dynamic/components/Tabs';
 import { Title } from '@patternfly/react-core/dist/dynamic/components/Title';
+import { useAtomValue } from 'jotai';
+import classNames from 'classnames';
 
 import TimesIcon from '@patternfly/react-icons/dist/dynamic/icons/times-icon';
 import type { AllServicesSection } from '../AllServices/allServicesLinks';
@@ -16,6 +18,7 @@ import AllServicesGallery from './AllServicesGallery';
 import { ServiceTileProps } from '../FavoriteServices/ServiceTile';
 import QuickAccess from '../FavoriteServices/QuickAccess';
 import { AllServicesDropdownContext } from './common';
+import { hidePreviewBannerAtom } from '../../state/atoms/releaseAtom';
 
 export type AllServicesMenuProps = {
   setIsOpen: (isOpen: boolean) => void;
@@ -32,6 +35,7 @@ const AllServicesMenu = ({ setIsOpen, isOpen, menuRef, linkSections, favoritedSe
   const [activeTabKey, setActiveTabKey] = React.useState<string | number>(FAVORITE_TAB_ID);
   const [isExpanded, setIsExpanded] = React.useState<boolean>(false);
   const [selectedService, setSelectedService] = React.useState<AllServicesSection>(linkSections[0]);
+  const hideBanner = useAtomValue(hidePreviewBannerAtom);
 
   // Toggle currently active tab
   const handleTabClick = (event: React.MouseEvent<any> | React.KeyboardEvent | MouseEvent, tabIndex: string | number) => {
@@ -69,7 +73,9 @@ const AllServicesMenu = ({ setIsOpen, isOpen, menuRef, linkSections, favoritedSe
     >
       <div
         ref={menuRef}
-        className="pf-v5-u-w-100 chr-c-page__services-nav-dropdown-menu"
+        className={classNames('pf-v5-u-w-100 chr-c-page__services-nav-dropdown-menu', {
+          'preview-offset': !hideBanner,
+        })}
         data-testid="chr-c__find-app-service"
         onClick={handleClickOutside}
       >