Show device identity details and resolve hostnames

src/web/styles/features/devices.css

@@ -273,7 +273,8 @@
 
 .client-device-main > h4 {
   height: 23px;
-  flex: 1 1 auto;
+  position: relative;
+  flex: 0 1 auto;
   min-width: 0;
   display: flex;
   align-items: center;
@@ -287,13 +288,9 @@
   white-space: nowrap;
 }
 
-.client-device-main > h4.is-address-only {
-  flex: 0 1 auto;
-}
-
 .client-device-alias-trigger,
 .client-device-alias-input,
-.client-device-ip {
+.client-device-fallback-name {
   min-width: 0;
   padding: 0;
   overflow: hidden;
@@ -349,46 +346,109 @@
   color: var(--client-accent);
 }
 
-.client-device-name-separator {
-  flex: 0 0 auto;
-  color: var(--client-muted);
-  font: var(--type-body);
-  letter-spacing: var(--type-body-tracking);
-  text-transform: var(--type-body-transform);
+.client-device-fallback-name {
+  flex: 0 1 auto;
 }
 
-.client-device-ip {
-  flex: 0 0 auto;
+.client-device-identity-details {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: 20;
+  width: max-content;
+  min-width: 230px;
+  max-width: min(290px, calc(100vw - 88px));
+  display: grid;
+  gap: 2px;
+  padding: 7px;
+  border-radius: 8px;
+  background: color-mix(in oklch, var(--client-bg) 92%, transparent);
+  -webkit-backdrop-filter: blur(10px);
+  backdrop-filter: blur(10px);
+  box-shadow: 0 10px 28px oklch(0.08 0.015 145 / 0.18);
+  opacity: 0;
+  visibility: hidden;
+  filter: blur(2px);
+  pointer-events: none;
+  transform: translateY(-2px);
+  transition: opacity 90ms ease, filter 120ms ease, transform 180ms cubic-bezier(0.16, 1, 0.3, 1), visibility 0s 180ms;
+}
+
+.client-device-name-heading:hover > .client-device-identity-details,
+.client-device-name-heading:focus-visible > .client-device-identity-details,
+.client-device-name-heading:focus-within > .client-device-identity-details {
+  opacity: 1;
+  visibility: visible;
+  filter: blur(0);
+  pointer-events: auto;
+  transform: translateY(0);
+  transition-delay: 20ms, 20ms, 20ms, 0s;
+}
+
+.client-device:hover,
+.client-device:focus-within {
+  z-index: 8;
+}
+
+.client-device-identity-copy {
+  min-width: 0;
+  display: grid;
+  grid-template-columns: 58px minmax(0, 1fr);
+  align-items: center;
+  gap: 8px;
+  padding: 5px 7px;
+  border: 0;
+  border-radius: 5px;
+  background: transparent;
+  color: var(--client-text);
+  text-align: left;
+  cursor: copy;
+  transition: color 180ms ease, background 180ms ease, filter 300ms ease;
+}
+
+.client-device-identity-copy b {
+  color: var(--client-muted);
+  font: var(--type-label);
+  letter-spacing: var(--type-label-tracking);
+  text-transform: var(--type-label-transform);
+}
+
+.client-device-identity-copy span {
+  min-width: 0;
+  overflow: hidden;
   font: var(--type-data);
   letter-spacing: var(--type-data-tracking);
   text-transform: var(--type-data-transform);
   font-variant-numeric: var(--numeric-tabular);
-  cursor: copy;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
-.client-device-ip:hover,
-.client-device-ip:focus-visible {
+.client-device-identity-copy:hover,
+.client-device-identity-copy:focus-visible {
+  background: color-mix(in oklch, var(--client-accent) 9%, transparent);
   color: var(--client-accent);
 }
 
-.client-device-ip.is-copied {
+.client-device-identity-copy.is-copied {
   --client-device-copy-color: var(--client-accent);
-  animation: client-device-ip-copy 800ms ease-out;
+  animation: client-device-copy 800ms ease-out;
 }
 
-.client-device-ip.is-copy-error {
+.client-device-identity-copy.is-copy-error {
   --client-device-copy-color: oklch(0.68 0.15 28);
-  animation: client-device-ip-copy 800ms ease-out;
+  animation: client-device-copy 800ms ease-out;
 }
 
 .client-device-alias-trigger:focus-visible,
-.client-device-ip:focus-visible {
+.client-device-name-heading:focus-visible,
+.client-device-identity-copy:focus-visible {
   border-radius: 3px;
   outline: 2px solid var(--client-accent);
   outline-offset: 2px;
 }
 
-@keyframes client-device-ip-copy {
+@keyframes client-device-copy {
   35% {
     color: var(--client-device-copy-color);
     filter: drop-shadow(0 0 6px color-mix(in oklch, var(--client-device-copy-color) 48%, transparent));

src/web/styles/themes.css

@@ -67,7 +67,8 @@
   .client-device-policy svg,
   .client-device-alias-trigger,
   .client-device-alias-input,
-  .client-device-ip,
+  .client-device-identity-details,
+  .client-device-identity-copy,
   .client-device-traffic-value > span,
   .client-device-traffic-breakdown,
   .client-device-traffic-breakdown > span,