fix(header): prevent mobile header overflow

Reduce responsive padding and gaps below 640 px, move nav labels to
lg breakpoint, and position the "view as" badge absolutely to prevent
horizontal scroll on narrow phones (360-414 px).

src/components/AppHeader.test.jsx

@@ -36,7 +36,7 @@ describe('AppHeader', () => {
         await vi.waitFor(() => expect(toast.error).toHaveBeenCalledWith('SETTINGS.ERROR_SAVE'));
     });
 
-    // jsdom applies no media queries, so the test hides the name the way the 380px breakpoint does.
+    // jsdom applies no media queries, so the test hides the name the way the 520px breakpoint does.
     it('keeps a name on the home link when a narrow phone hides the app name', () => {
         fetchRoutes({});
         renderWithProviders(<AppHeader isAuthenticated={false} onLogout={() => {}}/>);