feat(webapp): align org and account side menu padding with the main side menu

Match the organization settings and account side menus' horizontal padding
(pl-2.5, pr-0, stable scrollbar gutter) to the main side menu. Add a
nameClassName prop to SideMenuItem and tighten the "Personal Access Tokens"
label's tracking so it no longer truncates.

Author: samejr

.server-changes/side-menu-project-and-org-menus.md

@@ -24,6 +24,9 @@ Refresh the side menu and account UI:
 - Signal impersonation mode with a yellow side-menu border and a matching
   "Stop impersonating" accent.
 - Move the Settings item to the top of the organization settings side menu.
+- Align the organization settings and account side menus' horizontal padding
+  with the main side menu, and tighten the "Personal Access Tokens" label so it
+  no longer truncates.
 
 The org loader now exposes whether the RBAC and SSO plugins are installed so the
 side menu can gate the Roles and SSO items the same way the settings side menu

apps/webapp/app/components/navigation/AccountSideMenu.tsx

@@ -34,7 +34,7 @@ export function AccountSideMenu({ user }: { user: User }) {
           <span className="text-text-bright">Back to app</span>
         </LinkButton>
       </div>
-      <div className="mb-6 flex grow flex-col overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="mb-6 flex grow flex-col overflow-y-auto pl-2.5 pr-0 pt-2 scrollbar-gutter-stable scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <SideMenuHeader title="Account" />
         <SideMenuItem
           name="Profile"
@@ -45,6 +45,7 @@ export function AccountSideMenu({ user }: { user: User }) {
         />
         <SideMenuItem
           name="Personal Access Tokens"
+          nameClassName="tracking-[-0.04em]"
           icon={ShieldIcon}
           activeIconColor="text-text-bright"
           to={personalAccessTokensPath()}

apps/webapp/app/components/navigation/OrganizationSettingsSideMenu.tsx

@@ -80,7 +80,7 @@ export function OrganizationSettingsSideMenu({
           <span className="text-text-bright">Back to app</span>
         </LinkButton>
       </div>
-      <div className="mb-6 flex grow flex-col gap-4 overflow-y-auto px-1 pt-2 scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
+      <div className="mb-6 flex grow flex-col gap-4 overflow-y-auto pl-2.5 pr-0 pt-2 scrollbar-gutter-stable scrollbar-thin scrollbar-track-transparent scrollbar-thumb-charcoal-600">
         <div className="flex flex-col">
           <div className="mb-1">
             <SideMenuHeader title="Organization" />

apps/webapp/app/components/navigation/SideMenuItem.tsx

@@ -14,6 +14,7 @@ export function SideMenuItem({
   trailingIcon,
   trailingIconClassName,
   name,
+  nameClassName,
   to,
   badge,
   target,
@@ -30,6 +31,7 @@ export function SideMenuItem({
   trailingIcon?: RenderIcon;
   trailingIconClassName?: string;
   name: string;
+  nameClassName?: string;
   to: string;
   badge?: ReactNode;
   target?: AnchorHTMLAttributes<HTMLAnchorElement>["target"];
@@ -83,7 +85,12 @@ export function SideMenuItem({
         }}
         transition={{ duration: 0.2, ease: "easeOut" }}
       >
-        <span className="select-none truncate text-[0.90625rem] font-medium tracking-[-0.01em]">
+        <span
+          className={cn(
+            "select-none truncate text-[0.90625rem] font-medium tracking-[-0.01em]",
+            nameClassName
+          )}
+        >
           {name}
         </span>
         {badge && !isCollapsed && (