fix: improved readability

app/login/components/profile-content-tabs.tsx

@@ -1,6 +1,6 @@
 import { t } from "@lingui/macro";
 import { TabContext, TabList, TabPanel } from "@mui/lab";
-import { Box, Tab, Theme, useTheme } from "@mui/material";
+import { Box, Tab, Theme } from "@mui/material";
 import { makeStyles } from "@mui/styles";
 import clsx from "clsx";
 import groupBy from "lodash/groupBy";
@@ -12,6 +12,11 @@ import { useRootStyles } from "@/login/utils";
 import useEvent from "@/utils/use-event";
 
 const useStyles = makeStyles<Theme>((theme) => ({
+  section: {
+    borderBottom: 1,
+    borderColor: "divider",
+    marginTop: theme.spacing(6),
+  },
   tabList: {
     minHeight: "fit-content",
 
@@ -46,7 +51,7 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
   const handleChange = useEvent((_: React.SyntheticEvent, v: string) => {
     setValue(v);
   });
-  const theme = useTheme();
+
   const rootClasses = useRootStyles();
   const classes = useStyles();
 
@@ -66,13 +71,7 @@ export const ProfileContentTabs = (props: ProfileContentTabsProps) => {
     <TabContext value={value}>
       <Box className={clsx(rootClasses.section)}>
         <Box className={rootClasses.sectionContent}>
-          <Box
-            sx={{
-              borderBottom: 1,
-              borderColor: "divider",
-              marginTop: theme.spacing(6),
-            }}
-          >
+          <Box className={classes.section}>
             <TabList className={classes.tabList} onChange={handleChange}>
               <Tab
                 className={classes.tab}

app/login/utils.ts

@@ -28,6 +28,7 @@ export const useRootStyles = makeStyles<Theme>((theme) => ({
     margin: "0 auto",
   },
   noTooltip: {
+    // Disable native tooltip in Safari
     "&::after": {
       content: "''",
       display: "block",