From 8788d60d5dbaa128463c1a167746627595c0cf7a Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Wed, 24 Apr 2024 13:53:56 +0000
Subject: [PATCH 1/2] move toolbar to vertical side position

---
 .../ui/components/whiteboard/styles.js        | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js b/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js
index ac67c74db3a3..1597989d08c8 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js
@@ -95,6 +95,30 @@ const TldrawV2GlobalStyle = createGlobalStyle`
     height: auto !important;
     width: auto !important;
   }
+
+  .tlui-layout__bottom {
+    grid-row: auto / auto !important;
+    position: absolute !important;
+    right: 10px !important;
+    top: 6.5rem !important;
+  }
+
+  .tlui-layout__mobile .tlui-button__tool {
+    height: 30px !important;
+    width: 20px !important;
+  }
+
+  .tlui-toolbar__inner {
+    flex-direction: column-reverse !important;
+  }
+
+  .tlui-toolbar__tools {
+    flex-direction: column !important;
+  }
+
+  .tlui-toolbar {
+    align-items: end !important;
+  }
 `;
 
 const EditableWBWrapper = styled.div`

From 2cec6334cfebc34df05fb70869e685e9c04fcc93 Mon Sep 17 00:00:00 2001
From: KDSBrowne <kert.browne85@gmail.com>
Date: Wed, 8 May 2024 00:50:31 +0000
Subject: [PATCH 2/2] move tldraw toolbar to side and improve responsiveness

---
 .../ui/components/whiteboard/component.jsx    |  1 +
 .../ui/components/whiteboard/styles.js        | 64 +++++++++++++++++--
 2 files changed, 58 insertions(+), 7 deletions(-)

diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
index 8ca46e267a0a..ee86aa86e35e 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/component.jsx
@@ -1173,6 +1173,7 @@ const Whiteboard = React.memo(function Whiteboard(props) {
           isRTL,
           isMultiUserActive,
           isToolbarVisible,
+          presentationHeight,
         }}
       />
     </div>
diff --git a/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js b/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js
index 1597989d08c8..e35f17d0624f 100644
--- a/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js
+++ b/bigbluebutton-html5/imports/ui/components/whiteboard/styles.js
@@ -96,13 +96,6 @@ const TldrawV2GlobalStyle = createGlobalStyle`
     width: auto !important;
   }
 
-  .tlui-layout__bottom {
-    grid-row: auto / auto !important;
-    position: absolute !important;
-    right: 10px !important;
-    top: 6.5rem !important;
-  }
-
   .tlui-layout__mobile .tlui-button__tool {
     height: 30px !important;
     width: 20px !important;
@@ -119,6 +112,63 @@ const TldrawV2GlobalStyle = createGlobalStyle`
   .tlui-toolbar {
     align-items: end !important;
   }
+
+  .tlui-layout__bottom {
+    grid-row: auto / auto !important;
+    position: absolute !important;
+    right: 10px !important;
+  }
+
+  [data-side="bottom"][data-align="end"][data-state="open"][role="dialog"] {
+    right: 3.5rem !important;
+    bottom: 9.5rem !important;
+  }
+
+  ${({ presentationHeight }) => {
+    const minRange = { height: 345, top: 14 };
+    const maxRange = { height: 1200, top: 384 };
+
+    const interpolateTop = (height) => {
+      if (height <= minRange.height) return `${minRange.top}px`;
+      if (height >= maxRange.height) return `${maxRange.top}px`;
+
+      const slope = (maxRange.top - minRange.top) / (maxRange.height - minRange.height);
+      const interpolatedTop = minRange.top + slope * (height - minRange.height);
+      return `${interpolatedTop}px`;
+    };
+
+    const topValue = interpolateTop(presentationHeight);
+
+    let additionalStyles = '';
+    if (presentationHeight <= 332) {
+      additionalStyles += `
+        .tlui-layout__mobile .tlui-button__tool > .tlui-icon {
+          height: 11px !important;
+          width: 11px !important;
+        }
+
+        .tlui-toolbar__tools {
+          flex-direction: row !important;
+        }
+
+        .tlui-toolbar__inner {
+          flex-direction: row-reverse !important;
+        }
+
+        .tlui-layout__bottom {
+          grid-row: auto / auto !important;
+          position: relative !important;
+          top: 2px !important;
+        }
+
+        [data-side="top"][role="dialog"] {
+          left: 10rem !important;
+        }
+      `;
+    }
+
+    return `.tlui-layout__bottom { top: ${topValue} !important; }${additionalStyles}`;
+  }}
 `;
 
 const EditableWBWrapper = styled.div`