[Bugfix] Fix height of control bar so that always has size (#2963)

* fix height of control bar so that always has size

* Change files

* Duplicate change files for beta release

* move where min height is applied

Author: dmceachernmsft

change-beta/@azure-communication-react-47e78a07-11f6-46eb-af7e-316c72fbf885.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Set min height to control bar to fix issue where control bar contrainer would collapse when side pane buttons are disabled in Composites",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

change/@azure-communication-react-47e78a07-11f6-46eb-af7e-316c72fbf885.json

@@ -0,0 +1,7 @@
+{
+  "type": "patch",
+  "comment": "Set min height to control bar to fix issue where control bar contrainer would collapse when side pane buttons are disabled in Composites",
+  "packageName": "@azure/communication-react",
+  "email": "94866715+dmceachernmsft@users.noreply.github.com",
+  "dependentChangeType": "patch"
+}

packages/react-composites/src/composites/CallComposite/styles/CallControls.styles.ts

@@ -7,7 +7,6 @@ import { IStyle } from '@fluentui/react';
 export const controlBarContainerStyles: IStyle = {
   paddingTop: '0.25rem',
   paddingBottom: '0.25rem',
-
   // @TODO: this should be exposed through a custom CallComposite Theme API that extends the fluent theme with semantic values
   boxShadow: `
     0px 6.400000095367432px 14.399999618530273px 0px #00000021;

packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx

@@ -199,7 +199,7 @@ export const CommonCallControlBar = (props: CommonCallControlBarProps & Containe
 
   // only center control bar buttons based on parent container if there are enough space on the screen and not mobile
   const controlBarDesktopContainerStyles: IStyle = useMemo(
-    () => (!props.mobileView && !isOutOfSpace ? { position: 'relative' } : {}),
+    () => (!props.mobileView && !isOutOfSpace ? { position: 'relative', minHeight: '4.5rem', width: '100%' } : {}),
     [props.mobileView, isOutOfSpace]
   );