I'm Julian, and you're watching How To Optimize Information Badly 101

src/app/me/AboutMe.module.css

@@ -40,6 +40,8 @@
   border-radius: 0.15rem;
   cursor: pointer;
   padding: 0.5em 1em;
+
+  width: 100%;
 }
 
 .authProviderList {
@@ -78,3 +80,17 @@
   transition: all 3s linear !important;
   background-position: left bottom !important;
 }
+
+.multiButtons {
+  margin: 1rem 0;
+  white-space: nowrap;
+  display: flex;
+  justify-content: space-between;
+}
+
+.spacer {
+  border: 0;
+  border-bottom: 1px solid var(--fg-darker);
+  width: 100%;
+  margin: 1rem 0;
+}

src/app/me/AboutMe.tsx

@@ -16,7 +16,6 @@ import {
 import PrettyForm from "@/components/PrettyForm";
 import Toast from "@/components/Toast";
 import { AuthProviderState } from "@/auth/AuthProvider";
-import inputStyles from "@/components/Input.module.css";
 import Connection from "@/components/Connection";
 import DiscordIcon from "@/components/icons/DiscordIcon";
 import GitHubIcon from "@/components/icons/GitHubIcon";
@@ -169,7 +168,6 @@ export default function AboutMe({
                       label="Display name"
                       defaultValue={info.displayName}
                     />
-
                     <Input
                       type="email"
                       name="email"
@@ -177,11 +175,18 @@ export default function AboutMe({
                       defaultValue={info.email}
                     />
 
-                    <div className={inputStyles.formRow}>
+                    <hr className={styles.spacer} />
-                      <button type="button">Change Password</button>
+
-                    </div>
+                    <input
+                      type="submit"
+                      value="Save"
+                      className={styles.fancyInput}
+                      disabled={isSubmitting}
+                    />
+
+                    <div className={styles.multiButtons}>
+                      <button type="button">Change Password</button>
 
-                    <div className={inputStyles.formRow}>
                       <button
                         type="button"
                         onClick={async () => {
@@ -195,13 +200,6 @@ export default function AboutMe({
                         Log out
                       </button>
                     </div>
-
-                    <input
-                      type="submit"
-                      value="Save"
-                      className={styles.fancyInput}
-                      disabled={isSubmitting}
-                    />
                   </div>
 
                   <div className={styles.connections}>