Removed custom styles for scroll bar for ChatComposite and Captions c…

…omponents (#5470)

change-beta/@azure-communication-react-ee92826c-e7b2-4a00-a0ab-184402f369af.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Removed custom styles for scroll bar for ChatComposite and Captions components",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-ee92826c-e7b2-4a00-a0ab-184402f369af.json

@@ -0,0 +1,9 @@
+{
+  "type": "patch",
+  "area": "fix",
+  "workstream": "A11y",
+  "comment": "Removed custom styles for scroll bar for ChatComposite and Captions components",
+  "packageName": "@azure/communication-react",
+  "email": "98852890+vhuseinova-msft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

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

@@ -3,7 +3,6 @@
 
 import { IStackStyles, ITheme, mergeStyles } from '@fluentui/react';
 import { _pxToRem } from '@internal/acs-ui-common';
-import { scrollbarStyles } from './Common.style';
 
 /**
  * @private
@@ -93,8 +92,7 @@ export const captionsBannerClassName = (formFactor: 'default' | 'compact'): stri
     ...resetUlStyling,
     overflowX: 'hidden',
     height: formFactor === 'compact' ? '4.5rem' : '8.75rem',
-    overflowY: 'auto',
-    ...scrollbarStyles
+    overflowY: 'auto'
   });
 };
 
@@ -110,8 +108,7 @@ export const captionsBannerFullHeightClassName = (theme: ITheme): string => {
     width: '100%',
     position: 'absolute',
     backgroundColor: theme.palette.white,
-    left: 0,
-    ...scrollbarStyles
+    left: 0
   });
 };
 
@@ -145,7 +142,8 @@ export const loadingBannerFullHeightStyles = (theme: ITheme): IStackStyles => {
  * @private
  */
 export const captionsContentContainerClassName = mergeStyles({
-  width: '100%'
+  width: '100%',
+  paddingInlineEnd: _pxToRem(4)
 });
 
 /**

packages/react-components/src/components/styles/CaptionsSettingsModal.styles.ts

@@ -3,7 +3,6 @@
 
 import { IButtonStyles, IDropdownStyles, IModalStyles, mergeStyles, Theme } from '@fluentui/react';
 import { _pxToRem } from '@internal/acs-ui-common';
-import { scrollbarStyles } from './Common.style';
 
 /**
  * @private
@@ -93,8 +92,7 @@ export const buttonStyles = (theme: Theme): IButtonStyles => {
 export const dropdownStyles: Partial<IDropdownStyles> = {
   callout: {
     height: _pxToRem(300),
-    overflow: 'auto',
-    ...scrollbarStyles
+    overflow: 'auto'
   },
   dropdownOptionText: {
     textWrap: 'auto',

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

@@ -1,20 +1,6 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
-/**
- * @private
- */
-export const scrollbarStyles = {
-  '::-webkit-scrollbar, *::-webkit-scrollbar': {
-    width: '0.3rem',
-    height: '0.3rem'
-  },
-  '::-webkit-scrollbar-thumb, *::-webkit-scrollbar-thumb': {
-    borderRadius: '10px',
-    background: 'rgba(150, 150, 150)'
-  }
-};
-
 const ERROR_IMAGE_SVG_PATH =
   'M2.85 2.15a.5.5 0 1 0-.7.7l1.4 1.41A2.99 2.99 0 0 0 3 6v8a3 3 0 0 0 3 3h8c.65 0 1.25-.2 1.74-.55l1.4 1.4a.5.5 0 0 0 .71-.7l-15-15Zm6.56 7.97a1.5 1.5 0 0 0-.46.31l-4.67 4.59A2 2 0 0 1 4 14V6a2 2 0 0 1 .28-1.02l5.13 5.14ZM6 16a2 2 0 0 1-1.01-.27l4.66-4.58c.2-.2.5-.2.7 0l4.66 4.58A2 2 0 0 1 14 16H6ZM16 6v7.88l.9.9A3 3 0 0 0 17 14V6a3 3 0 0 0-3-3H6a3 3 0 0 0-.78.1l.9.9H14a2 2 0 0 1 2 2Zm-2 1.5a1.5 1.5 0 1 0-3 0 1.5 1.5 0 0 0 3 0Zm-1 0a.5.5 0 1 1-1 0 .5.5 0 0 1 1 0Z';
 

packages/react-components/src/components/styles/RichTextEditor.styles.ts

@@ -15,7 +15,9 @@ export const richTextEditorStyle = (props: { minHeight: string; maxHeight: strin
     minHeight: props.minHeight,
     maxHeight: props.maxHeight,
     maxWidth: '100%',
-    paddingTop: '0.5rem'
+    paddingTop: '0.5rem',
+    paddingInlineStart: `0.75rem`,
+    paddingInlineEnd: `0.75rem`
   });
 };
 
@@ -24,8 +26,6 @@ export const richTextEditorStyle = (props: { minHeight: string; maxHeight: strin
  */
 export const richTextEditorWrapperStyle = (theme: Theme): string => {
   return mergeStyles({
-    paddingInlineStart: `0.75rem`,
-    paddingInlineEnd: `0.75rem`,
     maxWidth: '100%',
     color: theme.palette.neutralPrimary,
     '& img': {

packages/react-composites/src/composites/ChatComposite/styles/Chat.styles.ts

@@ -30,20 +30,7 @@ export const chatScreenContainerStyle = mergeStyles({
 export const chatContainer = mergeStyles({
   height: '100%',
   width: '100%',
-  overflow: 'hidden',
-
-  '*::-webkit-scrollbar': {
-    width: '0.3rem',
-    height: '0.3rem'
-  },
-  '.scroll::-webkit-scrollbar-track': {
-    background: 'rgba(150, 150, 150)',
-    borderRadius: '0.3rem'
-  },
-  '*::-webkit-scrollbar-thumb': {
-    borderRadius: '10px',
-    background: 'rgba(150, 150, 150)'
-  }
+  overflow: 'hidden'
 });
 
 /**