💄(frontend) hide the ProConnect button on narrow viewports

Hide the ProConnect button (only used by the Dinum frontend) when
the device viewport is not wide enough to display it cleanly, so it
does not overflow or break the layout on smaller screens.

CHANGELOG.md

@@ -20,6 +20,7 @@ and this project adheres to
 - ♻️(frontend) encapsulate error tracking behind a telemetry module
 - ♻️(frontend) encapsulate PostHog capture calls in the telemetry module
 - 🔧(frontend) sync persisted device ids with the actual selected devices
+- 💄(frontend) hide the ProConnect button on narrow viewports
 
 ### Fixed
 

src/frontend/src/layout/Header.tsx

@@ -169,7 +169,13 @@ export const Header = () => {
                 !isTermsOfService &&
                 !loginButtonDisabledByUrl && (
                   <>
-                    <LoginButton proConnectHint={false} />
+                    <div
+                      className={css({
+                        display: { base: 'none', xsm: 'block' },
+                      })}
+                    >
+                      <LoginButton proConnectHint={false} />
+                    </div>
                     <LoginHint />
                   </>
                 )}