From 7e32219797317c2dd1363ee5e4c0f29e96684445 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Sun, 6 Sep 2026 23:09:41 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20position=20the=20login?=
 =?UTF-8?q?=20hint=20dynamically=20next=20to=20the=20button?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Compute the position of the login hint at render time so it is
always displayed close to the login button, regardless of the
button's placement or the current viewport size.
---
 CHANGELOG.md                       |  1 +
 src/frontend/src/layout/Header.tsx | 22 +++++++---------------
 2 files changed, 8 insertions(+), 15 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 319b8b18..57251e42 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -32,6 +32,7 @@ and this project adheres to
 - ⚡️(frontend) add trailing slash on the /me endpoint call
 - ⚡️(backend) refactor lobby storage to bound key lookups per room
 - ⚡️(backend) refactor presence cache to bound key lookups per room
+- 💄(frontend) position the login hint dynamically next to the button
 
 ## [1.30.0] - 2026-09-01
 
diff --git a/src/frontend/src/layout/Header.tsx b/src/frontend/src/layout/Header.tsx
index 362d4a1a..76fe4e3e 100644
--- a/src/frontend/src/layout/Header.tsx
+++ b/src/frontend/src/layout/Header.tsx
@@ -35,30 +35,21 @@ const LoginHint = () => {
     <div
       className={css({
         position: 'absolute',
-        top: '103px',
-        right: '110px',
+        top: 'calc(100% + 12px)',
+        right: 0,
         zIndex: '100',
         outline: 'none',
         padding: '1.25rem',
-        maxWidth: '350px',
+        width: 'max-content',
+        maxWidth: 'min(350px, calc(100vw - 2rem))',
         boxShadow: '0 2px 5px rgba(0 0 0 / 0.1)',
         borderRadius: '1rem',
         backgroundColor: 'primary.200',
-        display: 'none',
-        xsm: {
-          display: 'block',
-        },
-        sm: {
-          top: '131px',
-          right: '100px',
-          zIndex: '100',
-        },
         _after: {
           content: '""',
           position: 'absolute',
           top: '-10px',
-          right: '20%',
-          marginLeft: '-10px',
+          right: '1.5rem',
           borderWidth: '0 10px 10px 10px',
           borderStyle: 'solid',
           borderColor: 'transparent transparent #E3E3FB transparent',
@@ -171,12 +162,13 @@ export const Header = () => {
                   <>
                     <div
                       className={css({
+                        position: 'relative',
                         display: { base: 'none', xsm: 'block' },
                       })}
                     >
                       <LoginButton proConnectHint={false} />
+                      <LoginHint />
                     </div>
-                    <LoginHint />
                   </>
                 )}
               {!!user && (