Polish vault icons and mobile layout

webapp/src/styles/dark.css

@@ -36,6 +36,7 @@
 
 :root[data-theme='dark'] .muted,
 :root[data-theme='dark'] .detail-sub,
+:root[data-theme='dark'] .detail-folder-line,
 :root[data-theme='dark'] .field-help,
 :root[data-theme='dark'] .list-sub,
 :root[data-theme='dark'] .kv-label,
@@ -296,3 +297,8 @@
   backdrop-filter: blur(8px);
   -webkit-backdrop-filter: blur(8px);
 }
+
+:root[data-theme='dark'] .not-found-code {
+  background: color-mix(in srgb, var(--primary) 18%, var(--panel));
+  color: var(--primary-strong);
+}

webapp/src/styles/forms.css

@@ -198,7 +198,7 @@ input[type='file'].input::file-selector-button:hover {
 }
 
 .or {
-  @apply my-2.5 text-center text-slate-700;
+  @apply text-center text-slate-700;
 }
 
 .field-help {

webapp/src/styles/responsive.css

@@ -61,15 +61,15 @@
 
 @media (max-width: 1180px) {
   .auth-page {
-    @apply items-start p-3.5;
+    @apply items-center p-3.5;
   }
 
   .standalone-shell {
-    @apply w-full max-w-[460px] gap-2.5 pt-3;
+    @apply w-full max-w-[460px] gap-2.5;
   }
 
   .standalone-brand-outside {
-    @apply justify-start;
+    @apply justify-center;
   }
 
   .standalone-brand-logo {
@@ -663,6 +663,49 @@
 }
 
 @media (max-width: 640px) {
+  .settings-module h3 {
+    margin-bottom: 12px;
+  }
+
+  .settings-module .field,
+  .auth-card .field {
+    margin-bottom: 12px;
+  }
+
+  .settings-module .field > span,
+  .auth-card .field > span {
+    margin-top: 0;
+    margin-bottom: 6px;
+  }
+
+  .settings-module .field-grid,
+  .auth-card .field-grid,
+  .session-timeout-fields {
+    gap: 12px;
+  }
+
+  .settings-module .btn,
+  .auth-card .btn:not(.full) {
+    margin-top: 2px;
+  }
+
+  .dialog-mask.totp-scan-mask {
+    display: block;
+    padding: 0;
+    background: #0f172a;
+    backdrop-filter: none;
+    -webkit-backdrop-filter: none;
+  }
+
+  .dialog-card.totp-scan-dialog {
+    width: 100vw;
+    max-width: none;
+    height: 100dvh;
+    max-height: 100dvh;
+    border-radius: 0;
+    box-shadow: none;
+  }
+
   .backup-interval-row {
     grid-template-columns: 1fr;
   }

webapp/src/styles/vault.css

@@ -664,18 +664,17 @@
 }
 
 .dialog-mask.totp-scan-mask {
-  @apply block p-0;
-  background: #0f172a;
-  backdrop-filter: none;
-  -webkit-backdrop-filter: none;
+  @apply grid place-items-center p-5;
+  background: rgba(15, 23, 42, 0.78);
 }
 
 .dialog-card.totp-scan-dialog {
-  @apply flex h-dvh w-screen max-w-none flex-col overflow-hidden rounded-none border-0 p-0 text-left;
-  max-height: 100dvh;
+  @apply flex w-full max-w-[560px] flex-col overflow-hidden rounded-3xl border-0 p-0 text-left;
+  height: min(720px, calc(100dvh - 48px));
+  max-height: calc(100dvh - 48px);
   background: #0f172a;
   color: #f8fafc;
-  box-shadow: none;
+  box-shadow: 0 28px 80px rgba(2, 6, 23, 0.45);
 }
 
 .totp-scan-head {
@@ -698,8 +697,7 @@
 }
 
 .totp-scan-frame {
-  @apply relative min-h-0 flex-1 overflow-hidden rounded-none;
-  aspect-ratio: auto;
+  @apply relative min-h-0 flex-1 overflow-hidden;
   background: #0f172a;
 }
 
@@ -738,6 +736,39 @@
   @apply flex min-h-full flex-col;
 }
 
+.detail-title-row {
+  @apply flex min-w-0 items-center gap-3;
+}
+
+.detail-title-icon {
+  @apply flex h-11 w-11 shrink-0 items-center justify-center;
+}
+
+.detail-title-icon .list-icon-wrap,
+.detail-title-icon .list-icon-stack,
+.detail-title-icon .list-icon,
+.detail-title-icon .list-icon-fallback {
+  width: 40px;
+  height: 40px;
+}
+
+.detail-title-main {
+  @apply min-w-0;
+}
+
+.detail-folder-line {
+  @apply mt-1 flex min-w-0 items-center gap-1.5 text-xs font-semibold;
+  color: #667085;
+}
+
+.detail-folder-line span {
+  @apply min-w-0 overflow-hidden text-ellipsis whitespace-nowrap;
+}
+
+.detail-folder-line svg {
+  @apply shrink-0;
+}
+
 .totp-codes-list {
   @apply grid w-full items-start gap-2.5;
   grid-template-columns: repeat(var(--totp-columns, 1), minmax(300px, 1fr));
@@ -953,3 +984,12 @@
   @apply grid min-h-[120px] place-items-center;
   color: #667085;
 }
+
+.vault-error-state {
+  @apply gap-3 text-center;
+}
+
+.vault-error-state strong {
+  @apply text-sm;
+  color: var(--danger);
+}