Update captions banner width and height to increase readability (#3359)

* captions size change

* Change files

* Duplicate change files for beta release

* Update packages/react-composites CallWithChatComposite browser test snapshots

* Update packages/react-composites CallComposite browser test snapshots

* fix lint

* fix storybook

* fix storybook

* change name;

---------

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: carocao-msft

change-beta/@azure-communication-react-df2fc150-ffbd-4e1a-bb90-ad1ea5304bf2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update captions banner width and height for better readibility",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-df2fc150-ffbd-4e1a-bb90-ad1ea5304bf2.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Update captions banner width and height for better readibility",
+  "packageName": "@azure/communication-react",
+  "email": "carolinecao@microsoft.com",
+  "dependentChangeType": "patch"
+}

packages/react-components/src/components/CaptionsBanner.tsx

@@ -7,9 +7,9 @@ import { Ref } from '@internal/northstar-wrapper';
 import { _Caption } from './Caption';
 import {
   captionContainerClassName,
-  captionsBannerClassName,
+  captionsBannerStyles,
   captionsContainerClassName,
-  loadingBannerClassName
+  loadingBannerStyles
 } from './styles/Captions.style';
 import { OnRenderAvatarCallback } from '../types';
 
@@ -102,7 +102,7 @@ export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
         <FocusZone as="ul" className={captionsContainerClassName}>
           {isCaptionsOn && (
             <Ref innerRef={captionsScrollDivRef}>
-              <Stack verticalAlign="start" styles={captionsBannerClassName(formFactor)}>
+              <Stack verticalAlign="start" styles={captionsBannerStyles(formFactor)}>
                 {captions.map((caption) => {
                   return (
                     <div key={caption.id} className={captionContainerClassName} data-is-focusable={true}>
@@ -114,7 +114,7 @@ export const _CaptionsBanner = (props: _CaptionsBannerProps): JSX.Element => {
             </Ref>
           )}
           {!isCaptionsOn && (
-            <Stack verticalAlign="center" className={loadingBannerClassName} data-is-focusable={true}>
+            <Stack verticalAlign="center" styles={loadingBannerStyles(formFactor)} data-is-focusable={true}>
               <Spinner label={strings?.captionsBannerSpinnerText} ariaLive="assertive" labelPosition="right" />
             </Stack>
           )}

packages/react-components/src/components/styles/Captions.style.ts

@@ -51,11 +51,11 @@ export const captionContainerClassName = mergeStyles({
 /**
  * @private
  */
-export const captionsBannerClassName = (formFactor: 'default' | 'compact'): IStackStyles => {
+export const captionsBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {
   return {
     root: {
       overflowX: 'hidden',
-      height: formFactor === 'compact' ? '4.5rem' : '6.25rem',
+      height: formFactor === 'compact' ? '4.5rem' : '8.75rem',
       overflowY: 'auto',
       ...scrollbarStyles
     }
@@ -65,9 +65,13 @@ export const captionsBannerClassName = (formFactor: 'default' | 'compact'): ISta
 /**
  * @private
  */
-export const loadingBannerClassName = mergeStyles({
-  height: _pxToRem(100)
-});
+export const loadingBannerStyles = (formFactor: 'default' | 'compact'): IStackStyles => {
+  return {
+    root: {
+      height: formFactor === 'compact' ? '4.5rem' : '8.75rem'
+    }
+  };
+};
 
 /**
  * @private

packages/react-composites/src/composites/common/CaptionsBanner.tsx

@@ -75,7 +75,9 @@ export const CaptionsBanner = (props: { isMobile: boolean }): JSX.Element => {
       {
         /* @conditional-compile-remove(close-captions) */ <div className={containerClassName}>
           <Stack horizontalAlign="center">
-            <Stack.Item style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth }}>
+            <Stack.Item
+              style={{ width: props.isMobile ? mobileViewBannerWidth : desktopViewBannerWidth, maxWidth: '35rem' }}
+            >
               <_CaptionsBanner
                 {...captionsBannerProps}
                 {...handlers}