added better button wrapping

gdsfactory · Aug 31, 2023 · d1b17cf · d1b17cf
1 parent f9cda3c
commit d1b17cf
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 6 deletions.
diff --git a/changelog.d/+7d0428df.added.md b/changelog.d/+7d0428df.added.md
@@ -0,0 +1 @@
+Added better button wrapping in the canvas
diff --git 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,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" }));

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