fix(lightspeed): fix the overlay mode opening underneath the ApplicationDrawer (#2632)

Author: debsmita1

workspaces/lightspeed/.changeset/sharp-spies-kick.md

@@ -0,0 +1,5 @@
+---
+'@red-hat-developer-hub/backstage-plugin-lightspeed': patch
+---
+
+fix the overlay mode opening underneath the ApplicationDrawer

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedDrawerProvider.tsx

@@ -27,6 +27,7 @@ import { useLocation, useMatch, useNavigate } from 'react-router-dom';
 import { makeStyles } from '@mui/styles';
 import { ChatbotDisplayMode, ChatbotModal } from '@patternfly/chatbot';
 
+import { DOCKED_CONTENT_OFFSET } from '../const';
 import { useBackstageUserIdentity, useDisplayModeSettings } from '../hooks';
 import { FileContent } from '../types';
 import { LightspeedChatContainer } from './LightspeedChatContainer';
@@ -40,6 +41,10 @@ const useStyles = makeStyles(theme => ({
     right: `calc(${theme?.spacing?.(2) ?? '16px'} + 1.5em)`,
     maxWidth: 'min(30rem, calc(100vw - 32px)) !important',
     overflowX: 'hidden' as const,
+    transition: 'margin-right 0.3s ease',
+    'body.docked-drawer-open &': {
+      marginRight: DOCKED_CONTENT_OFFSET,
+    },
   },
 }));
 

workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedFAB.tsx

@@ -20,6 +20,7 @@ import Tooltip from '@mui/material/Tooltip';
 import { makeStyles } from '@mui/styles';
 import { ChatbotDisplayMode } from '@patternfly/chatbot';
 
+import { DOCKED_CONTENT_OFFSET } from '../const';
 import { useLightspeedDrawerContext } from '../hooks/useLightspeedDrawerContext';
 import { LightspeedFABIcon } from './LightspeedIcon';
 
@@ -41,10 +42,10 @@ const useStyles = makeStyles(theme => ({
     display: 'flex',
     position: 'fixed',
 
-    // When drawer is docked, adjust margin
-    '.docked-drawer-open &': {
+    // When ApplicationDrawer is docked, match main content inset
+    'body.docked-drawer-open &': {
       transition: 'margin-right 0.3s ease',
-      marginRight: 'var(--docked-drawer-width, 500px) ',
+      marginRight: DOCKED_CONTENT_OFFSET,
     },
   },
 }));

workspaces/lightspeed/plugins/lightspeed/src/const.ts

@@ -70,3 +70,7 @@ export const RHDH_SAMPLE_PROMPTS: SamplePrompts = [
 export const VALID_TOPIC_RESTRICTION_PROVIDER_IDS = [
   'lightspeed_question_validity-shield',
 ];
+
+// Matches app shell margin on main when ApplicationDrawer is docked (e.g. Root.tsx).
+export const DOCKED_CONTENT_OFFSET =
+  'calc(var(--docked-drawer-width, 500px) + 1.5em)';