From ab94b6e1dcdfb195fa5add70ca9fb567614e6fb2 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Fri, 17 Sep 2021 12:23:01 +0200
Subject: [PATCH] align grid height

Signed-off-by: Samira Mokaram <samiram@spotify.com>
---
 .../General/UserSettingsAppearanceCard.tsx    | 27 ++++++++++++-------
 .../General/UserSettingsGeneral.tsx           | 15 ++++++++---
 .../General/UserSettingsProfileCard.tsx       | 11 ++++++--
 3 files changed, 38 insertions(+), 15 deletions(-)

diff --git a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
index 982911821b..6d68c5dfed 100644
--- a/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsAppearanceCard.tsx
@@ -14,16 +14,25 @@
  * limitations under the License.
  */
 import React from 'react';
-import { List } from '@material-ui/core';
+import { List, makeStyles } from '@material-ui/core';
 import { InfoCard } from '@backstage/core-components';
 import { UserSettingsPinToggle } from './UserSettingsPinToggle';
 import { UserSettingsThemeToggle } from './UserSettingsThemeToggle';
 
-export const UserSettingsAppearanceCard = () => (
-  <InfoCard title="Appearance">
-    <List dense>
-      <UserSettingsThemeToggle />
-      <UserSettingsPinToggle />
-    </List>
-  </InfoCard>
-);
+const useStyles = makeStyles({
+  fullWidth: {
+    width: '100%',
+  },
+});
+
+export const UserSettingsAppearanceCard = () => {
+  const classes = useStyles();
+  return (
+    <InfoCard title="Appearance" className={classes.fullWidth}>
+      <List dense>
+        <UserSettingsThemeToggle />
+        <UserSettingsPinToggle />
+      </List>
+    </InfoCard>
+  );
+};
diff --git a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
index bd08fef565..aad80ebb3b 100644
--- a/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsGeneral.tsx
@@ -13,18 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Grid } from '@material-ui/core';
+import { Grid, makeStyles } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsProfileCard } from './UserSettingsProfileCard';
 import { UserSettingsAppearanceCard } from './UserSettingsAppearanceCard';
 
+const useStyles = makeStyles({
+  flex: {
+    display: 'flex',
+  },
+});
+
 export const UserSettingsGeneral = () => {
+  const classes = useStyles();
   return (
-    <Grid container direction="row" spacing={3}>
-      <Grid item sm={12} md={6}>
+    <Grid container direction="row" spacing={3} alignItems="stretch">
+      <Grid item sm={12} md={6} className={classes.flex}>
         <UserSettingsProfileCard />
       </Grid>
-      <Grid item sm={12} md={6}>
+      <Grid item sm={12} md={6} className={classes.flex}>
         <UserSettingsAppearanceCard />
       </Grid>
     </Grid>
diff --git a/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
index f79b1084c5..e7910d178d 100644
--- a/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
+++ b/plugins/user-settings/src/components/General/UserSettingsProfileCard.tsx
@@ -13,18 +13,25 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-import { Grid, Typography } from '@material-ui/core';
+import { Grid, makeStyles, Typography } from '@material-ui/core';
 import React from 'react';
 import { UserSettingsSignInAvatar } from './UserSettingsSignInAvatar';
 import { UserSettingsMenu } from './UserSettingsMenu';
 import { useUserProfile } from '../useUserProfileInfo';
 import { InfoCard } from '@backstage/core-components';
 
+const useStyles = makeStyles({
+  fullWidth: {
+    width: '100%',
+  },
+});
+
 export const UserSettingsProfileCard = () => {
   const { profile, displayName } = useUserProfile();
+  const classes = useStyles();
 
   return (
-    <InfoCard title="Profile">
+    <InfoCard title="Profile" className={classes.fullWidth}>
       <Grid container spacing={6}>
         <Grid item>
           <UserSettingsSignInAvatar size={96} />