From b7b8ad4c76114282106286b1be64c8157e1a5a9c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Filip=20=C5=9Al=C4=99zak?= <fslezak@teonite.com>
Date: Mon, 26 Oct 2026 09:51:50 +0100
Subject: [PATCH] ui profile fixes

---
 .../components/ProfileAuthCard/ProfileAuthCard.tsx   | 12 +++++++++++-
 .../components/AuthCardRow/style.scss                |  4 ++++
 .../components/WebauthnRow/WebauthnRow.tsx           |  2 +-
 .../components/ProfileAuthCard/style.scss            |  8 ++++++++
 web/src/shared/defguard-ui                           |  2 +-
 5 files changed, 25 insertions(+), 3 deletions(-)

diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/ProfileAuthCard.tsx b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/ProfileAuthCard.tsx
index c2e1640ba9..3b766f6a13 100644
--- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/ProfileAuthCard.tsx
+++ b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/ProfileAuthCard.tsx
@@ -7,6 +7,7 @@ import {
   UserMfaMethod,
   type UserMfaMethodValue,
 } from '../../../../../../../shared/api/types';
+import { Badge } from '../../../../../../../shared/defguard-ui/components/Badge/Badge';
 import { Divider } from '../../../../../../../shared/defguard-ui/components/Divider/Divider';
 import { IconButtonMenu } from '../../../../../../../shared/defguard-ui/components/IconButtonMenu/IconButtonMenu';
 import type {
@@ -302,7 +303,16 @@ export const ProfileAuthCard = () => {
       <Divider orientation="horizontal" />
       <div className="section">
         <div className="header" data-testid="passkeys-header">
-          <p className="section-title">{m.profile_auth_card_section_passkeys()}</p>
+          <div className="title">
+            <p className="section-title">{m.profile_auth_card_section_passkeys()}</p>
+            {hasPasskeys && user.mfa_method === UserMfaMethod.Webauthn && (
+              <Badge
+                variant="success"
+                size="compact"
+                text={m.profile_auth_card_default_method()}
+              />
+            )}
+          </div>
           {isPresent(webauthnMenuItems) && (
             <IconButtonMenu icon="menu" menuItems={[webauthnMenuItems]} />
           )}
diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/AuthCardRow/style.scss b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/AuthCardRow/style.scss
index eea8230383..1fe75b5040 100644
--- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/AuthCardRow/style.scss
+++ b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/AuthCardRow/style.scss
@@ -71,6 +71,10 @@
         border-radius: 50%;
         background-color: var(--fg-muted);
       }
+
+      & > .helper {
+        display: flex;
+      }
     }
   }
 
diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/WebauthnRow/WebauthnRow.tsx b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/WebauthnRow/WebauthnRow.tsx
index 8d8f6fe0be..6ba5affe6a 100644
--- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/WebauthnRow/WebauthnRow.tsx
+++ b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/components/WebauthnRow/WebauthnRow.tsx
@@ -53,7 +53,7 @@ export const WebauthnRow = ({ securityKey, username }: Props) => {
 
   return (
     <AuthCardRow
-      icon="key"
+      icon={isHardware ? 'software-key' : 'key'}
       title={securityKey.name}
       badge={
         isPresent(securityKey.authenticator_name)
diff --git a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/style.scss b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/style.scss
index 7f5c3be45c..43faeb6e21 100644
--- a/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/style.scss
+++ b/web/src/pages/user-profile/UserProfilePage/tabs/ProfileDetailsTab/components/ProfileAuthCard/style.scss
@@ -25,6 +25,14 @@
       align-items: center;
       justify-content: space-between;
       padding-bottom: var(--spacing-lg);
+
+      & > .title {
+        display: flex;
+        flex-flow: row wrap;
+        align-items: center;
+        gap: var(--spacing-xs) var(--spacing-sm);
+        min-width: 0;
+      }
     }
 
     & > .divider {
diff --git a/web/src/shared/defguard-ui b/web/src/shared/defguard-ui
index 7f7cf99f82..fba732e158 160000
--- a/web/src/shared/defguard-ui
+++ b/web/src/shared/defguard-ui
@@ -1 +1 @@
-Subproject commit 7f7cf99f8262d9fa2c7165e1a3a2c92b2c528d0c
+Subproject commit fba732e1589c395a32d120f066da5aa1a12e5faa