From 9b3b5befb21fc6962f6c1725b902754101c14683 Mon Sep 17 00:00:00 2001
From: Rebecca Alpert <ralpert@redhat.com>
Date: Mon, 15 Sep 2025 17:01:18 -0400
Subject: [PATCH] fix(ThemeSelector): Adjust popperProps

Prevent theme selector from overflowing container.
---
 .../components/themeSelector/themeSelector.js | 60 ++++++++++---------
 1 file changed, 31 insertions(+), 29 deletions(-)

diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js
index dd0738cc01..555fcd8440 100644
--- a/packages/documentation-framework/components/themeSelector/themeSelector.js
+++ b/packages/documentation-framework/components/themeSelector/themeSelector.js
@@ -103,6 +103,7 @@ export const ThemeSelector = ({ id }) => {
       )}
       shouldFocusToggleOnSelect
       onOpenChangeKeys={['Escape']}
+      popperProps={{ position: 'right', preventOverflow: true, enableFlip: true }}
     >
       <SelectGroup>
         <SelectList aria-label="Light/Dark theme switcher">
@@ -117,35 +118,36 @@ export const ThemeSelector = ({ id }) => {
           </SelectOption>
         </SelectList>
       </SelectGroup>
-      {process.env.hasHighContrastSwitcher && (<>
-      <Divider />
-      <SelectGroup label="High Contrast">
-        <MenuSearch>
-          <MenuSearchInput>
-            <ToggleGroup aria-label="High contrast theme switcher">
-              <ToggleGroupItem
-                text="System"
-                buttonId={highContrastModes.SYSTEM}
-                isSelected={highContrastMode === highContrastModes.SYSTEM}
-                onChange={handleHighContrastThemeSelection}
-              />
-              <ToggleGroupItem
-                text="On"
-                buttonId={highContrastModes.ON}
-                isSelected={highContrastMode === highContrastModes.ON}
-                onChange={handleHighContrastThemeSelection}
-              />
-              <ToggleGroupItem
-                text="Off"
-                buttonId={highContrastModes.OFF}
-                isSelected={highContrastMode === highContrastModes.OFF}
-                onChange={handleHighContrastThemeSelection}
-              />
-            </ToggleGroup>
-          </MenuSearchInput>
-        </MenuSearch>
-      </SelectGroup>
-      </>
+      {process.env.hasHighContrastSwitcher && (
+        <>
+          <Divider />
+          <SelectGroup label="High Contrast">
+            <MenuSearch>
+              <MenuSearchInput>
+                <ToggleGroup aria-label="High contrast theme switcher">
+                  <ToggleGroupItem
+                    text="System"
+                    buttonId={highContrastModes.SYSTEM}
+                    isSelected={highContrastMode === highContrastModes.SYSTEM}
+                    onChange={handleHighContrastThemeSelection}
+                  />
+                  <ToggleGroupItem
+                    text="On"
+                    buttonId={highContrastModes.ON}
+                    isSelected={highContrastMode === highContrastModes.ON}
+                    onChange={handleHighContrastThemeSelection}
+                  />
+                  <ToggleGroupItem
+                    text="Off"
+                    buttonId={highContrastModes.OFF}
+                    isSelected={highContrastMode === highContrastModes.OFF}
+                    onChange={handleHighContrastThemeSelection}
+                  />
+                </ToggleGroup>
+              </MenuSearchInput>
+            </MenuSearch>
+          </SelectGroup>
+        </>
       )}
     </Select>
   );