diff --git a/www/whiteboard/app-whiteboard.less b/www/whiteboard/app-whiteboard.less
index 0ac575df6..7bfef2b42 100644
--- a/www/whiteboard/app-whiteboard.less
+++ b/www/whiteboard/app-whiteboard.less
@@ -123,23 +123,28 @@
         .middle;
         z-index: 100;
         background: white;
-        display: flex;
         justify-content: space-between;
+        display: flex;
+        flex-shrink: 1;
+        flex-wrap: wrap;
+        min-width: 0;
+        max-width: 300px;
 
         padding: 10px;
 
         span.cp-app-whiteboard-palette-color {
-            height: 4vw;
-            width: 4vw;
+            height: 30px;
+            width: 30px;
             display: block;
             margin: 5px;
-            border: 1px solid black;
+            border: 1px solid #bbb;
             vertical-align: top;
             border-radius: 50%;
+            cursor: pointer;
             transition: transform 0.1s;
 
             &:hover {
-                transform: scale(1.2);
+                transform: scale(1.1);
             }
         }
     }
diff --git a/www/whiteboard/inner.js b/www/whiteboard/inner.js
index 77057f505..cd87512b8 100644
--- a/www/whiteboard/inner.js
+++ b/www/whiteboard/inner.js
@@ -511,13 +511,13 @@ define([
                     }),
                     h('span#cp-app-whiteboard-opacity-val', '100%')
                 ]),
-                h('span.cp-app-whiteboard-selected.cp-app-whiteboard-unselectable', [
+                h('div.cp-app-whiteboard-selected.cp-app-whiteboard-unselectable', [
                     h('img', {
                         title: Messages.canvas_currentBrush
                     })
-                ])
+                ]),
+                UI.setHTML(h('div#cp-app-whiteboard-colors'), ' '),
             ]),
-            UI.setHTML(h('div#cp-app-whiteboard-colors'), ' '),
             h('div#cp-app-whiteboard-cursors', {
                 style: {
                     display: 'none',