align grid height

Signed-off-by: Samira Mokaram <samiram@spotify.com>

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>
+  );
+};

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>

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} />