added better button wrapping

.pre-commit-config.yaml

@@ -19,6 +19,11 @@ repos:
         args: ["--pytest-test-first"]
       - id: requirements-txt-fixer
       - id: trailing-whitespace
+        exclude: |
+          (?x)^(
+            changelog\.d/.*|
+            CHANGELOG\.md
+          )$
 
   - repo: https://github.com/pycqa/isort
     rev: "5.12.0"

changelog.d/+7d0428df.added.md

@@ -0,0 +1 @@
+Added better button wrapping in the canvas

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,15 +191,15 @@ 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" }));
   };
   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" }));

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">