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

src/slic3r/GUI/WipeTowerDialog.cpp

@@ -372,27 +372,31 @@ WipingDialog::WipingDialog(wxWindow* parent, const int max_flush_volume) :
     wxBoxSizer* main_sizer = new wxBoxSizer(wxVERTICAL);
     this->SetSizer(main_sizer);
     this->SetBackgroundColour(*wxWHITE);
-    auto filament_count= wxGetApp().preset_bundle->project_config.option<ConfigOptionStrings>("filament_colour")->values.size();
-    wxSize extra_size = { FromDIP(100),FromDIP(235) };
-    if (filament_count <= 2)
-        extra_size.y += FromDIP(16) * 3 + FromDIP(32);
-    else if (filament_count == 3)
-        extra_size.y += FromDIP(16) * 3;
-    else if (4 <= filament_count && filament_count <= 8)
-        extra_size.y += FromDIP(16) * 2;
-    else
-        extra_size.y += FromDIP(16);
+    auto filament_count = wxGetApp().preset_bundle->project_config.option<ConfigOptionStrings>("filament_colour")->values.size();
 
-    wxSize max_scroll_size = { FromDIP(1000),FromDIP(500) };
-    wxSize estimate_size = { (int)(filament_count + 1) * FromDIP(60),(int)(filament_count + 1) * FromDIP(30)+FromDIP(2)};
-    wxSize scroll_size ={ std::min(max_scroll_size.x,estimate_size.x),std::min(max_scroll_size.y,estimate_size.y) };
-    wxSize applied_size = scroll_size + extra_size;
+    // Estimate table scroll area size based on filament count
+    // Each table cell is ~60x25 DIP, plus headers and borders
+    wxSize max_scroll_size = { FromDIP(1000), FromDIP(500) };
+    wxSize table_size = { (int)(filament_count + 1) * FromDIP(60), (int)(filament_count + 1) * FromDIP(25) + FromDIP(2) };
+    wxSize scroll_size = { std::min(max_scroll_size.x, table_size.x), std::min(max_scroll_size.y, table_size.y) };
 
+    // Fixed overhead: padding (~30), tip panel (~70), controls row (~50),
+    // description/multiplier section (~130), button row (~45) = ~325 DIP
+    wxSize fixed_overhead = { FromDIP(100), FromDIP(325) };
+    wxSize applied_size = scroll_size + fixed_overhead;
+
+    // Clamp to screen size (leave some margin for window decorations)
     wxSize scaled_screen_size = wxGetDisplaySize();
     double scale_factor = wxDisplay().GetScaleFactor();
-    scaled_screen_size = { (int)(scaled_screen_size.x / scale_factor),(int)(scaled_screen_size.y / scale_factor) };
+    scaled_screen_size = { (int)(scaled_screen_size.x / scale_factor), (int)(scaled_screen_size.y / scale_factor) };
+    wxSize screen_margin = { FromDIP(40), FromDIP(60) };
+    scaled_screen_size -= screen_margin;
 
-    applied_size = { std::min(applied_size.x,scaled_screen_size.x),std::min(applied_size.y,scaled_screen_size.y) };
+    applied_size = { std::min(applied_size.x, scaled_screen_size.x), std::min(applied_size.y, scaled_screen_size.y) };
+
+    // Ensure a reasonable minimum size so the dialog is usable even when clamped
+    applied_size.x = std::max(applied_size.x, FromDIP(350));
+    applied_size.y = std::max(applied_size.y, FromDIP(450));
     m_webview = wxWebView::New(this, wxID_ANY,
         wxEmptyString,
         wxDefaultPosition,