From 1a15e9f44e60e5557bc2fcff37c0ca8e80de267d Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 7 Sep 2026 23:52:06 +0200
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20align=20feedback=20button?=
 =?UTF-8?q?s=20with=20rating=20card?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Match the button row width to the rating card (100%, max 410px) and
make both buttons share it equally so their edges line up with the card.
---
 src/frontend/src/features/rooms/components/Rating.tsx | 4 ++--
 src/frontend/src/features/rooms/routes/Feedback.tsx   | 5 +++--
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/frontend/src/features/rooms/components/Rating.tsx b/src/frontend/src/features/rooms/components/Rating.tsx
index 2f22c728..69a93fcc 100644
--- a/src/frontend/src/features/rooms/components/Rating.tsx
+++ b/src/frontend/src/features/rooms/components/Rating.tsx
@@ -16,7 +16,7 @@ const Card = styled('div', {
     borderRadius: '0.25rem',
     boxShadow: '',
     width: '100%',
-    maxWidth: '380px',
+    maxWidth: '410px',
     minHeight: '196px',
   },
 })
@@ -229,7 +229,7 @@ const ConfirmationMessage = ({ onNext }: { onNext: () => void }) => {
   return (
     <Card
       style={{
-        maxWidth: '380px',
+        maxWidth: '410px',
         display: 'flex',
         flexDirection: 'column',
         justifyContent: 'center',
diff --git a/src/frontend/src/features/rooms/routes/Feedback.tsx b/src/frontend/src/features/rooms/routes/Feedback.tsx
index 17e169ca..7e93ed69 100644
--- a/src/frontend/src/features/rooms/routes/Feedback.tsx
+++ b/src/frontend/src/features/rooms/routes/Feedback.tsx
@@ -24,7 +24,8 @@ const Heading = styled('h1', {
 })
 
 const buttonClass = css({
-  width: { base: '100%', xsm: 'auto' },
+  width: '100%',
+  flex: 1,
 })
 
 enum DisconnectReasonKey {
@@ -64,7 +65,7 @@ const FeedbackRoute = () => {
           <Heading>{t(`feedback.heading.${reasonKey || 'normal'}`)}</Heading>
           <Stack
             direction={{ base: 'column', xsm: 'row' }}
-            width={{ base: '100%', xsm: 'auto' }}
+            width="100%"
             maxWidth="410px"
           >
             {showBackButton && (