Merge pull request #6273 from KDSBrowne/2.2-manage-menu-alignment

Fix manage user menu alignment

bigbluebutton-html5/imports/ui/components/dropdown/styles.scss

@@ -205,7 +205,7 @@
 
   &:after,
   &:before {
-    left: calc(var(--dropdown-caret-width) / 2);
+    left: var(--dropdown-caret-width);
   }
 }
 

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/component.jsx

@@ -186,11 +186,11 @@ class UserOptions extends Component {
           <Button
             label={intl.formatMessage(intlMessages.optionsLabel)}
             icon="settings"
-            circle
             ghost
             color="primary"
             hideLabel
             className={styles.optionsButton}
+            size="sm"
             onClick={() => null}
           />
         </DropdownTrigger>

bigbluebutton-html5/imports/ui/components/user-list/user-list-content/user-participants/user-options/styles.scss

-@import "/imports/ui/stylesheets/variables/_all";
-
-:root{
-  --icon-offset-left: -.5em;
-  --icon-offset-top: -.4em;
-  --dropdown-offset-top: 4.5rem;
-  --dropdown-offset-right: -0.2rem;
-}
-
-.dropdown {
-  position: static;
-}
-
-.dropdownContent {
-  top: var(--dropdown-offset-top);
-  margin-right: var(--dropdown-offset-right);
-}
-
-.optionsButton{
-  display: block;
-  margin-right: var(--sm-padding-y);
-
-  span:first-child {
-    width: var(--jumbo-padding-y);
-    height: var(--jumbo-padding-y);
-  }
-
-  i {
-    top: var(--icon-offset-top);
-    left: var(--icon-offset-left);
-    color: var(--color-gray-dark) !important;
-    background-color: transparent !important;
-  }
-
-  &:hover,
-  &:focus {
-    > span:first-child {
-      background-color: transparent !important;
-    }
-  }
-
-}
-
+@import "/imports/ui/stylesheets/variables/_all";
+
+:root {
+  --user-manage-menu-top : -0.5rem;
+  --user-manage-menu-right : -0.75rem;
+  --user-manage-menu-width : 10rem;
+}
+
+.dropdown {
+  position: absolute;
+  right: 0;
+}
+
+.dropdownContent {
+  top: var(--user-manage-menu-top);
+  right: var(--user-manage-menu-right);
+  width: var(--user-manage-menu-width);
+
+  @include mq($small-only) {
+    width: 100vw;
+  }
+}
+
+.optionsButton{
+  border-radius: 50%;
+  display: block;
+  padding: 0;
+
+  i {
+    width: auto;
+    font-size: var(--font-size-base) !important;
+    color: var(--color-gray-dark) !important;
+    background-color: transparent !important;
+  }
+
+  &:hover,
+  &:focus {
+    background-color: var(--color-off-white) !important;
+  }
+}
+