diff --git a/ietf/templates/doc/ad_list.html b/ietf/templates/doc/ad_list.html
index cac709021e..131b5f62ed 100644
--- a/ietf/templates/doc/ad_list.html
+++ b/ietf/templates/doc/ad_list.html
@@ -8,8 +8,8 @@
 {% endblock %}
 {% block morecss %}
     table .border-bottom { border-bottom-color: var(--highcharts-neutral-color-80) !important; }
-    .highcharts-container .highcharts-axis-labels { 
-        font-size: .7rem; 
+    .highcharts-container .highcharts-axis-labels {
+        font-size: .7rem;
         fill: var(--bs-body-color)
     }
     .highcharts-container .highcharts-graph { stroke-width: 2.5; }
@@ -45,7 +45,7 @@ <h2 class="mt-5" id="{{ dt.type.0 }}">{{ dt.type.1 }} State Counts</h2>
                     <th scope="col" data-sort="name">Area Director</th>
                     {% if dt.type.1 == "Internet-Draft" %}
                         <th scope="col" data-sort="pre-pubreq">Pre pubreq</th>
-                    {% endif %}                    
+                    {% endif %}
                     {% for state, state_name in dt.states %}
                         <th scope="col" class="col-1" data-sort="{{ state }}-num"
                         >
@@ -72,7 +72,7 @@ <h2 class="mt-5" id="{{ dt.type.0 }}">{{ dt.type.1 }} State Counts</h2>
                             >
                                 {{ ad.pre_pubreq }}
                             </td>
-                        {% endif %}            
+                        {% endif %}
                         {% for state, state_name in dt.states %}
                         <td class="col-1 align-bottom"
                             id="{{ dt.type.0 }}-{{ ad|slugify }}-{{ state }}">
@@ -130,7 +130,8 @@ <h2 class="mt-5" id="{{ dt.type.0 }}">{{ dt.type.1 }} State Counts</h2>
                     renderTo: element,
                     panning: { enabled: false },
                     spacing: [4, 0, 5, 0],
-                    height: "45%"
+                    height: "45%",
+                    reflow: false // reflow causes panels to grow on Firefox
                 },
                 scrollbar: { enabled: false },
                 tooltip: { enabled: false },
@@ -201,7 +202,7 @@ <h2 class="mt-5" id="{{ dt.type.0 }}">{{ dt.type.1 }} State Counts</h2>
                 const sums = Array.from(table.querySelectorAll("[data-sum]")).reduce((
                     sumsAccumulator,
                     cell
-                ) => {                    
+                ) => {
                     const key = cell.dataset.sum
                     const value = safeParseFloat(cell.textContent)
                     if(key && !isNaN(value)) {
@@ -290,4 +291,26 @@ <h2 class="mt-5" id="{{ dt.type.0 }}">{{ dt.type.1 }} State Counts</h2>
             })
         })
     </script>
+    <script>
+      // Because we disabled reflow for the charts to prevent them from growing on
+      // their own (in some environments on Firefox, at least), manually reflow them
+      // on window resize events that affect width. Height is proportional.
+      (function () {
+          const RESIZE_DEBOUNCE_MS = 200;
+          let reflowTimer = null;
+          let lastWidth = window.innerWidth;
+
+          window.addEventListener("resize", function () {
+              if (window.innerWidth === lastWidth) return;
+              lastWidth = window.innerWidth;
+
+              clearTimeout(reflowTimer);
+              reflowTimer = setTimeout(function () {
+                  Highcharts.charts.forEach(function (chart) {
+                      if (chart) chart.reflow();
+                  });
+              }, RESIZE_DEBOUNCE_MS);
+          });
+      })();
+    </script>
 {% endblock %}
\ No newline at end of file