From fabee41accb15db561051313d8fcce222d3d2c57 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Thu, 11 Sep 2025 14:15:25 -0400
Subject: [PATCH 1/2] potential-theme-selector-fix

---
 .../components/themeSelector/themeSelector.js            | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js
index dd0738cc01..555ca37f6d 100644
--- a/packages/documentation-framework/components/themeSelector/themeSelector.js
+++ b/packages/documentation-framework/components/themeSelector/themeSelector.js
@@ -69,6 +69,7 @@ export const ThemeSelector = ({ id }) => {
         return 'Light';
       case colorModes.DARK:
         return 'Dark';
+      case colorModes.SYSTEM:
       default:
         return 'System';
     }
@@ -80,6 +81,7 @@ export const ThemeSelector = ({ id }) => {
         return SunIcon;
       case colorModes.DARK:
         return MoonIcon;
+      case colorModes.SYSTEM:
       default:
         return DesktopIcon;
     }
@@ -89,7 +91,7 @@ export const ThemeSelector = ({ id }) => {
     <Select
       id={id}
       isOpen={isThemeSelectOpen}
-      selected={themeMode}
+      selected={themeMode || colorModes.SYSTEM}
       onSelect={handleThemeChange}
       onOpenChange={(isOpen) => setIsThemeSelectOpen(isOpen)}
       toggle={(toggleRef) => (
@@ -103,6 +105,11 @@ export const ThemeSelector = ({ id }) => {
       )}
       shouldFocusToggleOnSelect
       onOpenChangeKeys={['Escape']}
+      popperProps={{ 
+        position: 'right',
+        enableFlip: true,
+        preventOverflow: true
+      }}
     >
       <SelectGroup>
         <SelectList aria-label="Light/Dark theme switcher">

From 1d9ee630e7d502c50c522283e5195e72bea97c52 Mon Sep 17 00:00:00 2001
From: Sarah Rambacher <srambach@redhat.com>
Date: Tue, 16 Sep 2025 16:22:50 -0400
Subject: [PATCH 2/2] fix(theme-selector): prevent overflow of the menu

---
 .../components/themeSelector/themeSelector.js                 | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/documentation-framework/components/themeSelector/themeSelector.js b/packages/documentation-framework/components/themeSelector/themeSelector.js
index 555ca37f6d..39f9166922 100644
--- a/packages/documentation-framework/components/themeSelector/themeSelector.js
+++ b/packages/documentation-framework/components/themeSelector/themeSelector.js
@@ -69,7 +69,6 @@ export const ThemeSelector = ({ id }) => {
         return 'Light';
       case colorModes.DARK:
         return 'Dark';
-      case colorModes.SYSTEM:
       default:
         return 'System';
     }
@@ -81,7 +80,6 @@ export const ThemeSelector = ({ id }) => {
         return SunIcon;
       case colorModes.DARK:
         return MoonIcon;
-      case colorModes.SYSTEM:
       default:
         return DesktopIcon;
     }
@@ -91,7 +89,7 @@ export const ThemeSelector = ({ id }) => {
     <Select
       id={id}
       isOpen={isThemeSelectOpen}
-      selected={themeMode || colorModes.SYSTEM}
+      selected={themeMode}
       onSelect={handleThemeChange}
       onOpenChange={(isOpen) => setIsThemeSelectOpen(isOpen)}
       toggle={(toggleRef) => (