ui/ux login optimization

web/css/pages/app-login.css

@@ -705,7 +705,8 @@
 
   .login-methods-stack {
     display: grid;
-    gap: 0.625rem;
+    gap: 0.7rem;
+    margin-block: 0.2rem 0.45rem;
   }
 
   .login-password-form {
@@ -717,17 +718,12 @@
   }
 
   .login-tenant-context {
-    border: 1px solid color-mix(in srgb, var(--app-border) 80%, transparent);
-    border-radius: var(--app-border-radius);
-    background: color-mix(
-      in srgb,
-      var(--app-primary) 6%,
-      var(--app-card-background-color)
-    );
-    padding: 0.75rem;
     margin-bottom: 1rem;
     display: grid;
     gap: 0.75rem;
+    border: 1px solid var(--app-border);
+    border-radius: var(--app-border-radius);
+    padding: calc(var(--app-spacing) * 0.5);
   }
 
   .login-tenant-context-main {
@@ -738,16 +734,10 @@
 
   .login-tenant-context-avatar,
   .login-tenant-context-avatar-placeholder {
-    width: 3.5rem;
-    height: 2.25rem;
-    border-radius: calc(var(--app-border-radius) * 0.7);
+    width: 7.5rem;
+    height: 3.25rem;
     object-fit: contain;
     object-position: left center;
-    background: color-mix(
-      in srgb,
-      var(--app-card-background-color) 80%,
-      var(--app-primary) 20%
-    );
   }
 
   .login-tenant-context-avatar-placeholder {
@@ -775,6 +765,11 @@
   .login-tenant-context-name {
     margin: 0;
     font-size: 11px;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    max-width: 130px;
+    display: block;
+    overflow: hidden;
   }
 
   .login-tenant-context-form {
@@ -786,22 +781,37 @@
   }
 
   .login-help-links {
-    margin: 1.75rem 0 0.25rem;
-    padding-top: 0.35rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    flex-wrap: wrap;
-    column-gap: 0.95rem;
-    row-gap: 0.45rem;
+    margin: 1.4rem 0 0.35rem;
+    padding-top: 0.2rem;
+  }
+  .login-help-links-list {
+    list-style: none;
+    margin: 0;
+    padding: 0;
     font-size: 0.72rem;
-    line-height: 1.25;
+  }
+
+  .login-help-links-item {
+    display: inline-flex;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+  }
+
+  .login-help-links-item + .login-help-links-item::before {
+    content: "";
+    display: inline-block;
+    width: 1px;
+    height: 0.85em;
+    margin-right: 0.8rem;
+    background: color-mix(in srgb, var(--app-muted) 55%, transparent);
+    transform: translateY(1px);
   }
 
   .login-security-note {
-    font-size: 0.74rem;
-    text-align: center;
+    font-size: 0.72rem;
     margin-bottom: 1px;
+    color: color-mix(in srgb, var(--app-contrast) 78%, var(--app-muted));
   }
 
   .login-security-note i {
@@ -811,9 +821,9 @@
 
   .login-security-note-detail {
     width: 100%;
-    text-align: center;
     display: block;
     font-size: 9px;
+    color: color-mix(in srgb, var(--app-muted) 75%, transparent);
   }
 
   form[aria-busy="true"] button[type="submit"],