Merge pull request #19596 from Scroody/i-18969

Fix: Avatar overlaping other notifications on toast area
bigbluebutton · Feb 7, 2024 · c6f82ee · c6f82ee
2 parents 061f57b + c054dd7
commit c6f82ee
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 24 deletions.
diff --git a/bigbluebutton-html5/imports/ui/components/raisehand-notifier/component.jsx b/bigbluebutton-html5/imports/ui/components/raisehand-notifier/component.jsx
@@ -161,14 +161,14 @@ class RaiseHandNotifier extends Component {
     const formattedRaisedHands = this.getRaisedHandNames();
     return (
       <div>
-        <Styled.ToastIcon>
+        <Styled.ToastContent>
           <Styled.IconWrapper>
             <Icon iconName="hand" />
           </Styled.IconWrapper>
-        </Styled.ToastIcon>
-        <Styled.AvatarsWrapper data-test="avatarsWrapper">
-          {this.raisedHandAvatars()}
-        </Styled.AvatarsWrapper>
+          <Styled.AvatarWrapper>
+            {this.raisedHandAvatars()}
+          </Styled.AvatarWrapper>
+        </Styled.ToastContent>
         <Styled.ToastMessage>
           <div>{intl.formatMessage(messages.raisedHandsTitle)}</div>
           {formattedRaisedHands}

diff --git a/bigbluebutton-html5/imports/ui/components/raisehand-notifier/styles.js b/bigbluebutton-html5/imports/ui/components/raisehand-notifier/styles.js
@@ -7,8 +7,6 @@ import {
   toastIconSide,
   toastMargin,
   toastMarginMobile,
-  avatarWrapperOffset,
-  jumboPaddingY,
 } from '/imports/ui/stylesheets/styled-components/general';
 import {
   colorWhite,
@@ -61,8 +59,11 @@ const AvatarsExtra = styled.div`
   padding: 5px 0;
 `;
 
-const ToastIcon = styled.div`
+const ToastContent = styled.div`
   margin-right: ${smPaddingX};
+  display: flex;
+  justify-content: space-between;
+  // justify-content: flex-end;
   [dir="rtl"] & {
     margin-right: 0;
     margin-left: ${smPaddingX};
@@ -100,20 +101,6 @@ const IconWrapper = styled.div`
   }
 `;
 
-const AvatarsWrapper = styled.div`
-  display: flex;
-  flex-direction: row;
-  position: absolute;
-  top: ${avatarWrapperOffset};
-  right: 1rem;
-  left: auto;
-  
-  [dir="rtl"] & {
-    left: ${jumboPaddingY};
-    right: auto;
-  }
-`;
-
 const ToastMessage = styled.div`
   font-size: ${fontSizeSmall};
   margin-top: ${toastMargin};
@@ -137,15 +124,19 @@ const ClearButton = styled(Button)`
   }
 `;
 
+const AvatarWrapper = styled.div`
+  display: flex;
+`;
+
 const ToastSeparator = styled(ToastStyled.Separator)``;
 
 export default {
   Avatar,
   AvatarsExtra,
-  ToastIcon,
+  ToastContent,
   IconWrapper,
-  AvatarsWrapper,
   ToastMessage,
   ClearButton,
   ToastSeparator,
+  AvatarWrapper,
 };