From d1b17cf712dce7884cbb5804ed221bc026e3ddf8 Mon Sep 17 00:00:00 2001
From: Sebastian Goeldi <sebastian.goeldi@protonmail.com>
Date: Fri, 1 Sep 2023 01:33:27 +0200
Subject: [PATCH] added better button wrapping

---
 changelog.d/+7d0428df.added.md | 1 +
 src/kweb/static/viewer.js      | 6 +++---
 src/kweb/templates/viewer.html | 6 +++---
 3 files changed, 7 insertions(+), 6 deletions(-)
 create mode 100644 changelog.d/+7d0428df.added.md

diff --git a/changelog.d/+7d0428df.added.md b/changelog.d/+7d0428df.added.md
new file mode 100644
index 0000000..b708b91
--- /dev/null
+++ b/changelog.d/+7d0428df.added.md
@@ -0,0 +1 @@
+Added better button wrapping in the canvas
\ No newline at end of file
diff --git a/src/kweb/static/viewer.js b/src/kweb/static/viewer.js
index 80cb8fc..d805e46 100644
--- a/src/kweb/static/viewer.js
+++ b/src/kweb/static/viewer.js
@@ -154,7 +154,7 @@ function showMenu(modes, annotations) {
   modeElement.childNodes = new Array();
 
   let modeRow = document.createElement("div");
-  modeRow.className = "btn-group";
+  modeRow.className = "btn-group flex-wrap";
   modeRow.setAttribute("role", "group");
   modeRow.role = "group";
   modeRow.aria_label = "Layout Mode Selection"
@@ -191,7 +191,7 @@ function showMenu(modes, annotations) {
 
   let clearRulers = document.createElement("button");
   clearRulers.textContent = "Clear Rulers";
-  clearRulers.className = "col-auto btn btn-primary me-2";
+  clearRulers.className = "col-auto btn btn-primary mx-2";
   clearRulers.setAttribute("type", "button");
   clearRulers.onclick = function() {
     socket.send(JSON.stringify({ msg: "clear-annotations" }));
@@ -199,7 +199,7 @@ function showMenu(modes, annotations) {
   menuElement.appendChild(clearRulers);
   let zoomFit= document.createElement("button");
   zoomFit.textContent = "Zoom Fit";
-  zoomFit.className = "col-auto btn btn-primary";
+  zoomFit.className = "col-auto btn btn-primary mx-2";
   zoomFit.setAttribute("type", "button");
   zoomFit.onclick = function() {
     socket.send(JSON.stringify({ msg: "zoom-f" }));
diff --git a/src/kweb/templates/viewer.html b/src/kweb/templates/viewer.html
index 9d1e5bc..57ca0b3 100644
--- a/src/kweb/templates/viewer.html
+++ b/src/kweb/templates/viewer.html
@@ -15,9 +15,9 @@
       <div class="row h-100 p-2" id="layout">
         <div class="col-10 rounded shadow d-flex flex-column position-relative h-100" id="layout-view">
           <canvas class="rounded shadow canvas-container h-100 w-100"  style="min-width: 100px; min-height: 100px;" id="layout_canvas"></canvas>
-          <div class="position-absolute top-0 start-1 p-4 d-flex" id="floating-buttons">
-            <div id="modes" class="me-4"></div>
-            <div id="menu" class = "row"></div>
+          <div class="position-absolute top-0 start-1 p-4 row w-100 overflow-hidden" id="floating-buttons">
+            <div id="modes" class = "col m-0"></div>
+            <div id="menu" class = "col m-0 px-2 text-end"></div>
           </div>
         </div>
         <div id="rightpanel" role="tablist" class="col-2 rounded shadow bg-default py-2 overflow-auto h-100">