fix mobile screen issues

vite.config.js

@@ -29,5 +29,40 @@ export default defineConfig({
   server: {
     // Honor a port assigned by the environment; fall back to Vite's default.
     port: process.env.PORT ? Number(process.env.PORT) : 5173,
+
+    /**
+     * Proxy the API so the browser only ever talks to one origin.
+     *
+     * This exists for the session cookie. The cookie is HttpOnly with
+     * SameSite=Lax, and a Lax cookie is not sent on a cross-site subresource
+     * request — which is exactly what `fetch('http://127.0.0.1:8080/...')` from
+     * a page served by `http://localhost:5173` is, because a browser treats
+     * those two as different sites. Every request after login would arrive
+     * without the cookie and be answered 401.
+     *
+     * The alternatives are both worse. SameSite=None would send the cookie on
+     * genuine cross-site requests too, which is the CSRF hole Lax closes, and
+     * it requires Secure — so it cannot work over plain HTTP on localhost at
+     * all. Widening CORS with credentials would keep the cross-site problem and
+     * add a second one.
+     *
+     *   browser → localhost:5173/api/v1 → this proxy → 127.0.0.1:8080/api/v1
+     *
+     * Same origin from the browser's point of view, so the cookie is a
+     * first-party cookie, CORS never enters into it, and nothing in the React
+     * code names a backend host.
+     *
+     * Production serves the built assets and the API from one origin (see
+     * nginx.conf), so this is a development-only shim for a property the
+     * deployed app has for free.
+     */
+    proxy: {
+      '/api': {
+        target: process.env.VITE_API_PROXY_TARGET || 'http://127.0.0.1:8080',
+        // The API does not route on Host, and rewriting it would make the
+        // Origin the backend sees disagree with the one the browser sent.
+        changeOrigin: false,
+      },
+    },
   },
 });