From c53a2f8af403a30320d710ac9b10ca8fd8d84049 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 10 Aug 2026 15:32:59 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20hide=20the=20ProConnec?=
 =?UTF-8?q?t=20button=20on=20narrow=20viewports?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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                       | 1 +
 src/frontend/src/layout/Header.tsx | 8 +++++++-
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index d78d98a2..8550403e 100644
--- a/CHANGELOG.md
+++ b/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
 
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index 550c774a..362d4a1a 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/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 />
                   </>
                 )}