Summary of Changes: Mobile Viewport Optimization & Auth Session Persistence

1. Context & Motivation

• Issue 1 (UI Scaling & Text Wrapping): When viewing on standard Android devices (e.g., OPPO Reno 15 with 360px viewport), UI components appeared oversized compared to larger screens (such as iPhone 17 Pro Max with 440px viewport). Subtitles on the homepage and login page suffered from awkward orphan word line breaks (e.g., single words wrapping onto new lines). Furthermore, in the Profile page, role and status badges were forced onto multiple lines with empty vertical gaps under the avatar.
• Issue 2 (Session Persistence): Users were forced to re-login every time the Mini App was closed and reopened because tokens were overwritten with empty strings during initial app mount, and mobile WebViews do not reliably persist cross-origin cookies.

2. Key Changes

A. Mobile Viewport & Typography Optimization

• Responsive Root Scaling (app.scss):
  • Implemented dynamic base font-size (15px on screens <400px, 16px on screens >=400px) combined with -webkit-text-size-adjust: 100% and text-size-adjust: 100% to universally scale down rem-based spacing and components by ~6.25% on 360px Android devices without affecting larger iOS viewports.
  • Fine-tuned .page padding to 14px on mobile screens for improved usable horizontal width.
• Single-Line Subtitle Guarantees (index.tsx, login.tsx, register.tsx):
  • Removed [text-wrap:balance] which was splitting phrase boundaries in half.
  • Configured text-[12.5px] min-[390px]:text-sm whitespace-nowrap overflow-hidden text-ellipsis on the homepage subtitle ("Quản lý Tài chính Thông minh & Dự báo Dòng tiền"), ensuring it sits on a single line on both 360px and 440px viewports.
  • Standardized auth subtitles on login and register pages with text-xs sm:text-sm whitespace-nowrap to eliminate orphan words like "đầu".
• Profile User Card Restructuring (profile/index.tsx):
  • Redesigned the user card header into a balanced items-center layout between the avatar (64px) and the user identity block (Name, Email, Badges), eliminating dead space under the avatar.
  • Tuned badge padding and typography (text-[10.5px] px-2 py-0.5 whitespace-nowrap), allowing "SUPER_ADMIN" and "Đang hoạt động" to comfortably sit side-by-side on a single row.
  • Moved the divider and metadata details (User ID, Created At) to span the full width of the card.
• Component Sizing Adjustments (Button.tsx, Card.tsx, Badge.tsx):
  • Button: Reduced default styling from text-lg px-6 py-2.5 to mobile-first text-sm sm:text-base px-4 sm:px-5 py-2 sm:py-2.5.
  • Card: Updated default padding from p-6 to p-4 sm:p-5, reclaiming 16px of horizontal content space.
  • Badge: Compacted padding from px-3 py-1 to px-2.5 py-0.5.

B. Persistent Authentication & Token Refresh Flow

• Token Protection in Store (auth-store.ts):
  • Updated setAuth to only update safeStorage when valid, non-empty tokens are provided, preventing accidental overwriting with empty strings.
  • Separated setUser logic so profile updates do not alter authentication tokens.
• Session Auto-Recovery on App Launch (layout.tsx):
  • Replaced the hardcoded empty-string token initialization (setAuth(response.data, "", "")) with a resilient multi-stage recovery mechanism:
    1. Read stored accessToken and refreshToken from safeStorage.
    2. Attempt authService.getMe() with the active token.
    3. If getMe() fails (e.g., 30-minute access token expired), automatically call /auth/refresh using the 7-day refreshToken to obtain new credentials and restore the session transparently.
    4. Only clear auth state when both access and refresh tokens are invalid or expired.
• API & Interceptor Updates (auth.service.ts, api-client.ts):
  • Added authService.refresh() method.
  • Removed /auth/me from the blocked auth endpoint list in apiClient response interceptor to enable automatic silent refresh on 401s during active usage.