style(web): update styles

- app.css: update app-level styles
- global.css: update global styles
- backend-unavailable-view.css: update backend unavailable view styles
- login-view.css: update login view styles
- setup-view.css: update setup view styles
- travel-reimbursement-create-view.css: update travel form styles

web/src/assets/styles/app.css

@@ -1,12 +1,28 @@
-.app {
+.app-desktop-shell {
+  width: 100vw;
   min-height: 100dvh;
+  height: 100dvh;
+  overflow: hidden;
+  background: var(--bg);
+}
+
+.app-desktop-stage {
+  position: relative;
+  width: var(--desktop-stage-width, 100vw);
+  min-height: var(--desktop-stage-height, 100dvh);
+  transform: scale(var(--desktop-ui-scale, 1));
+  transform-origin: top left;
+}
+
+.app {
+  min-height: var(--desktop-stage-height, 100dvh);
   display: grid;
   grid-template-columns: 220px minmax(0, 1fr);
   background: var(--bg);
 }
 
 .boot-state {
-  min-height: 100dvh;
+  min-height: var(--desktop-stage-height, 100dvh);
   display: grid;
   place-items: center;
   padding: 24px;
@@ -74,7 +90,7 @@
   grid-template-rows: auto minmax(0, 1fr);
 }
 .main.chat-main {
-  height: 100dvh;
+  height: var(--desktop-stage-height, 100dvh);
   grid-template-rows: auto minmax(0, 1fr);
   overflow: hidden;
 }
@@ -84,7 +100,7 @@
 .main.audit-main,
 .main.employees-main,
 .main.settings-main {
-  height: 100dvh;
+  height: var(--desktop-stage-height, 100dvh);
   grid-template-rows: auto minmax(0, 1fr);
   overflow: hidden;
 }

web/src/assets/styles/global.css

@@ -23,10 +23,15 @@
   --nav-muted: #7d89a5;
   --radius: 8px;
   --ease: cubic-bezier(.2, .8, .2, 1);
+  --desktop-ui-scale: 1;
+  --desktop-ui-inverse-scale: 1;
+  --desktop-stage-width: 100vw;
+  --desktop-stage-height: 100dvh;
   font-family: "LXGW WenKai", Inter, "SF Pro Display", "PingFang SC", sans-serif;
 }
 
 * { box-sizing: border-box; }
+html, body, #app { min-height: 100%; }
 body { margin: 0; min-height: 100dvh; color: var(--text); background: var(--bg); }
 .mdi { line-height: 1; vertical-align: middle; }
 button, input, select, textarea { font: inherit; }

web/src/assets/styles/views/backend-unavailable-view.css

@@ -1,5 +1,5 @@
 .backend-unavailable {
-  min-height: 100vh;
+  min-height: var(--desktop-stage-height, 100dvh);
   display: grid;
   place-items: center;
   padding: 32px;

web/src/assets/styles/views/login-view.css

@@ -1,6 +1,6 @@
 .login-page {
   position: relative;
-  min-height: 100dvh;
+  min-height: var(--desktop-stage-height, 100dvh);
   display: grid;
   grid-template-columns: minmax(620px, .96fr) minmax(520px, .84fr);
   justify-content: center;
@@ -660,7 +660,7 @@
 
 @media (max-width: 980px) {
   .login-page {
-    min-height: 100dvh;
+    min-height: var(--desktop-stage-height, 100dvh);
     grid-template-columns: 1fr;
     padding: 92px 28px 28px;
     overflow: auto;

web/src/assets/styles/views/setup-view.css

@@ -1,7 +1,7 @@
-.setup-page {
-  min-height: 100dvh;
-  display: grid;
-  grid-template-columns: minmax(320px, 392px) minmax(0, 1fr);
+.setup-page {
+  min-height: var(--desktop-stage-height, 100dvh);
+  display: grid;
+  grid-template-columns: minmax(320px, 392px) minmax(0, 1fr);
   background:
     radial-gradient(circle at top left, rgba(16, 185, 129, 0.24), transparent 24rem),
     radial-gradient(circle at 36% 14%, rgba(16, 185, 129, 0.16), transparent 18rem),