fix: OK/Cancel buttons clipped in Flushing Volume dialog (#13762)

fix: OK/Cancel buttons clipped in Flushing Volume dialog (#13511)

The WipingDialog renders its UI inside a wxWebView. When the dialog
was clamped to screen size (many filaments, small displays, high DPI),
the HTML content exceeded the WebView bounds and the OK/Cancel buttons
fell below the visible area.

HTML fix:
- Convert .container to flexbox column with overflow-y: auto
- Pin .button-container with flex-shrink: 0 so it stays visible
- Allow .scroll-container to flex-grow for the table area

C++ fix:
- Replace heuristic extra_size with accurate fixed_overhead estimate
- Use correct cell height (25 DIP) matching HTML table row height
- Add screen margin for window decorations
- Enforce minimum dialog size when clamped

Co-authored-by: SoftFever <softfeverever@gmail.com>

resources/web/flush/WipingDialog.html

@@ -6,6 +6,7 @@
       * {
         user-select: none;
         -webkit-user-select: none;
+        box-sizing: border-box;
       }
 
       html, body {
@@ -16,19 +17,24 @@
         font-family: sans-serif;
         overscroll-behavior: none;
       }
-      
+
       body {
           position: fixed;
           inset: 0;
       }
 
       .container {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
         background: #fff;
         padding: 20px;
         padding-bottom: 10px;
         border: 1px solid #ccc;
-        max-width:fit-content(1000px);
+        max-width: fit-content(1000px);
         margin: 0 auto;
+        overflow: hidden;
+        box-sizing: border-box;
       }
 
       .tip-panel {
@@ -36,9 +42,19 @@
         padding: 10px;
         margin-bottom: 10px;
         font-size: 12px;
+        flex-shrink: 0;
+      }
+
+      .scroll-wrapper {
+        flex: 1 1 0%;
+        min-height: 0;
+        display: flex;
+        flex-direction: column;
       }
 
       .scroll-container {
+        flex: 1 1 0%;
+        min-height: 80px;
         max-width: 100%;
         max-height: 500px;
         overflow: auto;
@@ -47,6 +63,10 @@
         margin: 0px;
       }
 
+      .description-section {
+        flex-shrink: 0;
+      }
+
       table {
         border-collapse: collapse;
         width: 100%;
@@ -152,7 +172,8 @@
         display: flex;
         justify-content: center;
         gap: 0px;
-        margin: 10px;
+        margin-top: 10px;
+        flex-shrink: 0;
       }
 
       /* 暗色模式样式 */
@@ -245,7 +266,7 @@
         in Orca Slicer > Preferences.
       </div>
 
-      <div style="margin-bottom: 10px; display: flex; align-items: center;">
+      <div style="margin-bottom: 10px; display: flex; align-items: center; flex-shrink: 0;">
         <div
           class="ButtonStyleConfirm ButtonTypeWindow"
           onclick="calcFlushingVolumes()"
@@ -265,51 +286,54 @@
         </div>
       </div>
 
-      <div class="scroll-container">
-        <table id="flushTable">
-          <thead>
-            <tr>
-              <th></th>
-            </tr>
-          </thead>
-          <tbody></tbody>
-        </table>
+      <div class="scroll-wrapper">
+        <div class="scroll-container">
+          <table id="flushTable">
+            <thead>
+              <tr>
+                <th></th>
+              </tr>
+            </thead>
+            <tbody></tbody>
+          </table>
+        </div>
+
+        <div class="description-section" style="margin-top: 10px;">
+          <div id="volume_desp_panel" class="normal-text">
+            Flushing volume (mm³) for each filament pair.
+          </div>
+          <div
+            id="volume_range_panel"
+            class="normal-text"
+            style="margin-top: 5px;"
+          >
+            Suggestion: Flushing Volume in range [50, 999]
+          </div>
+          <div style="margin-top: 8px;">
+            <label
+              for="multiplierInput"
+              id="multiplier_label"
+              style="font-size: 12px;"
+              >Multiplier</label
+            >
+            <input
+              type="number"
+              step="0.1"
+              id="multiplierInput"
+              class="multiplier-input"
+              value="1.00"
+              oninput="onMultiplierChange()"
+            />
+          </div>
+          <div
+            style="margin-top: 5px; margin-bottom: 5px; color: #666; font-size: 12px;"
+            id="multiplier_range_panel"
+          >
+            The multiplier should be in range [0.50, 3.00].
+          </div>
+        </div>
       </div>
 
-      <div style="margin-top: 10px;">
-        <div id="volume_desp_panel" class="normal-text">
-          Flushing volume (mm³) for each filament pair.
-        </div>
-        <div
-          id="volume_range_panel"
-          class="normal-text"
-          style="margin-top: 5px;"
-        >
-          Suggestion: Flushing Volume in range [50, 999]
-        </div>
-        <div style="margin-top: 8px;">
-          <label
-            for="multiplierInput"
-            id="multiplier_label"
-            style="font-size: 12px;"
-            >Multiplier</label
-          >
-          <input
-            type="number"
-            step="0.1"
-            id="multiplierInput"
-            class="multiplier-input"
-            value="1.00"
-            oninput="onMultiplierChange()"
-          />
-        </div>
-        <div
-          style="margin-top: 5px; margin-bottom: 5px; color: #666; font-size: 12px;"
-          id="multiplier_range_panel"
-        >
-          The multiplier should be in range [0.50, 3.00].
-        </div>
-      </div>
       <div class="button-container" style="padding: 0px; margin: 0px;">
         <div class="ButtonStyleConfirm ButtonTypeChoice" id="ok_btn" onclick="storeData()">
           Save