feat(webapp): move the profile name and email onto the row, behind an edit icon

The Full name and Email address rows put their current value in description text
under the label. It now sits as normal text on the right of the row, just left
of the action, so the label and the value read as one line and the rows match
the shape of the switch and select rows around them.

The action itself is now a square icon-only button carrying a pencil glyph
rather than the words Update and Edit. The small-icon variant is a fixed 34px
wide so a row of icon buttons with different glyph ratios lines up; here there
is only one, so it's overridden to a true square against its own height.

Inside the modals: the name dialog is titled Full name and its primary button
now says Update rather than Edit, and both dialogs drop the label above the
input, which only repeated the title a few pixels below it. The inputs carry an
aria-label instead so they still have an accessible name.

The new icon strokes in currentColor rather than white, so it follows the theme
and the button's hover state - a hard-coded white glyph would have all but
vanished on Light and White.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>

Author: samejr

apps/webapp/app/assets/icons/EditPencilIcon.tsx

@@ -0,0 +1,22 @@
+/** Pencil over a couple of text lines — editing a value in place. */
+export function EditPencilIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M18.7573 3.6275L20.3732 5.24335C21.1542 6.0244 21.1542 7.29073 20.3732 8.07178L9.72032 18.7246C9.57777 18.8671 9.3957 18.9631 9.19759 19.0002L4.03377 19.9669L5.00052 14.8031C5.03765 14.6051 5.1336 14.4229 5.27604 14.2804L15.9289 3.6275C16.71 2.84645 17.9763 2.84645 18.7573 3.6275Z"
+        stroke="currentColor"
+        strokeWidth="2"
+      />
+      <line x1="17.6464" y1="10.3536" x2="13.6464" y2="6.35355" stroke="currentColor" />
+      <path d="M13 21L21 21" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+      <path d="M18 17L21 17" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
+    </svg>
+  );
+}

apps/webapp/app/routes/account._index/route.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import { useFetcher, useLoaderData } from "@remix-run/react";
 import { type ActionFunction, json, type LoaderFunctionArgs } from "@remix-run/server-runtime";
 import { z } from "zod";
+import { EditPencilIcon } from "~/assets/icons/EditPencilIcon";
 import { UserProfilePhoto } from "~/components/UserProfilePhoto";
 import {
   MainHorizontallyCenteredContainer,
@@ -484,25 +485,33 @@ function EditNameButton() {
       }}
     >
       <DialogTrigger asChild>
-        <Button variant="secondary/small">Update</Button>
+        <Button
+          type="button"
+          variant="secondary/small-icon"
+          className="w-6 min-w-0 px-0"
+          LeadingIcon={<EditPencilIcon className="size-3.5" />}
+          aria-label="Edit your name"
+        />
       </DialogTrigger>
       {/* Mounted only while open so the field re-seeds from the stored name each
           time: a `defaultValue` on a field that stays mounted keeps whatever was
           typed and abandoned last time. */}
       {isOpen && (
         <DialogContent className="sm:max-w-md">
           <DialogHeader>
-            <DialogTitle>Edit your name</DialogTitle>
+            <DialogTitle>Full name</DialogTitle>
           </DialogHeader>
           <fetcher.Form method="post">
             <input type="hidden" name="action" value="update-name" />
             <div className="py-4">
+              {/* The dialog title already names the field, so the input carries an
+                  aria-label rather than a visible one that would repeat it. */}
               <InputGroup fullWidth>
-                <Label htmlFor="profile-name">Full name</Label>
                 <Input
                   id="profile-name"
                   name="name"
                   type="text"
+                  aria-label="Full name"
                   maxLength={MAX_NAME_LENGTH}
                   placeholder="Your full name"
                   defaultValue={user.name ?? ""}
@@ -517,7 +526,7 @@ function EditNameButton() {
                 Cancel
               </Button>
               <Button type="submit" variant="primary/medium" disabled={isSubmitting}>
-                {isSubmitting ? "Saving…" : "Edit"}
+                {isSubmitting ? "Saving…" : "Update"}
               </Button>
             </DialogFooter>
           </fetcher.Form>
@@ -552,7 +561,13 @@ function EditEmailButton({ isSsoManaged }: { isSsoManaged: boolean }) {
       }}
     >
       <DialogTrigger asChild>
-        <Button variant="secondary/small">Edit</Button>
+        <Button
+          type="button"
+          variant="secondary/small-icon"
+          className="w-6 min-w-0 px-0"
+          LeadingIcon={<EditPencilIcon className="size-3.5" />}
+          aria-label="Edit your email address"
+        />
       </DialogTrigger>
       {/* Mounted only while open, so the field re-seeds from the stored email */}
       {isOpen && (
@@ -570,12 +585,13 @@ function EditEmailButton({ isSsoManaged }: { isSsoManaged: boolean }) {
             <fetcher.Form method="post">
               <input type="hidden" name="action" value="update-email" />
               <div className="py-4">
+                {/* Labelled by the dialog title, as with the name field above. */}
                 <InputGroup fullWidth>
-                  <Label htmlFor="profile-email">Update your email address</Label>
                   <Input
                     id="profile-email"
                     name="email"
                     type="email"
+                    aria-label="Email address"
                     maxLength={MAX_EMAIL_LENGTH}
                     placeholder="Your email address"
                     defaultValue={user.email}
@@ -907,28 +923,24 @@ export default function Page() {
           </div>
           <div className="flex min-h-16 w-full items-center border-b border-grid-dimmed">
             <div className="flex w-full items-center justify-between gap-4">
-              <div className={cn("flex-1", SETTINGS_ROW_TITLE_GAP)}>
-                <Label>Full name</Label>
-                <SettingsRowDescription className="break-words">
+              <Label>Full name</Label>
+              <div className="flex min-w-0 items-center gap-3">
+                <Paragraph variant="small" className="min-w-0 break-words text-right">
                   {user.name ?? "Not set"}
-                </SettingsRowDescription>
-              </div>
-              <div className="flex flex-none items-center">
+                </Paragraph>
                 <EditNameButton />
               </div>
             </div>
           </div>
           <div className="flex min-h-16 w-full items-center border-b border-grid-dimmed">
             <div className="flex w-full items-center justify-between gap-4">
-              <div className={cn("flex-1", SETTINGS_ROW_TITLE_GAP)}>
-                <Label>Email address</Label>
-                {/* break-words: an address has no spaces to wrap at, so a long
-                    one would otherwise run under the button */}
-                <SettingsRowDescription className="break-words">
+              <Label>Email address</Label>
+              <div className="flex min-w-0 items-center gap-3">
+                {/* break-all: an address has no spaces to wrap at, so a long one
+                    would otherwise push the button off the row */}
+                <Paragraph variant="small" className="min-w-0 break-all text-right">
                   {user.email}
-                </SettingsRowDescription>
-              </div>
-              <div className="flex flex-none items-center">
+                </Paragraph>
                 <EditEmailButton isSsoManaged={isSsoManaged} />
               </div>
             </div>