From 6c4797e8140bc693cff1e409a1d2010cc3623408 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmaiil.com>
Date: Thu, 27 Oct 2022 13:15:09 +0000
Subject: [PATCH] fix styles menu overlap on whiteboard toolbar

---
 .../presentation/presentation-menu/styles.js       | 14 ++++++++++++--
 .../imports/ui/components/whiteboard/component.jsx | 12 ++++++++++++
 2 files changed, 24 insertions(+), 2 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/styles.js b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/styles.js
index 06a1005636..3319a03844 100644
--- a/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/presentation/presentation-menu/styles.js
@@ -7,6 +7,7 @@ import {
   colorGrayDark,
   colorSuccess,
   colorGrayLightest,
+  colorWhite,
 } from '/imports/ui/stylesheets/styled-components/palette';
 import {
   borderSizeLarge,
@@ -35,10 +36,19 @@ const Right = styled.div`
   cursor: pointer;
   position: absolute;
   left: auto;
-  top: .5rem;
-  right: .5rem;
+  right: 0px;
   z-index: 999;
 
+  > div {
+    background-color: ${colorWhite};
+    width: 50px;
+    height: 41px;
+  }
+
+  button {
+    margin-top: .45rem;
+  }
+
   [dir="rtl"] & {
     right: auto;
     left : ${borderSize};
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
index b2d88c7d79..e2da0ea5c2 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
@@ -292,6 +292,7 @@ export default function Whiteboard(props) {
       const tdDelete = document.getElementById("TD-Delete");
       const tdPrimaryTools = document.getElementById("TD-PrimaryTools");
       const tdTools = document.getElementById("TD-Tools");
+
       if (tdToolsDots && tdDelete && tdPrimaryTools) {
         const size = props.height < SMALL_HEIGHT ? TOOLBAR_SMALL : TOOLBAR_LARGE;
         tdToolsDots.style.height = `${size}px`;
@@ -327,6 +328,15 @@ export default function Whiteboard(props) {
   }, [isPanning]);
 
   const onMount = (app) => {
+    const menu = document.getElementById("TD-Styles")?.parentElement;
+    if (menu) {
+      menu.style.position = `relative`;
+      menu.style.right = `48px`;
+      [...menu.children]
+        .sort((a,b)=> a?.id>b?.id?-1:1)
+        .forEach(n=> menu.appendChild(n));
+    }
+
     app.setSetting('language', document.getElementsByTagName('html')[0]?.lang || 'en');
     setTLDrawAPI(app);
     props.setTldrawAPI(app);
@@ -376,6 +386,8 @@ export default function Whiteboard(props) {
   };
 
   const onPatch = (e, t, reason) => {
+
+
     if (reason && isPresenter && (reason.includes("zoomed") || reason.includes("panned"))) {
       const camera = tldrawAPI.getPageState()?.camera;