feat: update mobile layout query to 1180px and enhance icon loading experience

webapp/src/styles/responsive.css

@@ -59,7 +59,7 @@
   }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1180px) {
   .auth-page {
     @apply items-start p-3.5;
   }
@@ -114,6 +114,10 @@
     @apply h-[34px] w-[34px];
   }
 
+  .brand-wordmark {
+    @apply hidden;
+  }
+
   .mobile-page-title {
     @apply inline;
   }
@@ -410,7 +414,7 @@
   .detail-actions {
     flex-direction: column;
     align-items: stretch;
-    gap: 10px;
+    gap: 5px;
   }
 
   .detail-actions .actions {
@@ -624,7 +628,7 @@
 }
 }
 
-@media (max-width: 900px) {
+@media (max-width: 1180px) {
   .backup-grid {
     grid-template-columns: 1fr;
   }

webapp/src/styles/tokens.css

@@ -29,7 +29,7 @@
   --dur-fast: 180ms;
   --dur-medium: 240ms;
   --dur-panel: 280ms;
-  --actions-gap: clamp(0px, calc((100vw - 520px) * 1), 10px);
+  --actions-gap: clamp(5px, calc((100vw - 520px) * 1), 10px);
 }
 
 :root[data-theme='dark'] {

webapp/src/styles/vault.css

@@ -1,6 +1,6 @@
 .vault-grid {
   @apply grid h-full min-h-0 gap-3 p-0.5;
-  grid-template-columns: 240px minmax(420px, 46%) minmax(575px, 1fr);
+  grid-template-columns: 270px minmax(400px, 36%) minmax(400px, 1fr);
 }
 
 .sidebar,
@@ -355,12 +355,38 @@
 
 .list-icon {
   @apply h-6 w-6 rounded-md;
+  opacity: 1;
+  transition: opacity var(--dur-fast) var(--ease-smooth);
+}
+
+.list-icon-stack {
+  @apply grid h-6 w-6 place-items-center;
+}
+
+.list-icon-stack > .list-icon,
+.list-icon-stack > .list-icon-fallback {
+  grid-area: 1 / 1;
+}
+
+.list-icon-stack > .list-icon {
+  opacity: 0;
+}
+
+.list-icon-stack > .list-icon.loaded {
+  opacity: 1;
+}
+
+.list-icon-fallback.hidden {
+  opacity: 0;
 }
 
 .list-icon-fallback {
   @apply grid place-items-center;
   color: #64748b;
-  transition: color var(--dur-fast) var(--ease-smooth), transform 240ms var(--ease-out-soft);
+  transition:
+    color var(--dur-fast) var(--ease-smooth),
+    opacity var(--dur-fast) var(--ease-smooth),
+    transform 240ms var(--ease-out-soft);
 }
 
 .list-icon-fallback svg {
@@ -615,7 +641,7 @@
 
 .totp-codes-list {
   @apply grid w-full items-start gap-2.5;
-  grid-template-columns: repeat(var(--totp-columns, 1), minmax(320px, 1fr));
+  grid-template-columns: repeat(var(--totp-columns, 1), minmax(300px, 1fr));
 }
 
 .totp-code-row {