From e1cc8105dba020f8d40c72793e72d334a5a2497d 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 && (