Make chips look better

web/src/components/Account.jsx

@@ -2,6 +2,7 @@ import * as React from "react";
 import { useContext, useState } from "react";
 import {
   Alert,
+  Box,
   CardActions,
   CardContent,
   Chip,
@@ -463,6 +464,7 @@ const Emails = () => {
   return (
     <Pref labelId={labelId} alignTop title={t("account_basics_emails_title")} description={t("account_basics_emails_description")}>
       <div aria-labelledby={labelId}>
+        <Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 0.75 }}>
           {verifiedEmails.map((email) => (
             <Chip
               key={email.address}
@@ -500,6 +502,7 @@ const Emails = () => {
           <IconButton onClick={handleDialogOpen} aria-label={t("account_basics_emails_dialog_title")}>
             <AddIcon />
           </IconButton>
+        </Box>
         {showNoEmailWarning && (
           <Alert severity="warning" sx={{ mt: 1 }}>
             {t("account_basics_emails_no_recovery_warning")}
@@ -680,6 +683,7 @@ const PhoneNumbers = () => {
   return (
     <Pref labelId={labelId} title={t("account_basics_phone_numbers_title")} description={t("account_basics_phone_numbers_description")}>
       <div aria-labelledby={labelId}>
+        <Box sx={{ display: "flex", flexWrap: "wrap", alignItems: "center", gap: 0.75 }}>
           {account?.phone_numbers?.map((phoneNumber) => (
             <Chip
               label={
@@ -696,6 +700,7 @@ const PhoneNumbers = () => {
           <IconButton onClick={handleDialogOpen}>
             <AddIcon />
           </IconButton>
+        </Box>
       </div>
       <AddPhoneNumberDialog key={`addPhoneNumberDialog${dialogKey}`} open={dialogOpen} onClose={handleDialogClose} />
       <Portal>