From 03dfea3aac35a1904f71b4d612a5849bac1d6d15 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 be792c24..ee5f2acb 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -30,6 +30,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 && (