Upgrade hightide to 0.14.1 and fix team realm border

package.json

@@ -21,20 +21,20 @@
   "license": "MPL-2",
   "keywords": [],
   "dependencies": {
-    "@helpwave/hightide": "^0.8.1",
+    "@helpwave/hightide": "^0.14.1",
     "@keycloakify/email-native": "~260007.0.0",
     "keycloakify": "^11.14.2",
     "lucide-react": "^0.563.0",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7"
   },
   "devDependencies": {
     "@eslint/js": "^9.15.0",
     "@helpwave/eslint-config": "^0.0.11",
     "@storybook/react-vite": "^10.2.8",
     "@tailwindcss/vite": "^4.1.18",
-    "@types/react": "^18.2.43",
-    "@types/react-dom": "^18.2.17",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
     "@typescript-eslint/eslint-plugin": "^8.15.0",
     "@typescript-eslint/parser": "^8.15.0",
     "@vitejs/plugin-react": "^4.2.1",

src/login/components/RealmBanner.tsx

@@ -35,7 +35,8 @@ function KindIcon({ kind, className }: { kind: Exclude<RealmKind, 'customer'>, c
  * Full-width, sticky-top banner shown on every non-customer realm. Combines:
  * - bold colored bar across the viewport
  * - large realm name + icon
- * - 4 px outline around the page edge (driven by `--realm-accent`)
+ * - team realms: 4 px viewport outline (fixed, does not grow with scroll)
+ * - other non-customer realms: 4 px top stripe
  * - document title prefix so the realm is visible in the browser tab
  */
 export function RealmBanner({ kcContext }: RealmBannerProps) {
@@ -63,13 +64,23 @@ export function RealmBanner({ kcContext }: RealmBannerProps) {
     const headlineKey = HEADLINE[theme.kind]
     const subtitleKey = SUBTITLE[theme.kind]
 
+    const isTeamRealm = theme.kind === 'team'
+
     return (
         <>
             <style>{`
                 :root { --realm-accent: ${accent}; }
-                body { box-shadow: inset 0 4px 0 0 ${accent}; }
+                ${isTeamRealm ? '' : `body { box-shadow: inset 0 4px 0 0 ${accent}; }`}
             `}</style>
 
+            {isTeamRealm && (
+                <div
+                    aria-hidden="true"
+                    className="pointer-events-none fixed inset-0 z-[1200] box-border"
+                    style={{ boxShadow: `inset 0 0 0 4px ${accent}` }}
+                />
+            )}
+
             <div
                 role="banner"
                 aria-label={`${realmName} realm indicator`}

src/login/pages/LoginOtp.tsx

@@ -59,16 +59,13 @@ export default function LoginOtp({ kcContext }: LoginOtpProps) {
                                 <FormFieldLayout label={t('selectAuthenticatorTitle')} required>
                                     {({ id, ariaAttributes }) => (
                                         <Select
-                                            id={id}
                                             value={selectedCredentialId}
                                             onValueChange={(value: string) => setSelectedCredentialId(value)}
                                             onEditComplete={() => {}}
-                                            {...ariaAttributes}
+                                            buttonProps={{ id, ...ariaAttributes }}
                                         >
                                             {credentials.map((c) => (
-                                                <SelectOption key={c.id} value={c.id}>
-                                                    {c.userLabel}
-                                                </SelectOption>
+                                                <SelectOption key={c.id} value={c.id} label={c.userLabel} />
                                             ))}
                                         </Select>
                                     )}