🔖(minor) bump release to 1.28.0

CHANGELOG.md

@@ -8,12 +8,6 @@ and this project adheres to
 
 ## [Unreleased]
 
-### Changed
-
-- 📱(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
 
 ### Added

src/frontend/src/features/layout/components/ControlBarRegion.tsx

@@ -13,7 +13,7 @@ const controlBarRegion = cva({
     mobile: {
       true: {
         justifyContent: 'center',
-        width: '100%',
+        width: '330px',
       },
     },
   },

src/frontend/src/features/reactions/components/ReactionsToggle.tsx

@@ -1,3 +1,4 @@
+import { useCallback } from 'react'
 import { useTranslation } from 'react-i18next'
 import { RiEmotionLine } from '@remixicon/react'
 import { ToggleButton } from '@/primitives'
@@ -6,8 +7,6 @@ import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKey
 import { REACTIONS_TOOLBAR_ID } from '../constants'
 import { useReactionsToolbar } from '../hooks/useReactionsToolbar'
 import { layoutStore } from '@/stores/layout'
-import { type ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 const focusReactionsToolbar = () => {
   document
@@ -18,44 +17,35 @@ const focusReactionsToolbar = () => {
 
 export const REACTIONS_TOGGLE_ID = 'reactions-toggle'
 
-/* eslint-disable react-refresh/only-export-components */
+export const ReactionsToggle = () => {
-export const reactionShortcutHandler = () => {
-  if (layoutStore.showReactionsToolbar) {
-    focusReactionsToolbar()
-  } else {
-    layoutStore.showReactionsToolbar = true
-  }
-}
-
-type Props = Pick<NonNullable<ButtonRecipeProps>, 'variant'> & ToggleButtonProps
-
-export const ReactionsToggle = ({
-  variant = 'primaryDark',
-  onPress,
-  ...props
-}: Props) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.reactions' })
 
   const { isOpen, toggle } = useReactionsToolbar()
 
+  const handleShortcut = useCallback(() => {
+    if (layoutStore.showReactionsToolbar) {
+      focusReactionsToolbar()
+    } else {
+      layoutStore.showReactionsToolbar = true
+    }
+  }, [])
+
   useRegisterKeyboardShortcut({
     id: 'reaction',
-    handler: reactionShortcutHandler,
+    handler: handleShortcut,
   })
 
   return (
     <ToggleButton
-      {...props}
       id={REACTIONS_TOGGLE_ID}
       data-attr="reactions-toggle"
       square
-      variant={variant}
+      variant="primaryDark"
       aria-label={t('button')}
       aria-expanded={isOpen}
       tooltip={t('button')}
       isSelected={isOpen}
       onChange={toggle}
-      onPress={onPress}
     >
       <RiEmotionLine />
     </ToggleButton>

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

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

src/frontend/src/features/rooms/livekit/components/IsIdleDisconnectModal.tsx

@@ -3,7 +3,7 @@ import { useTranslation } from 'react-i18next'
 import { css } from '@/styled-system/css'
 import { useSnapshot } from 'valtio'
 import { connectionObserverStore } from '@/stores/connectionObserver'
-import { Stack } from '@/styled-system/jsx'
+import { HStack } from '@/styled-system/jsx'
 import { useEffect, useRef, useState } from 'react'
 import { navigateTo } from '@/navigation/navigateTo'
 import { useScreenReaderAnnounce } from '@/hooks/useScreenReaderAnnounce'
@@ -134,11 +134,7 @@ export const IsIdleDisconnectModal = () => {
             </H>
             <Description />
             <Settings />
-            <Stack
+            <HStack marginTop="2rem">
-              direction={{ base: 'column', xsm: 'row' }}
-              align={{ base: 'stretch', xsm: 'center' }}
-              marginTop="2rem"
-            >
               <Button
                 onPress={() => {
                   connectionObserverStore.isIdleDisconnectModalOpen = false
@@ -152,7 +148,7 @@ export const IsIdleDisconnectModal = () => {
               <Button onPress={close} size="sm" variant="primary">
                 {t('stayButton')}
               </Button>
-            </Stack>
+            </HStack>
           </div>
         )
       }}

src/frontend/src/features/rooms/livekit/components/controls/HandToggle.tsx

@@ -10,18 +10,10 @@ import {
   showLowerHandToast,
 } from '@/features/notifications/utils'
 import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { type ButtonRecipeProps } from '@/primitives/buttonRecipe'
-import { ToggleButtonProps } from '@/primitives/ToggleButton'
 
 const SPEAKING_DETECTION_DELAY = 3000
 
-type Props = Pick<NonNullable<ButtonRecipeProps>, 'variant'> & ToggleButtonProps
+export const HandToggle = () => {
-
-export const HandToggle = ({
-  variant = 'primaryDark',
-  onPress,
-  ...props
-}: Props) => {
   const { t } = useTranslation('rooms', { keyPrefix: 'controls.hand' })
 
   const room = useRoomContext()
@@ -82,16 +74,12 @@ export const HandToggle = ({
       })}
     >
       <ToggleButton
-        {...props}
         square
-        variant={variant}
+        variant="primaryDark"
         aria-label={t(tooltipLabel)}
         tooltip={t(tooltipLabel)}
         isSelected={isHandRaised}
-        onPress={(e) => {
+        onPress={handleToggle}
-          handleToggle()
-          onPress?.(e)
-        }}
         data-attr={`controls-hand-${tooltipLabel}`}
       >
         <RiHand />

src/frontend/src/features/rooms/livekit/prefabs/ControlBar/MobileControlBar.tsx

@@ -1,7 +1,7 @@
 import { supportsScreenSharing } from '@livekit/components-core'
 import { useTranslation } from 'react-i18next'
 import type { ControlBarAuxProps } from './ControlBar'
-import React, { useLayoutEffect, useRef, useState } from 'react'
+import React from 'react'
 import { css } from '@/styled-system/css'
 import { LeaveButton } from '../../components/controls/LeaveButton'
 import { Track } from 'livekit-client'
@@ -26,26 +26,7 @@ import { AudioDevicesControl } from '../../components/controls/Device/AudioDevic
 import { VideoDeviceControl } from '../../components/controls/Device/VideoDeviceControl'
 import { openSettingsDialog } from '@/stores/settings'
 import { ControlBarRegion } from '@/features/layout/components/ControlBarRegion'
-import {
+import { ReactionsToggle } from '@/features/reactions/components/ReactionsToggle'
-  ReactionsToggle,
-  reactionShortcutHandler,
-} from '@/features/reactions/components/ReactionsToggle'
-import { useSize } from '../../hooks/useResizeObserver'
-import { useRegisterKeyboardShortcut } from '@/features/shortcuts/useRegisterKeyboardShortcut'
-import { useRaisedHand } from '@/features/rooms/livekit/hooks/useRaisedHand'
-import { useRoomContext } from '@livekit/components-react'
-
-// Hand collapses first, then reactions; hidden toggles move into the menu.
-const COLLAPSIBLE_COUNT = 2
-
-// Layout-neutral measuring wrapper: inherits the region's gap and refuses to
-// flex-shrink so measured widths are natural content widths.
-const measuredRow = css({
-  display: 'inline-flex',
-  alignItems: 'center',
-  gap: 'inherit',
-  flexShrink: 0,
-})
 
 export function MobileControlBar({
   onDeviceError,
@@ -55,107 +36,50 @@ export function MobileControlBar({
   const browserSupportsScreenSharing = supportsScreenSharing()
   const { toggleEffects } = useSidePanel()
 
-  const containerRef = useRef<HTMLDivElement>(null)
-  const { width } = useSize(containerRef)
-  const barRef = useRef<HTMLDivElement>(null)
-  const { width: barWidth } = useSize(barRef)
-  const collapsibleRef = useRef<HTMLDivElement>(null)
-  const { width: collapsibleWidth } = useSize(collapsibleRef)
-
-  const [hiddenCount, setHiddenCount] = useState(0)
-  const calibration = useRef<{ essential: number; slot: number }>()
-
-  useLayoutEffect(() => {
-    if (hiddenCount === 0 && collapsibleWidth > 0 && barRef.current) {
-      const gap = parseFloat(getComputedStyle(barRef.current).columnGap) || 0
-      calibration.current = {
-        essential: barWidth - collapsibleWidth - gap,
-        slot: (collapsibleWidth + gap) / COLLAPSIBLE_COUNT,
-      }
-    }
-    if (!calibration.current || width <= 0) return
-    const { essential, slot } = calibration.current
-    const fits = Math.floor((width - essential) / slot)
-    const next = Math.min(
-      COLLAPSIBLE_COUNT,
-      Math.max(0, COLLAPSIBLE_COUNT - fits)
-    )
-    if (next !== hiddenCount) setHiddenCount(next)
-  }, [barWidth, collapsibleWidth, hiddenCount, width, setHiddenCount])
-
-  const hideHand = hiddenCount >= 1
-  const hideReactions = hiddenCount >= 2
-
-  const room = useRoomContext()
-  const { toggleRaisedHand } = useRaisedHand({
-    participant: room.localParticipant,
-  })
-  useRegisterKeyboardShortcut({
-    id: 'raise-hand',
-    handler: toggleRaisedHand,
-  })
-  useRegisterKeyboardShortcut({
-    id: 'reaction',
-    handler: reactionShortcutHandler,
-  })
-
   const { data } = useConfig()
 
-  const closeMenu = () => setIsMenuOpened(false)
-
   return (
     <>
       <div
         className={css({
           width: '100vw',
+          display: 'flex',
           padding: '1.125rem',
+          justifyContent: 'center',
         })}
       >
-        <div
+        <ControlBarRegion mobile>
-          ref={containerRef}
+          <LeaveButton />
-          className={css({
+          <AudioDevicesControl
-            width: '100%',
+            onDeviceError={(error) =>
-            display: 'flex',
+              onDeviceError?.({ source: Track.Source.Microphone, error })
-            justifyContent: 'center',
+            }
-          })}
+            hideMenu={true}
-        >
+          />
-          <ControlBarRegion mobile>
+          <VideoDeviceControl
-            <div ref={barRef} className={measuredRow}>
+            onDeviceError={(error) =>
-              <LeaveButton />
+              onDeviceError?.({ source: Track.Source.Camera, error })
-              <AudioDevicesControl
+            }
-                onDeviceError={(error) =>
+            hideMenu={true}
-                  onDeviceError?.({ source: Track.Source.Microphone, error })
+          />
-                }
+          <ReactionsToggle />
-                hideMenu={true}
+          <HandToggle />
-              />
+          <Button
-              <VideoDeviceControl
+            id="room-options-trigger"
-                onDeviceError={(error) =>
+            square
-                  onDeviceError?.({ source: Track.Source.Camera, error })
+            variant="primaryDark"
-                }
+            aria-label={t('options.buttonLabel')}
-                hideMenu={true}
+            tooltip={t('options.buttonLabel')}
-              />
+            onPress={() => setIsMenuOpened(true)}
-              {/* Unmounted when empty so it doesn't leave a stray gap. */}
+          >
-              {!hideReactions && (
+            <RiMore2Line />
-                <div ref={collapsibleRef} className={measuredRow}>
+          </Button>
-                  <ReactionsToggle />
+        </ControlBarRegion>
-                  {!hideHand && <HandToggle />}
-                </div>
-              )}
-              <Button
-                id="room-options-trigger"
-                square
-                variant="primaryDark"
-                aria-label={t('options.buttonLabel')}
-                tooltip={t('options.buttonLabel')}
-                onPress={() => setIsMenuOpened(true)}
-              >
-                <RiMore2Line />
-              </Button>
-            </div>
-          </ControlBarRegion>
-        </div>
       </div>
-      <ResponsiveMenu isOpened={isMenuOpened} onClosed={closeMenu}>
+      <ResponsiveMenu
+        isOpened={isMenuOpened}
+        onClosed={() => setIsMenuOpened(false)}
+      >
         <div
           className={css({
             display: 'flex',
@@ -174,20 +98,6 @@ export function MobileControlBar({
               },
             })}
           >
-            {hideReactions && (
-              <ReactionsToggle
-                variant="primaryTextDark"
-                description={true}
-                onPress={closeMenu}
-              />
-            )}
-            {hideHand && (
-              <HandToggle
-                variant="primaryTextDark"
-                description={true}
-                onPress={closeMenu}
-              />
-            )}
             {browserSupportsScreenSharing && (
               <ScreenShareToggle
                 onDeviceError={(error) =>
@@ -195,16 +105,25 @@ export function MobileControlBar({
                 }
                 variant="primaryTextDark"
                 description={true}
-                onPress={closeMenu}
+                onPress={() => setIsMenuOpened(false)}
               />
             )}
-            <ChatToggle description={true} onPress={closeMenu} />
+            <ChatToggle
-            <ParticipantsToggle description={true} onPress={closeMenu} />
+              description={true}
-            <ToolsToggle description={true} onPress={closeMenu} />
+              onPress={() => setIsMenuOpened(false)}
+            />
+            <ParticipantsToggle
+              description={true}
+              onPress={() => setIsMenuOpened(false)}
+            />
+            <ToolsToggle
+              description={true}
+              onPress={() => setIsMenuOpened(false)}
+            />
             <Button
               onPress={() => {
                 toggleEffects()
-                closeMenu()
+                setIsMenuOpened(false)
               }}
               variant="primaryTextDark"
               aria-label={t('options.items.effects')}
@@ -221,7 +140,7 @@ export function MobileControlBar({
                 aria-label={t('options.items.feedback')}
                 description={true}
                 target="_blank"
-                onPress={closeMenu}
+                onPress={() => setIsMenuOpened(false)}
               >
                 <RiMegaphoneLine size={20} />
               </LinkButton>
@@ -229,7 +148,7 @@ export function MobileControlBar({
             <Button
               onPress={() => {
                 openSettingsDialog()
-                closeMenu()
+                setIsMenuOpened(false)
               }}
               variant="primaryTextDark"
               aria-label={t('options.items.settings')}
@@ -238,7 +157,7 @@ export function MobileControlBar({
             >
               <RiSettings3Line size={20} />
             </Button>
-            <CameraSwitchButton onPress={closeMenu} />
+            <CameraSwitchButton onPress={() => setIsMenuOpened(false)} />
           </div>
         </div>
       </ResponsiveMenu>

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

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