📱(frontend) improve feedback screen responsiveness on mobile

Tighten the feedback screen layout on mobile viewports so it fits
comfortably on small phone screens and reads naturally without
horizontal scroll or cramped controls.

CHANGELOG.md

@@ -12,6 +12,7 @@ and this project adheres to
 
 - 📱(frontend) collapse mobile control bar items on narrow viewports
 - 📱(frontend) stack idle modal buttons in a column on mobile
+- 📱(frontend) improve feedback screen responsiveness on mobile
 
 ## [1.28.0] - 2026-08-24
 

src/frontend/src/features/rooms/components/Rating.tsx

@@ -15,7 +15,8 @@ const Card = styled('div', {
     marginTop: '1.5rem',
     borderRadius: '0.25rem',
     boxShadow: '',
-    minWidth: '380px',
+    width: '100%',
+    maxWidth: '380px',
     minHeight: '196px',
   },
 })
@@ -37,8 +38,11 @@ const ratingButtonRecipe = cva({
     color: 'initial',
     border: 'none',
     borderRadius: 0,
-    padding: '0.5rem 0.85rem',
+    padding: { base: '0.5rem 0.25rem', xsm: '0.5rem 0.85rem' },
     flexGrow: '1',
+    flexBasis: 0,
+    minWidth: 0,
+    textAlign: 'center',
     cursor: 'pointer',
   },
   variants: {
@@ -99,7 +103,9 @@ const OpenFeedback = ({
 
   return (
     <Card>
-      <H lvl={3}>{t('question')}</H>
+      <H lvl={3} centered>
+        {t('question')}
+      </H>
       <TextArea
         id="feedbackInput"
         name="feedback"
@@ -168,7 +174,9 @@ const RateQuality = ({
 
   return (
     <Card>
-      <H lvl={3}>{t('question')}</H>
+      <H lvl={3} centered>
+        {t('question')}
+      </H>
       <Bar>
         {[...Array(maxRating)].map((_, index) => (
           <RACButton
@@ -228,7 +236,9 @@ const ConfirmationMessage = ({ onNext }: { onNext: () => void }) => {
       }}
     >
       <VStack gap={0}>
-        <H lvl={3}>{t('heading')}</H>
+        <H lvl={3} centered>
+          {t('heading')}
+        </H>
         <Text as="p" variant="paragraph" centered>
           {t('body')}
         </Text>

src/frontend/src/features/rooms/routes/Feedback.tsx

@@ -1,7 +1,8 @@
 import { useTranslation } from 'react-i18next'
 import { Button } from '@/primitives'
 import { Screen } from '@/layout/Screen'
-import { Center, HStack, styled, VStack } from '@/styled-system/jsx'
+import { Center, Stack, styled, VStack } from '@/styled-system/jsx'
+import { css } from '@/styled-system/css'
 import { Rating } from '@/features/rooms/components/Rating.tsx'
 import { useLocation } from 'wouter'
 import { useMemo } from 'react'
@@ -14,14 +15,18 @@ const Heading = styled('h1', {
     fontStyle: 'normal',
     fontStretch: 'normal',
     fontOpticalSizing: 'auto',
-    fontSize: '2.3rem',
-    lineHeight: '2.5rem',
+    fontSize: { base: '1.75rem', xsm: '2.3rem' },
+    lineHeight: { base: '2.125rem', xsm: '2.5rem' },
     letterSpacing: '0',
-    paddingBottom: '2rem',
+    paddingBottom: { base: '1.5rem', xsm: '2rem' },
     textAlign: 'center',
   },
 })
 
+const buttonClass = css({
+  width: { base: '100%', xsm: 'auto' },
+})
+
 enum DisconnectReasonKey {
   DuplicateIdentity = 'duplicateIdentity',
   ParticipantRemoved = 'participantRemoved',
@@ -54,19 +59,31 @@ const FeedbackRoute = () => {
 
   return (
     <Screen layout="centered" footer={false}>
-      <Center>
-        <VStack>
+      <Center width="100%">
+        <VStack width="100%" paddingX="1rem">
           <Heading>{t(`feedback.heading.${reasonKey || 'normal'}`)}</Heading>
-          <HStack>
+          <Stack
+            direction={{ base: 'column', xsm: 'row' }}
+            width={{ base: '100%', xsm: 'auto' }}
+            maxWidth="380px"
+          >
             {showBackButton && (
-              <Button variant="secondary" onPress={() => window.history.back()}>
+              <Button
+                variant="secondary"
+                className={buttonClass}
+                onPress={() => window.history.back()}
+              >
                 {t('feedback.back')}
               </Button>
             )}
-            <Button variant="primary" onPress={() => setLocation('/')}>
+            <Button
+              variant="primary"
+              className={buttonClass}
+              onPress={() => setLocation('/')}
+            >
               {t('feedback.home')}
             </Button>
-          </HStack>
+          </Stack>
           <Rating metadata={metadata} />
         </VStack>
       </Center>