Improve hint item appearance.

CHANGELOG.md

@@ -1,5 +1,11 @@
 # authn.io ChangeLog
 
+## 7.4.4 - 2026-06-dd
+
+### Fixed
+- Make dark mode hint list items look more like buttons.
+- Make adding url bar to popup window height conditional.
+
 ## 7.4.3 - 2026-06-12
 
 ### Fixed

web/app.less

@@ -2,12 +2,16 @@
  * New BSD License (3-clause)
  * Copyright (c) 2015-2026, Digital Bazaar, Inc.
  * Copyright (c) 2015-2016, Accreditrust Technologies, LLC
- * All rights reserved.
  */
 @wrm-gray: #aaa;
 @wrm-dark-gray: darken(@wrm-gray, 25%);
 @wrm-handler-header-height: 60px;
 
+@wrm-blue: #3678e3;
+@wrm-active-border-color: @wrm-blue;
+@wrm-primary: lighten(@wrm-active-border-color, 5%);
+@wrm-selected-background-color: fadeout(@wrm-active-border-color, 95%);
+
 .br-body {
   margin: 0;
 };
@@ -16,7 +20,8 @@
   padding: 5px 5px;
 }
 
-/* Make hint list scrollable with custom thin scrollbar */
+/* Make hint list scrollable with custom thin scrollbar and make buttons look
+  more pressable */
 .wrm-hint-list {
   max-height: 200px;
 
@@ -42,6 +47,34 @@
     scrollbar-width: thin;
     scrollbar-color: @wrm-gray @wrm-dark-gray;
   }
+
+  .wrm-item {
+    &.wrm-selectable {
+      /*box-shadow: inset 0 10px 30px rgba(0, 0, 0, 0.03);*/
+      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
+      border-bottom-color: transparent;
+
+      @media (prefers-color-scheme: dark) {
+        box-shadow:
+          inset 0 -5px 10px rgba(0, 0, 0, 0.3),
+          inset 0 -2px 5px fade(@wrm-primary, 25%);
+
+        /* non-iOS device detection (only :hover on non-iOS) */
+        @supports not (-webkit-overflow-scrolling: touch) {
+          &:hover {
+            background-color: #3d3d40;
+            border: 1px solid fadeout(@wrm-active-border-color, 50%) !important;
+            box-shadow:
+              inset 0 2px 1px fade(@wrm-primary, 25%),
+              inset 0 35px 100px fade(@wrm-primary, 20%);
+            cursor: pointer;
+            outline: none;
+            transition: border-color ease-in-out .25s, box-shadow ease-in-out .25s;
+          }
+        }
+      }
+    }
+  }
 }
 
 /* Adjust padding and margin for hint list items to accommodate scrollbar */

web/mediator/constants.js

@@ -2,15 +2,19 @@
  * New BSD License (3-clause)
  * Copyright (c) 2017-2026, Digital Bazaar, Inc.
  */
+const addUrlBarHeight = navigator.userAgent.toLowerCase().includes('firefox');
+const urlBarHeight = addUrlBarHeight ? 30 : 0;
+
 export const DEFAULT_ALLOW_WALLET_POPUP_WIDTH = 500;
 // tall enough for the Block/Allow footer on browsers with tall popup
 // chrome (e.g. Firefox always shows a URL bar in popups)
-export const DEFAULT_ALLOW_WALLET_POPUP_HEIGHT = 260;
+export const DEFAULT_ALLOW_WALLET_POPUP_HEIGHT = 230 + urlBarHeight;
 
 export const DEFAULT_HANDLER_POPUP_WIDTH = 800;
 export const DEFAULT_HANDLER_POPUP_HEIGHT = 600;
 
 export const DEFAULT_HINT_CHOOSER_POPUP_WIDTH = 500;
-export const DEFAULT_HINT_CHOOSER_POPUP_HEIGHT = 440;
+export const DEFAULT_HINT_CHOOSER_POPUP_HEIGHT = 400 + urlBarHeight;
 // taller hint chooser popup that fits the cross-device QR section
-export const DEFAULT_CROSS_DEVICE_HINT_CHOOSER_POPUP_HEIGHT = 560;
+export const DEFAULT_CROSS_DEVICE_HINT_CHOOSER_POPUP_HEIGHT =
+  550 + urlBarHeight;