From 342648fe722dba34e367286c69369a9e8c095964 Mon Sep 17 00:00:00 2001
From: bakedpotatolord <jeffy9745@gmail.com>
Date: Thu, 26 Jun 2025 12:13:10 -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 a35f0b7f0..5992f3a01 100644
--- a/web/kiri/index.css
+++ b/web/kiri/index.css
@@ -2427,11 +2427,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 3eb610ab5..8d11b5b32 100644
--- a/web/kiri/index.html
+++ b/web/kiri/index.html
@@ -551,7 +551,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>
@@ -560,17 +560,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>