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

[debsmita1]

Hey, I just made a Pull Request!

Resolves:
https://redhat.atlassian.net/browse/RHDHBUGS-2701

Screen.Recording.2026-03-27.at.7.12.40.PM.mov

✔️ Checklist

• A changeset describing the change and affected packages. (more info)
• Added or Updated documentation
• Tests for new functionality and regression tests for bug fixes
• Screenshots attached (for UI changes)

[rhdh-gh-app]

Changed Packages

Package Name	Package Path	Changeset Bump	Current Version
@red-hat-developer-hub/backstage-plugin-lightspeed	workspaces/lightspeed/plugins/lightspeed	patch	v1.4.0

[rhdh-qodo-merge]

Review Summary by Qodo

Fix overlay positioning when ApplicationDrawer is docked

🐞 Bug fix

Walkthroughs

Description

• Fix overlay mode positioning underneath ApplicationDrawer
• Add DOCKED_CONTENT_OFFSET constant for consistent drawer offset
• Update chatbot modal and FAB styles with proper margin adjustments
• Add smooth transition animation when drawer state changes

Diagram

flowchart LR
  A["DOCKED_CONTENT_OFFSET constant"] -- "used by" --> B["LightspeedDrawerProvider"]
  A -- "used by" --> C["LightspeedFAB"]
  B -- "applies marginRight" --> D["chatbotModal styles"]
  C -- "applies marginRight" --> E["fab-button styles"]
  D -- "with transition" --> F["Smooth overlay positioning"]
  E -- "with transition" --> F

Loading

File Changes

1. workspaces/lightspeed/plugins/lightspeed/src/const.ts ✨ Enhancement +4/-0

Add docked drawer offset constant

• Added DOCKED_CONTENT_OFFSET constant that calculates drawer offset
• Constant matches app shell margin when ApplicationDrawer is docked
• Value is calc(var(--docked-drawer-width, 500px) + 1.5em)

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

---

2. workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedDrawerProvider.tsx 🐞 Bug fix +5/-0

Update chatbot modal positioning with drawer offset

• Import DOCKED_CONTENT_OFFSET from const module
• Add transition animation for margin-right property
• Apply marginRight offset when drawer is docked via body.docked-drawer-open selector
• Changed selector from .docked-drawer-open to body.docked-drawer-open for proper scoping

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

---

3. workspaces/lightspeed/plugins/lightspeed/src/components/LightspeedFAB.tsx 🐞 Bug fix +4/-3

Update FAB positioning with drawer offset constant

• Import DOCKED_CONTENT_OFFSET from const module
• Update selector from .docked-drawer-open to body.docked-drawer-open
• Replace hardcoded margin value with DOCKED_CONTENT_OFFSET constant
• Update comment to clarify ApplicationDrawer docking behavior

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

---

View more (1)

4. workspaces/lightspeed/.changeset/sharp-spies-kick.md 📝 Documentation +5/-0

Add changeset for overlay positioning fix

• Add changeset file for patch version bump
• Document fix for overlay mode positioning issue
• Affects @red-hat-developer-hub/backstage-plugin-lightspeed package

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

---

[rhdh-qodo-merge]

Code Review by Qodo

🐞 Bugs (0) 📘 Rule violations (0) 📎 Requirement gaps (0) 📐 Spec deviations (0)

Great, no issues found!

Qodo reviewed your code and found no material issues that require review

ⓘ The new review experience is currently in Beta. Learn more

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud