Split desktop and mobile layouts with shared page data so APIs fetch once per context.

Add layout shells, desktop views, module-level page caches, and UI fixes for auth, home, wallet, transactions, address, and related pages. Co-authored-by: Cursor <cursoragent@cursor.com>
2026-06-14 10:08:46 +03:30
parent 4404b4cb92
commit a5e458ed25
234 changed files with 18425 additions and 5503 deletions
@@ -0,0 +1,126 @@
+@desktop-layout-min: 768px;
+@mobile-frame-max: 767.98px;
+
+/**
+ * Full-width desktop shell — applies on first paint (no JS class needed).
+ * Sidebar-specific wrap-fix offset stays on html.app-layout--desktop.
+ */
+@media screen and (min-width: @desktop-layout-min) {
+  html {
+    width: 100%;
+    overflow-x: hidden;
+  }
+
+  body {
+    display: block;
+    width: 100%;
+    min-width: 100%;
+    margin: 0;
+    padding: 0;
+  }
+
+  #app {
+    width: 100%;
+    max-width: none;
+    min-height: 100vh;
+  }
+
+  .desktopConfig {
+    position: static !important;
+    width: 100% !important;
+    max-width: none !important;
+    min-height: 100vh;
+    left: auto !important;
+    right: auto !important;
+  }
+
+  .wrap-fix {
+    width: auto !important;
+    max-width: none !important;
+    left: 0 !important;
+    right: 0 !important;
+  }
+
+  :root {
+    --app-credit-bar-inner: 0px;
+    --app-credit-footer-offset: 0px;
+  }
+
+  .app-credit-footer {
+    display: none !important;
+  }
+
+  /* Teleport to body escapes parent v-show — hide mobile dock chrome on desktop */
+  .app-dock-add-bar,
+  .wallet-card-slider {
+    display: none !important;
+  }
+
+  .transaction-list,
+  .card-slider-wrap {
+    width: 100% !important;
+    max-width: none !important;
+    left: 0 !important;
+    right: 0 !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
+}
+
+html.app-layout--desktop {
+  @media screen and (min-width: @desktop-layout-min) {
+    .wrap-fix {
+      right: var(--app-desktop-sidebar-width, 260px) !important;
+    }
+  }
+
+  &.app-layout--desktop-no-sidebar .wrap-fix {
+    right: 0 !important;
+  }
+}
+
+/* Splash — always full viewport; never sidebar-offset */
+.app-splash-screen {
+  position: fixed;
+  inset: 0;
+  width: 100vw;
+  min-height: 100vh;
+  max-width: none;
+  left: 0 !important;
+  right: 0 !important;
+  z-index: 1000000000000;
+
+  &__gradient {
+    position: absolute;
+    left: 0;
+    right: 0;
+    width: 100%;
+
+    &--top {
+      top: 0;
+    }
+
+    &--bottom {
+      bottom: 0;
+    }
+  }
+}
+
+html.app-layout--desktop .app-splash-screen {
+  right: 0 !important;
+  left: 0 !important;
+  width: 100vw !important;
+}
+
+/* Login — full viewport on desktop */
+html.app-layout--desktop {
+  .login-page-root,
+  .dauth {
+    width: 100% !important;
+    min-height: 100vh;
+  }
+
+  .dauth__layout {
+    min-height: 100vh;
+  }
+}
@@ -0,0 +1,84 @@
+/**
+ * Mobile shell width rules.
+ * Below 426px: full viewport (phones).
+ * 426px–767px: centered 426px frame (tablet-ish mobile).
+ */
+
+html:not(.app-layout--desktop) {
+  /* Teleport to body — dock bar must span viewport, not shrink to content */
+  .app-dock-add-bar,
+  .wallet-card-slider {
+    box-sizing: border-box;
+  }
+
+  @media screen and (max-width: 425.98px) {
+    body {
+      display: block !important;
+      width: 100% !important;
+      overflow-x: hidden;
+    }
+
+    #app,
+    .desktopConfig,
+    .app-main,
+    .main-with-bottom-chrome,
+    .main-with-bottom-chrome-inner {
+      width: 100% !important;
+      max-width: 100vw !important;
+      min-width: 0 !important;
+      margin: 0 !important;
+    }
+
+    .wrap-fix,
+    .bottom-appbar {
+      width: 100% !important;
+      max-width: 100vw !important;
+      left: 0 !important;
+      right: 0 !important;
+      margin: 0 !important;
+      transform: none !important;
+    }
+
+    .app-dock-add-bar,
+    .wallet-card-slider {
+      width: 100% !important;
+      max-width: 100vw !important;
+      left: 0 !important;
+      right: 0 !important;
+      margin: 0 !important;
+      transform: none !important;
+    }
+  }
+
+  @media screen and (min-width: 426px) and (max-width: 767.98px) {
+    body {
+      display: flex !important;
+      justify-content: center;
+    }
+
+    .desktopConfig {
+      width: 426px !important;
+      max-width: 426px !important;
+    }
+
+    .wrap-fix,
+    .bottom-appbar {
+      width: 426px !important;
+      max-width: 426px !important;
+      left: 50% !important;
+      right: auto !important;
+      margin: 0 !important;
+      transform: translateX(-50%) !important;
+    }
+
+    .app-dock-add-bar,
+    .wallet-card-slider {
+      width: 426px !important;
+      max-width: 426px !important;
+      left: 50% !important;
+      right: auto !important;
+      margin: 0 !important;
+      transform: translateX(-50%) !important;
+    }
+  }
+}