fixed AliasesPreferencesForm.tsx

src/route-widgets/AuthenticateRoute/NavigationButton.tsx

@@ -1,6 +1,7 @@
 import {ReactElement} from "react"
 import {BiStats} from "react-icons/bi"
-import {MdMail, MdSettings} from "react-icons/md"
+import {MdSettings} from "react-icons/md"
+import {FaMask} from "react-icons/fa"
 import {Link as RouterLink, useLocation} from "react-router-dom"
 
 import {Button} from "@mui/material"
@@ -20,7 +21,7 @@ export interface NavigationButtonProps {
 
 const SECTION_ICON_MAP: Record<NavigationSection, ReactElement> = {
 	[NavigationSection.Overview]: <BiStats />,
-	[NavigationSection.Aliases]: <MdMail />,
+	[NavigationSection.Aliases]: <FaMask />,
 	[NavigationSection.Reports]: <Icon path={mdiTextBoxMultiple} size={0.8} />,
 	[NavigationSection.Settings]: <MdSettings />,
 }

src/route-widgets/SettingsRoute/AliasesPreferencesForm.tsx

@@ -7,6 +7,7 @@ import React, {ReactElement, useContext} from "react"
 import {useMutation} from "@tanstack/react-query"
 import {
 	Checkbox,
+	Collapse,
 	FormControlLabel,
 	FormGroup,
 	FormHelperText,
@@ -15,6 +16,8 @@ import {
 	MenuItem,
 	TextField,
 	Typography,
+	useMediaQuery,
+	useTheme,
 } from "@mui/material"
 import {LoadingButton} from "@mui/lab"
 
@@ -113,6 +116,8 @@ export default function AliasesPreferencesForm(): ReactElement {
 			}
 		},
 	})
+	const theme = useTheme()
+	const isLarge = useMediaQuery(theme.breakpoints.up("md"))
 
 	return (
 		<>
@@ -133,12 +138,12 @@ export default function AliasesPreferencesForm(): ReactElement {
 					<form onSubmit={formik.handleSubmit}>
 						<Grid
 							display="flex"
-							flexDirection="column"
+							flexDirection="row"
 							container
 							spacing={4}
 							alignItems="flex-end"
 						>
-							<Grid item>
+							<Grid item md={6}>
 								<FormGroup>
 									<FormControlLabel
 										disabled={formik.isSubmitting}
@@ -168,7 +173,7 @@ export default function AliasesPreferencesForm(): ReactElement {
 									</FormHelperText>
 								</FormGroup>
 							</Grid>
-							<Grid item>
+							<Grid item md={6}>
 								<FormGroup>
 									<FormControlLabel
 										disabled={formik.isSubmitting}
@@ -199,7 +204,7 @@ export default function AliasesPreferencesForm(): ReactElement {
 									</FormHelperText>
 								</FormGroup>
 							</Grid>
-							<Grid item>
+							<Grid item xs={12}>
 								<FormGroup>
 									<FormControlLabel
 										disabled={formik.isSubmitting}
@@ -228,8 +233,20 @@ export default function AliasesPreferencesForm(): ReactElement {
 											"Proxies images in your emails through this KleckRelay instance. This adds an extra layer of privacy. Images are loaded immediately after we receive the email. They then will be stored for some time (cache time). During that time, the image will be served from us. This means the original server has no idea you have opened the mail. After the cache time, the image is loaded from the original server, but it gets proxied by us. This means the original server will not be able to access neither your IP address nor your user agent."}
 									</FormHelperText>
 								</FormGroup>
-							</Grid>
+								<Collapse in={formik.values.proxyImages}>
-							<Grid item>
+									<Grid
+										display="flex"
+										flexDirection={
+											isLarge ? "row" : "column"
+										}
+										container
+										marginY={2}
+										spacing={4}
+										alignItems={
+											isLarge ? "flex-start" : "flex-end"
+										}
+									>
+										<Grid item md={6}>
 											<FormGroup>
 												<TextField
 													fullWidth
@@ -244,24 +261,38 @@ export default function AliasesPreferencesForm(): ReactElement {
 													name="imageProxyFormat"
 													id="imageProxyFormat"
 													label="Image File Type"
-										value={formik.values.imageProxyFormat}
+													value={
-										onChange={formik.handleChange}
+														formik.values
-										disabled={formik.isSubmitting}
+															.imageProxyFormat
+													}
+													onChange={
+														formik.handleChange
+													}
+													disabled={
+														formik.isSubmitting
+													}
 													error={
-											formik.touched.imageProxyFormat &&
+														formik.touched
+															.imageProxyFormat &&
 														Boolean(
-												formik.errors.imageProxyFormat,
+															formik.errors
+																.imageProxyFormat,
 														)
 													}
 													helperText={
-											formik.touched.imageProxyFormat &&
+														formik.touched
-											formik.errors.imageProxyFormat
+															.imageProxyFormat &&
+														formik.errors
+															.imageProxyFormat
 													}
 												>
 													{Object.entries(
 														ImageProxyFormatType,
 													).map(([key, value]) => (
-											<MenuItem key={key} value={value}>
+														<MenuItem
+															key={key}
+															value={value}
+														>
 															{
 																IMAGE_PROXY_FORMAT_TYPE_NAME_MAP[
 																	value
@@ -272,16 +303,20 @@ export default function AliasesPreferencesForm(): ReactElement {
 												</TextField>
 												<FormHelperText
 													error={Boolean(
-											formik.touched.imageProxyFormat &&
+														formik.touched
-												formik.errors.imageProxyFormat,
+															.imageProxyFormat &&
+															formik.errors
+																.imageProxyFormat,
 													)}
 												>
-										{formik.touched.imageProxyFormat &&
+													{formik.touched
-											formik.errors.imageProxyFormat}
+														.imageProxyFormat &&
+														formik.errors
+															.imageProxyFormat}
 												</FormHelperText>
 											</FormGroup>
 										</Grid>
-							<Grid item>
+										<Grid item md={6}>
 											<FormGroup>
 												<TextField
 													fullWidth
@@ -290,10 +325,15 @@ export default function AliasesPreferencesForm(): ReactElement {
 													id="imageProxyUserAgent"
 													label="Image Proxy User Agent"
 													value={
-											formik.values.imageProxyUserAgent
+														formik.values
+															.imageProxyUserAgent
+													}
+													onChange={
+														formik.handleChange
+													}
+													disabled={
+														formik.isSubmitting
 													}
-										onChange={formik.handleChange}
-										disabled={formik.isSubmitting}
 													error={
 														formik.touched
 															.imageProxyUserAgent &&
@@ -305,11 +345,13 @@ export default function AliasesPreferencesForm(): ReactElement {
 													helperText={
 														formik.touched
 															.imageProxyUserAgent &&
-											formik.errors.imageProxyUserAgent
+														formik.errors
+															.imageProxyUserAgent
 													}
 												>
-										{Object.entries(ProxyUserAgentType).map(
+													{Object.entries(
-											([key, value]) => (
+														ProxyUserAgentType,
+													).map(([key, value]) => (
 														<MenuItem
 															key={key}
 															value={value}
@@ -320,8 +362,7 @@ export default function AliasesPreferencesForm(): ReactElement {
 																] as string
 															}
 														</MenuItem>
-											),
+													))}
-										)}
 												</TextField>
 												<FormHelperText
 													error={Boolean(
@@ -331,13 +372,17 @@ export default function AliasesPreferencesForm(): ReactElement {
 																.imageProxyUserAgent,
 													)}
 												>
-										{(formik.touched.imageProxyUserAgent &&
+													{(formik.touched
+														.imageProxyUserAgent &&
 														formik.errors
 															.imageProxyUserAgent) ||
 														"An User Agent is a identifier each browser and email client sends when retrieving files, such as images. You can specify here what user agent you would like to be used by the proxy. User Agents are kept up-to-date."}
 												</FormHelperText>
 											</FormGroup>
 										</Grid>
+									</Grid>
+								</Collapse>
+							</Grid>
 							<Grid item>
 								<LoadingButton
 									loading={formik.isSubmitting}

src/routes/AuthenticatedRoute.tsx

@@ -42,10 +42,10 @@ export default function AuthenticatedRoute(): ReactElement {
 				>
 					<Grid
 						container
-						justifyContent="center"
+						justifyContent="space-between"
-						alignItems="flex-start"
+						alignItems="center"
 					>
-						<Grid item xs={12} sm={4}>
+						<Grid item xs={12} sm={4} lg={2}>
 							<Box
 								bgcolor={theme.palette.background.paper}
 								component="nav"
@@ -61,11 +61,11 @@ export default function AuthenticatedRoute(): ReactElement {
 								</List>
 							</Box>
 						</Grid>
-						<Grid item xs={12} sm={8}>
+						<Grid item xs={12} sm={8} lg={10}>
 							<Paper>
 								<Box
 									padding={4}
-									maxHeight="80vh"
+									maxHeight="60vh"
 									overflow="scroll"
 								>
 									<Outlet />