From af508a895e81b3ab96d9e5449f052a806e9b4a7b Mon Sep 17 00:00:00 2001
From: Hamza El Aoutar <elaoutarhamza@gmail.com>
Date: Wed, 6 Apr 2022 10:12:06 +0000
Subject: [PATCH] Fixed User-settings page ToggleButtonGroup overlapping text

Signed-off-by: Hamza El Aoutar <elaoutarhamza@gmail.com>
---
 .changeset/fluffy-grapes-sort.md              |  5 +++
 .../General/UserSettingsThemeToggle.tsx       | 33 +++++++++++++------
 2 files changed, 28 insertions(+), 10 deletions(-)
 create mode 100644 .changeset/fluffy-grapes-sort.md

diff --git a/.changeset/fluffy-grapes-sort.md b/.changeset/fluffy-grapes-sort.md
new file mode 100644
index 0000000000..461d80275d
--- /dev/null
+++ b/.changeset/fluffy-grapes-sort.md
@@ -0,0 +1,5 @@
+---
+'@backstage/plugin-user-settings': patch
+---
+
+Dynamically layout User Settings theme toggle container
diff --git a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
index 333050f2a4..4a28a72818 100644
--- a/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsThemeToggle.tsx
@@ -50,24 +50,34 @@ type TooltipToggleButtonProps = {
 };
 
 const useStyles = makeStyles(theme => ({
+  container: {
+    display: 'flex',
+    flexWrap: 'wrap',
+    width: '100%',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+    paddingBottom: 8,
+    paddingRight: 16,
+  },
   list: {
+    width: 'initial',
     [theme.breakpoints.down('xs')]: {
+      width: '100%',
       padding: `0 0 12px`,
     },
   },
   listItemText: {
-    [theme.breakpoints.down('xs')]: {
-      paddingRight: 0,
-      paddingLeft: 0,
-    },
+    paddingRight: 0,
+    paddingLeft: 0,
   },
   listItemSecondaryAction: {
+    position: 'relative',
+    transform: 'unset',
+    top: 'auto',
+    right: 'auto',
+    paddingLeft: 16,
     [theme.breakpoints.down('xs')]: {
-      width: '100%',
-      top: 'auto',
-      right: 'auto',
-      position: 'relative',
-      transform: 'unset',
+      paddingLeft: 0,
     },
   },
 }));
@@ -109,7 +119,10 @@ export const UserSettingsThemeToggle = () => {
   };
 
   return (
-    <ListItem className={classes.list}>
+    <ListItem
+      className={classes.list}
+      classes={{ container: classes.container }}
+    >
       <ListItemText
         className={classes.listItemText}
         primary="Theme"