Skip to content

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

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
dmceachernmsft merged 8 commits into from
Apr 21, 2023
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
58b528e
fix height of control bar so that always has size
dmceachernmsft Apr 21, 2023
881ba51
Change files
dmceachernmsft Apr 21, 2023
5c50d4c
Duplicate change files for beta release
dmceachernmsft Apr 21, 2023
da70cda
Merge branch 'main' into dmceachernmsft/controlbarWidthFix
dmceachernmsft Apr 21, 2023
e4fa5ae
move where min height is applied
dmceachernmsft Apr 21, 2023
68a68c1
Merge branch 'dmceachernmsft/controlbarWidthFix' of https://github.co…
dmceachernmsft Apr 21, 2023
dea84b8
Merge branch 'main' into dmceachernmsft/controlbarWidthFix
dmceachernmsft Apr 21, 2023
04c9dda
Merge branch 'main' into dmceachernmsft/controlbarWidthFix
dmceachernmsft Apr 21, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions change-beta/@azure-communication-react-47e78a07-11f6-46eb-af7e-316c72fbf885.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
7 changes: 7 additions & 0 deletions change/@azure-communication-react-47e78a07-11f6-46eb-af7e-316c72fbf885.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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"
}
1 change: 0 additions & 1 deletion packages/react-composites/src/composites/CallComposite/styles/CallControls.styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion packages/react-composites/src/composites/common/ControlBar/CommonCallControlBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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]
);

Expand Down
⚡