From a983b4c54e4cf2b76ef0651baddc681d86083673 Mon Sep 17 00:00:00 2001
From: bakedpotatolord <jeffy9745@gmail.com>
Date: Sun, 20 Jul 2025 17:05:11 -0600
Subject: [PATCH] fix tool UI scaling issue

---
 web/kiri/index.css  |  6 ++++++
 web/kiri/index.html | 14 +++++++-------
 2 files changed, 13 insertions(+), 7 deletions(-)

diff --git a/web/kiri/index.css b/web/kiri/index.css
index 945cf0e2..5f808d63 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -2432,11 +2432,17 @@ details[open] summary::after {
     justify-self: center;
 }
 .var-row input {
+    flex: 1 1 auto;  
+    min-width: 0;    
+    max-width: 7ch; 
     margin-right: 0;
     margin-bottom: 1px;
     padding-bottom: 1px;
     padding-top: 1px;
 }
+.var-row #tool-name{
+    max-width: 15ch;
+}
 .var-row button {
     margin-right: 0;
     margin-bottom: 1px;
diff --git a/web/kiri/index.html b/web/kiri/index.html
index a3ad1df7..cc2f87f8 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -555,7 +555,7 @@
                         <select id="tool-select" size="10" class="grow"></select>
                     </div>
                     <div class="f-col t-33 t-body t-inset">
-                        <div class="f-row var-row"><label lk="name">name</label><input id="tool-name" size="15"></input></div>
+                        <div class="f-row var-row"><label lk="name">name</label><input id="tool-name" ></input></div>
                         <div class="f-row var-row"><label lk="type">type</label>
                             <select id="tool-type">
                                 <option value="endmill" lk="td_tyem" selected>end</option>
@@ -564,17 +564,17 @@
                                 <option value="drill" lk="td_tydr">drill</option>
                             </select>
                         </div>
-                        <div class="f-row var-row" title="tool number to use&#010;in gcode commands"><label lk="td_tonm">tool #</label><input id="tool-num" size="7"></input></div>
+                        <div class="f-row var-row" title="tool number to use&#010;in gcode commands"><label lk="td_tonm">tool #</label><input id="tool-num" ></input></div>
                         <div class="f-row var-row"><label lk="metric">metric</label><input id="tool-metric" type="checkbox"></input></div>
                         <div class="set-header f-col" lk="td_shft">shaft</div>
-                        <div class="f-row var-row" title="shaft diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-sdiam" size="7"></input></div>
-                        <div class="f-row var-row" title="shaft length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-slen" size="7"></input></div>
+                        <div class="f-row var-row" title="shaft diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-sdiam" ></input></div>
+                        <div class="f-row var-row" title="shaft length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-slen" ></input></div>
                         <div class="set-header f-col" lk="td_flut">flute</div>
-                        <div class="f-row var-row" title="flute diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-fdiam" size="7"></input></div>
-                        <div class="f-row var-row" title="flute length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-flen" size="7"></input></div>
+                        <div class="f-row var-row" title="flute diameter in inches&#010;unless metric is checked&#010;then in millimeters"><label>diameter</label><input id="tool-fdiam" ></input></div>
+                        <div class="f-row var-row" title="flute length in inches&#010;unless metric is checked&#010;then in millimeters"><label>length</label><input id="tool-flen" ></input></div>
                         <div class="set-header f-col" ln="td_tapr">taper</div>
                         <div class="f-row var-row" title="taper angle is measured from the center of the tool"><label>angle</label><input id="tool-tangle" size=7></input></div>
-                        <div class="f-row var-row" title="tip width in inches&#010;unless metric is checked&#010;then in millimeters"><label>tip</label><input id="tool-ttip" size="7"></input></div>
+                        <div class="f-row var-row" title="tip width in inches&#010;unless metric is checked&#010;then in millimeters"><label>tip</label><input id="tool-ttip" ></input></div>
                     </div>
                     <div id="tool-view" class="f-col t-33 t-body"></div>
                 </div>