@seams/wallet 0.10.2 → 0.12.0

package/dist/esm/react/components/AccountMenuButton/LinkedDevicesModal.css

@@ -26,13 +26,15 @@
   );
   display: flex;
   flex-direction: column;
-  width: min(640px, 100%);
+  /* One width for every account-menu dialog: their rows are short, and a
+     narrow card keeps each row readable at a glance. */
+  width: min(420px, 100%);
   max-width: 100%;
   min-width: 0;
   max-height: calc(100vh - 24px);
   max-height: calc(100dvh - 24px);
   overflow: hidden;
-  padding: 1.5rem;
+  padding: 0;
   color: var(--seams-colors-textPrimary);
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   font-size: 0.875rem;
@@ -48,40 +50,69 @@
   outline: none;
 }
 
+/* Modal chrome: the page's host above the content, "Powered by seams" below. */
+.seams-account-menu-dialog-header,
+.seams-account-menu-dialog-footer {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: 0.4375rem;
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.75rem;
+  line-height: 1.5;
+}
+.seams-account-menu-dialog-header {
+  padding: 0 0.375rem 0 1.375rem;
+  border-bottom: 1px solid var(--seams-colors-borderPrimary);
+}
+.seams-account-menu-dialog-host {
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.seams-account-menu-dialog-footer {
+  padding: 0.875rem 1.375rem;
+  border-top: 1px solid var(--seams-colors-borderPrimary);
+  background: var(--seams-colors-surface);
+}
+.seams-account-menu-dialog-header > svg,
+.seams-account-menu-dialog-footer > svg {
+  flex-shrink: 0;
+}
+.seams-account-menu-dialog-main {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  min-height: 0;
+  padding: 1.5rem;
+  text-wrap: pretty;
+}
+
 @media (prefers-reduced-motion: no-preference) {
   .seams-linked-devices-modal-content {
     animation: seams-linked-devices-modal-content-enter 80ms ease-out both;
   }
 }
 
-.seams-auth-methods-modal-content {
-  width: min(640px, 100%);
-}
-
-/* The device inventory is two short rows of text; a narrower dialog keeps the
-   metadata lines scannable. */
-.seams-linked-devices-inventory-content {
-  width: min(560px, 100%);
-}
-
 .seams-auth-methods-modal-intro {
-  margin: -0.25rem 2.5rem 0.75rem 0;
+  margin: -0.25rem 0 0.75rem;
   color: var(--seams-colors-textSecondary);
   font-size: 0.9rem;
   line-height: 1.45;
 }
 
 .seams-linked-devices-modal-title {
-  margin: 0 2.5rem 0.75rem 0;
-  font-size: 1.3125rem;
-  font-weight: 600;
-  letter-spacing: -0.01em;
+  margin: 0 0 0.75rem;
+  font-size: 1.375rem;
+  font-weight: 500;
+  letter-spacing: -0.025em;
   line-height: 1.25;
   color: var(--seams-colors-textPrimary);
 }
 
 .seams-linked-devices-modal-subtitle {
-  margin: -0.5rem 2.5rem 1rem 0;
+  margin: -0.5rem 0 1rem;
   color: var(--seams-colors-textSecondary);
   font-size: 0.875rem;
   font-weight: 400;
@@ -89,12 +120,10 @@
 }
 
 .seams-linked-devices-modal-close {
-  position: absolute;
-  top: 1rem;
-  right: 1rem;
+  margin-inline-start: auto;
   background: none;
   border: none;
-  font-size: 1rem;
+  font-size: 0.875rem;
   font-weight: 600;
   color: var(--seams-colors-textMuted);
   cursor: pointer;
@@ -177,22 +206,20 @@
   overflow-wrap: anywhere;
 }
 
-/* The state chip carries the only status a person needs; colour reinforces the
-   word rather than replacing it. */
+/* The state chip carries the only status a person needs. A normal state is a
+   quiet neutral tag; colour marks only the states that need attention. */
 .seams-linked-devices-modal-standing {
   flex: none;
-  padding: 0.15rem 0.5rem;
-  border-radius: 999px;
-  font-size: 0.72rem;
-  font-weight: 700;
+  padding: 0.1875rem 0.5rem;
+  border-radius: 6px;
+  background: color-mix(in srgb, var(--seams-colors-textPrimary), transparent 93%);
+  color: var(--seams-colors-textPrimary);
+  font-size: 0.75rem;
+  font-weight: 500;
+  line-height: 1.4;
   white-space: nowrap;
 }
 
-.seams-linked-devices-modal-standing.tone-active {
-  background: color-mix(in srgb, oklch(0.62 0.15 155), transparent 88%);
-  color: oklch(0.48 0.14 155);
-}
-
 .seams-linked-devices-modal-standing.tone-pending {
   background: color-mix(in srgb, oklch(0.72 0.15 85), transparent 88%);
   color: oklch(0.5 0.13 85);
@@ -203,10 +230,6 @@
   color: var(--seams-colors-textSecondary);
 }
 
-.theme-dark .seams-linked-devices-modal-standing.tone-active {
-  color: oklch(0.8 0.14 155);
-}
-
 .theme-dark .seams-linked-devices-modal-standing.tone-pending {
   color: oklch(0.82 0.13 85);
 }
@@ -217,57 +240,84 @@
   font-weight: 500;
 }
 
-/* The device inventory renders as one bordered group with hairline dividers
-   rather than a stack of cards; the auth-methods modal keeps the card look. */
+/* A grouped inventory is a plain list: no box around it, a hairline under
+   every row, so the rows read as entries on the card itself. */
 .seams-linked-devices-modal-list--grouped {
   gap: 0;
-  border: 1px solid var(--seams-colors-borderPrimary);
-  border-radius: 0.75rem;
-  background: var(--seams-colors-surface);
-  overflow: hidden;
 }
 
 .seams-linked-devices-modal-item--row {
   position: relative;
-  grid-template-columns: 40px minmax(0, 1fr) auto;
-  align-items: start;
-  gap: 0 0.75rem;
-  padding: 1rem;
+  grid-template-columns: 24px minmax(0, 1fr) auto;
+  align-items: center;
+  gap: 0 0.875rem;
+  padding: 0.875rem 0;
   border: none;
+  border-bottom: 1px solid var(--seams-colors-borderPrimary);
   border-radius: 0;
   background: transparent;
 }
 
-/* Divider inset to the row padding so the group reads as one card. */
-.seams-linked-devices-modal-item--row + .seams-linked-devices-modal-item--row::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  left: 1rem;
-  right: 1rem;
-  border-top: 1px solid var(--seams-colors-borderPrimary);
-}
-
 .seams-linked-devices-modal-item-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  width: 40px;
-  height: 40px;
-  border-radius: 999px;
-  background: color-mix(in srgb, var(--seams-colors-textSecondary), transparent 92%);
+  align-self: start;
+  width: 24px;
+  height: 1.25rem;
+  margin-top: 0.125rem;
   color: var(--seams-colors-textSecondary);
 }
 
+.seams-linked-devices-modal-item-icon svg {
+  width: 20px;
+  height: 20px;
+}
+
+/* Section labels name each group of rows, in small caps above it. */
+.seams-account-menu-section {
+  display: grid;
+  gap: 0.5rem;
+}
+
+.seams-account-menu-section-label {
+  margin: 0;
+  color: var(--seams-colors-textSecondary);
+  font-size: 0.6875rem;
+  font-weight: 500;
+  letter-spacing: 0.08em;
+  line-height: 1.4;
+  text-transform: uppercase;
+}
+
+.seams-account-menu-section > .seams-linked-devices-modal-list--grouped {
+  margin-top: -0.25rem;
+}
+
+/* A section's main action is a full-width outline button; an add action leads
+   with its plus sign. */
+.seams-linked-devices-modal-content .seams-account-menu-wide-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  justify-self: stretch;
+  gap: 0.5rem;
+  min-height: 44px;
+  border-radius: var(--seams-shape-control, 10px);
+  background: transparent;
+  font-size: 0.875rem;
+  font-weight: 500;
+}
+
 .seams-linked-devices-modal-item-content {
   display: grid;
   gap: 0.15rem;
   min-width: 0;
 }
 
-/* Title and chip sit together on the left; the shared rule spreads them. */
+/* Title on the left, status chip at the end of the row. */
 .seams-linked-devices-modal-item--row .seams-linked-devices-modal-item-main {
-  justify-content: flex-start;
+  justify-content: space-between;
   align-items: center;
   flex-wrap: wrap;
   gap: 0.5rem;
@@ -275,10 +325,17 @@
 }
 
 .seams-linked-devices-modal-item--row .seams-linked-devices-modal-item-name {
-  font-size: 0.875rem;
+  font-size: 0.9375rem;
+  font-weight: 500;
   line-height: 1.25rem;
 }
 
+.seams-linked-devices-modal-item--row .seams-linked-devices-modal-item-detail {
+  margin-top: 0.125rem;
+  font-size: 0.8125rem;
+  font-weight: 400;
+}
+
 /* Why this row cannot be removed right now, shaped as part of the row. */
 .seams-linked-devices-modal-hint {
   display: flex;
@@ -343,7 +400,8 @@
 .seams-linked-devices-modal-add-method h3 {
   margin: 0;
   color: var(--seams-colors-textPrimary);
-  font-size: 0.95rem;
+  font-size: 0.9375rem;
+  font-weight: 500;
   line-height: 1.35;
 }
 
@@ -486,10 +544,21 @@
   .seams-linked-devices-modal-content {
     max-height: calc(100vh - 16px);
     max-height: calc(100dvh - 16px);
-    padding: var(--seams-spacing-md, 1rem);
     border-radius: var(--seams-shape-card, 1rem);
   }
 
+  .seams-account-menu-dialog-main {
+    padding: var(--seams-spacing-md, 1rem);
+  }
+
+  .seams-account-menu-dialog-header {
+    padding-inline-start: var(--seams-spacing-md, 1rem);
+  }
+
+  .seams-account-menu-dialog-footer {
+    padding-inline: var(--seams-spacing-md, 1rem);
+  }
+
   .seams-linked-devices-modal-item-main {
     align-items: flex-start;
     flex-direction: column;
@@ -500,21 +569,6 @@
     align-items: center;
     flex-direction: row;
   }
-
-  .seams-linked-devices-modal-item--row {
-    grid-template-columns: 32px minmax(0, 1fr) auto;
-    padding: 0.85rem;
-  }
-
-  .seams-linked-devices-modal-item-icon {
-    width: 32px;
-    height: 32px;
-  }
-
-  .seams-linked-devices-modal-item--row + .seams-linked-devices-modal-item--row::before {
-    left: 0.85rem;
-    right: 0.85rem;
-  }
 }
 
 @media (max-height: 520px) {
@@ -540,8 +594,8 @@
   border: 1px solid var(--seams-colors-borderPrimary);
   animation: none;
 }
-.seams-linked-devices-modal-backdrop[data-presentation='page'] .seams-linked-devices-modal-close {
-  display: none;
+.seams-linked-devices-modal-backdrop[data-presentation='page'] .seams-account-menu-dialog-main {
+  padding: 0;
 }
 .seams-linked-devices-modal-backdrop[data-presentation='page'] .seams-linked-devices-modal-body {
   overflow: visible;
@@ -554,10 +608,17 @@
 .seams-auth-methods-modal-content .seams-linked-devices-modal-body {
   gap: 1.5rem;
 }
+/* A method's icon sits on a tile, like the recovery-code row. */
 .seams-auth-methods-modal-content .seams-linked-devices-modal-item--row {
-  padding: 1rem;
-  border: 0;
-  background: transparent;
+  grid-template-columns: 2.5rem minmax(0, 1fr) auto;
+}
+.seams-auth-methods-modal-content .seams-linked-devices-modal-item-icon {
+  width: 2.5rem;
+  height: 2.5rem;
+  margin-top: 0;
+  border-radius: var(--seams-shape-control, 10px);
+  background: color-mix(in srgb, var(--seams-colors-textPrimary), transparent 93%);
+  color: var(--seams-colors-textPrimary);
 }
 .seams-auth-methods-modal-content .seams-linked-devices-modal-item-detail {
   font-weight: 400;
@@ -566,7 +627,7 @@
 .seams-auth-methods-modal-content .seams-linked-devices-modal-add-method {
   padding: 0;
   border: 0;
-  gap: 1rem;
+  gap: 0.5rem;
 }
 .seams-auth-methods-modal-content .seams-linked-devices-modal-otp-form {
   grid-template-columns: minmax(0, 1fr) auto;

package/dist/esm/react/components/AccountMenuButton/LinkedDevicesModal.js

@@ -1,8 +1,10 @@
 import { useSeams } from "../../context/index.js";
+import { AccountMenuDeviceDetails } from "./AccountMenuDeviceDetails.js";
 import { AccountMenuDialogFrame, useAccountMenuDialogKeyboard } from "./AccountMenuDialog.js";
+import { MailIcon } from "./icons/MailIcon.js";
+import { AuthenticationMethodRow } from "./AuthenticationMethodRow.js";
 import { LaptopIcon } from "./icons/LaptopIcon.js";
 import { LockIcon } from "./icons/LockIcon.js";
-import { MailIcon } from "./icons/MailIcon.js";
 import { SmartphoneIcon } from "./icons/SmartphoneIcon.js";
 import React, { useEffect } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
@@ -203,6 +205,7 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 	const { seams, loginState } = useSeams();
 	const [loadState, setLoadState] = React.useState({ kind: "idle" });
 	const [revokeState, setRevokeState] = React.useState({ kind: "idle" });
+	const [selectedDeviceId, setSelectedDeviceId] = React.useState(null);
 	const [announcement, setAnnouncement] = React.useState("");
 	const loadSeq = React.useRef(0);
 	const seamsRef = React.useRef(seams);
@@ -247,6 +250,7 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 		if (!isOpen) {
 			loadSeq.current += 1;
 			setLoadState({ kind: "idle" });
+			setSelectedDeviceId(null);
 			setRevokeState({ kind: "idle" });
 			setAnnouncement("");
 			return;
@@ -286,17 +290,26 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 	]);
 	if (!isOpen) return null;
 	const devices = loadState.kind === "loaded" ? loadState.devices : [];
+	const selectedDevice = devices.find((entry) => viewId(entry.view) === selectedDeviceId);
+	const visibleDevices = selectedDevice ? [selectedDevice] : devices;
 	const showEmpty = loadState.kind === "loaded" && devices.length === 0;
 	const selectedWalletAuthMethodId = loginState.isLoggedIn && loginState.currentAuthMethod.kind === "selected" ? String(loginState.currentAuthMethod.binding.walletAuthMethodId) : null;
 	return /* @__PURE__ */ jsxs(AccountMenuDialogFrame, {
 		presentation,
-		onClose,
+		onClose: selectedDevice ? setSelectedDeviceId.bind(null, null) : onClose,
 		dialogRef,
 		contentClassName: "seams-linked-devices-inventory-content",
 		titleId: "seams-linked-devices-modal-title",
-		title: "Your devices",
+		title: selectedDevice ? "Device details" : "Linked devices",
 		closeLabel: "Close linked devices",
-		children: [/* @__PURE__ */ jsx("p", {
+		children: [selectedDevice ? /* @__PURE__ */ jsx(AccountMenuDeviceDetails, {
+			title: credentialDescription(viewCredential(selectedDevice.view)),
+			description: deviceMetaLine(selectedDevice.view, selectedDevice.deviceNumber, false, Date.now()),
+			details: [{
+				label: "Status",
+				value: deviceStateAttr(selectedDevice.view)
+			}]
+		}) : /* @__PURE__ */ jsx("p", {
 			className: "seams-linked-devices-modal-subtitle",
 			children: "Anything listed here can unlock this wallet."
 		}), /* @__PURE__ */ jsxs("div", {
@@ -323,7 +336,7 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 				}) : null,
 				devices.length > 0 ? /* @__PURE__ */ jsx("ul", {
 					className: "seams-linked-devices-modal-list seams-linked-devices-modal-list--grouped",
-					children: devices.map(({ view, deviceNumber }) => {
+					children: visibleDevices.map(({ view, deviceNumber }) => {
 						const cardId = viewId(view);
 						const title = credentialDescription(viewCredential(view));
 						const titleCollides = devices.some((other) => viewId(other.view) !== cardId && credentialDescription(viewCredential(other.view)) === title);
@@ -335,8 +348,16 @@ const LinkedDevicesModal = ({ walletId, isOpen, onClose, presentation = "modal"
 						const working = revokeState.kind === "working" && revokeState.walletAuthMethodId === walletAuthMethodId;
 						const revocationInProgress = revokeState.kind === "working";
 						const showRemoveButton = hasRemovableSibling && !isSelectedMethod && !confirming;
+						if (presentation === "embedded" && !selectedDevice) return /* @__PURE__ */ jsx(AuthenticationMethodRow, {
+							kind: viewCredential(view).kind,
+							icon: credentialIcon(viewCredential(view)),
+							title,
+							description: deviceMetaLine(view, deviceNumber, titleCollides, Date.now()),
+							onSelect: setSelectedDeviceId.bind(null, cardId)
+						}, cardId);
 						return /* @__PURE__ */ jsxs("li", {
 							className: "seams-linked-devices-modal-item seams-linked-devices-modal-item--row",
+							"data-detail": selectedDevice ? "true" : void 0,
 							"data-device-kind": view.kind,
 							"data-device-state": deviceStateAttr(view),
 							children: [

package/dist/esm/react/components/AccountMenuButton/MenuItem.js

@@ -16,22 +16,37 @@ const MenuItem = memo(forwardRef(({ item, onClose, className, style, isHighlight
 		ref,
 		type: "button",
 		disabled: item.disabled,
+		"data-account-menu-item": item.id,
 		className: `seams-dropdown-menu-item${disabledClass}${classNameProps}${highlightedClass}`,
 		style,
 		onClick: handleClick,
-		children: [/* @__PURE__ */ jsx("div", {
-			className: "seams-dropdown-menu-item-icon",
-			children: item.icon
-		}), /* @__PURE__ */ jsxs("div", {
-			className: "seams-dropdown-menu-item-content",
-			children: [/* @__PURE__ */ jsx("div", {
-				className: "seams-dropdown-menu-item-label",
-				children: item.label
-			}), /* @__PURE__ */ jsx("div", {
-				className: "seams-dropdown-menu-item-description",
-				children: item.description
-			})]
-		})]
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				className: "seams-dropdown-menu-item-icon",
+				children: item.icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "seams-dropdown-menu-item-content",
+				children: [/* @__PURE__ */ jsx("div", {
+					className: "seams-dropdown-menu-item-label",
+					children: item.label
+				}), /* @__PURE__ */ jsx("div", {
+					className: "seams-dropdown-menu-item-description",
+					children: item.description
+				})]
+			}),
+			!item.disabled ? /* @__PURE__ */ jsx("svg", {
+				className: "seams-account-menu-chevron",
+				width: "16",
+				height: "16",
+				viewBox: "0 0 24 24",
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: "1.5",
+				"aria-hidden": "true",
+				children: /* @__PURE__ */ jsx("path", { d: "m9 6 6 6-6 6" })
+			}) : null
+		]
 	});
 }));
 //#endregion

package/dist/esm/react/components/AccountMenuButton/ProfileDropdown.css

@@ -1,80 +1,84 @@
-/* ProfileDropdown component-specific styles */
-
-/* Dropdown (grid height animation with data-state) */
-.seams-profile-dropdown-morphed {
-  position: static;
-  box-sizing: border-box;
-  margin-top: 0;
-  opacity: 0;
-  visibility: hidden;
-  display: grid;
-  grid-template-rows: 0fr;
-  grid-template-columns: 1fr;
-  transition:
-    opacity 120ms linear,
-    grid-template-rows 140ms cubic-bezier(0.16, 1, 0.3, 1);
+.seams-account-menu-group {
+  margin-top: 16px;
+}
+.seams-account-menu-group + .seams-account-menu-group {
   border-top: 1px solid var(--seams-colors-borderPrimary);
+  padding-top: 12px;
+  margin-top: 10px;
 }
-
-.seams-profile-dropdown-morphed[data-state='open'] {
-  opacity: 1;
-  visibility: visible;
-  grid-template-rows: 1fr;
-  grid-template-columns: 1fr;
-  pointer-events: auto;
-  --stagger-base: 40ms;
+.seams-account-menu-group h3 {
+  font-size: 10px;
+  font-weight: 600;
+  letter-spacing: 1px;
+  text-transform: uppercase;
+  color: var(--seams-colors-textSecondary);
+  margin: 0 0 4px;
 }
-
-.seams-profile-dropdown-morphed[data-state='closed'] {
-  pointer-events: none;
-  border-top-width: 0;
-  grid-template-rows: 0fr;
-  height: 0;
-  min-height: 0;
-  width: 0;
-  min-width: 0;
-  max-width: 0;
-  overflow: hidden;
-  margin: 0;
-  padding: 0;
+.seams-profile-dropdown-menu {
+  --seams-expander-surface: var(--seams-colors-surface2);
 }
-
-.seams-profile-dropdown-morphed.hidden {
+.seams-profile-dropdown-menu .seams-dropdown-menu-item {
+  min-height: 40px;
+  padding: 6px 0;
+  gap: 10px;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  width: 100%;
+  text-align: left;
+  display: flex;
+  align-items: center;
+  cursor: pointer;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item:disabled {
+  color: var(--seams-colors-textSecondary);
+  opacity: 0.6;
+  cursor: default;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item-icon {
+  width: 22px;
+  height: 22px;
+  color: var(--seams-colors-textSecondary);
+  flex-shrink: 0;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item-icon svg {
+  width: 20px;
+  height: 20px;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item-label {
+  font-size: 14px;
+  font-weight: 400;
+}
+.seams-profile-dropdown-menu .seams-dropdown-menu-item-description {
   display: none;
 }
-
-/* Inner clip and container */
-.seams-profile-dropdown-menu {
-  overflow: hidden;
-  min-height: 0;
-  min-width: 0;
-  /* Expanded sections sit on a slightly deeper surface than the menu itself.
-     Derived from the theme's own surface tones so it tracks light/dark. */
-  --seams-expander-surface: color-mix(
-    in srgb,
-    var(--seams-colors-surface2) 45%,
-    var(--seams-colors-surface)
-  );
+.seams-profile-dropdown-menu .seams-dropdown-menu-item-content {
+  flex: 1;
 }
-
-/* Global theme pulse when toggling theme */
-@keyframes seams-theme-pulse {
-  0% {
-    filter: none;
-  }
-  50% {
-    filter: brightness(1.05) saturate(1.06);
-  }
-  100% {
-    filter: none;
-  }
+.seams-account-menu-chevron {
+  color: var(--seams-colors-textSecondary);
+  flex-shrink: 0;
 }
-body[data-seams-theme-pulse='1'] .seams-profile-dropdown-menu {
-  animation: seams-theme-pulse 220ms ease;
+.seams-profile-dropdown-menu .seams-lock-menu-item {
+  border: 1px solid var(--seams-colors-borderPrimary);
+  border-radius: 11px;
+  justify-content: center;
+  margin-top: 12px;
+}
+.seams-lock-menu-item .seams-dropdown-menu-item-content {
+  flex: 0 1 auto;
+}
+@media (hover: hover) {
+  .seams-profile-dropdown-menu .seams-dropdown-menu-item:not(:disabled):hover {
+    color: var(--seams-colors-textSecondary);
+    background: transparent;
+  }
 }
 
-/* Lock menu item specific styling */
-.seams-lock-menu-item {
-  border-top: 1px solid var(--seams-colors-borderPrimary);
-  border-radius: 0px 0px 2rem 2rem;
+@media (pointer: coarse) {
+  .seams-profile-dropdown-menu .seams-dropdown-menu-item {
+    min-height: 44px;
+  }
 }