From dd2952a0b6394d325c8f1c9ee0e4fd3792809186 Mon Sep 17 00:00:00 2001
From: Rieven <rsnmartis@gmail.com>
Date: Thu, 19 Oct 2023 13:18:49 +0200
Subject: [PATCH] Fix report tables overflowing whole page (#1940)

---
 .../report_types/dns_report/report.html       | 204 +++++++++---------
 .../report_types/tls_report/report.html       |  68 +++---
 2 files changed, 140 insertions(+), 132 deletions(-)

diff --git a/rocky/reports/report_types/dns_report/report.html b/rocky/reports/report_types/dns_report/report.html
index 731f4677024..affc75e7d61 100644
--- a/rocky/reports/report_types/dns_report/report.html
+++ b/rocky/reports/report_types/dns_report/report.html
@@ -1,117 +1,123 @@
 {% load i18n %}
 
 <h2>{% translate "IP address lookup" %}</h2>
-<div class="column-2">
-    {% if data.ipv4 %}
-        <table>
-            <thead>
-                <tr>
-                    <th scope="col">IPv4</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    {% for ip in data.ipv4 %}<td>{{ ip }}</td>{% endfor %}
-                </tr>
-            </tbody>
-        </table>
-    {% endif %}
-    {% if not data.enough_ipv6_webservers %}
-        <div class="warning" role="group" aria-label="{% translate "warning" %}">
-            <span>IPv6 {% translate "Warning" %}:</span>
-            <p>
-                {% blocktranslate trimmed %}
+<div class="horizontal-scroll">
+    <div class="column-2">
+        {% if data.ipv4 %}
+            <table>
+                <thead>
+                    <tr>
+                        <th scope="col">IPv4</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        {% for ip in data.ipv4 %}<td>{{ ip }}</td>{% endfor %}
+                    </tr>
+                </tbody>
+            </table>
+        {% endif %}
+        {% if not data.enough_ipv6_webservers %}
+            <div class="warning" role="group" aria-label="{% translate "warning" %}">
+                <span>IPv6 {% translate "Warning" %}:</span>
+                <p>
+                    {% blocktranslate trimmed %}
                     You have less than one webserver that is reachable over IPv6,
                     which is <strong>not</strong> in compliance to internet.nl standards.
-                {% endblocktranslate %}
-            </p>
-        </div>
-    {% else %}
-        <table class="summary">
-            <thead>
-                <tr>
-                    <th scope="col">IPv6</th>
-                </tr>
-            </thead>
-            <tbody>
-                <tr>
-                    {% for ip in data.ipv6 %}<td>{{ ip }}</td>{% endfor %}
-                </tr>
-            </tbody>
-        </table>
-    {% endif %}
+                    {% endblocktranslate %}
+                </p>
+            </div>
+        {% else %}
+            <table class="summary">
+                <thead>
+                    <tr>
+                        <th scope="col">IPv6</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        {% for ip in data.ipv6 %}<td>{{ ip }}</td>{% endfor %}
+                    </tr>
+                </tbody>
+            </table>
+        {% endif %}
+    </div>
 </div>
 {% if data.other_records %}
     <h2>{% translate "Other records found" %}</h2>
-    <table>
-        <thead>
-            <tr>
-                <th>{% translate "Record" %}</th>
-                <th>{% translate "Value" %}</th>
-                <th>{% translate "Found by" %}</th>
-            </tr>
-        </thead>
-        <tbody>
-            {% for ooi in data.other_records %}
-                <tr>
-                    <td>{{ ooi.human_readable }}</td>
-                    <td>{{ ooi.content }}</td>
-                    <td>{{ ooi.origin }}</td>
-                </tr>
-            {% endfor %}
-        </tbody>
-    </table>
-    <h2>{% translate "Security measures" %}</h2>
-    <div class="column-3">
+    <div class="horizontal-scroll">
         <table>
             <thead>
                 <tr>
-                    <th>{% translate "Enabled" %}</th>
-                    <th>{% translate "Type" %}</th>
+                    <th>{% translate "Record" %}</th>
+                    <th>{% translate "Value" %}</th>
+                    <th>{% translate "Found by" %}</th>
                 </tr>
             </thead>
             <tbody>
-                <tr>
-                    <td>
-                        {% if data.security.spf %}
-                            <i class="icon positive"></i>{% translate "Yes" %}
-                        {% else %}
-                            <i class="icon negative"></i>{% translate "No" %}
-                        {% endif %}
-                    </td>
-                    <td>SPF</td>
-                </tr>
-                <tr>
-                    <td>
-                        {% if data.security.dmarc %}
-                            <i class="icon positive"></i>{% translate "Yes" %}
-                        {% else %}
-                            <i class="icon negative"></i>{% translate "No" %}
-                        {% endif %}
-                    </td>
-                    <td>DMARC</td>
-                </tr>
-                <tr>
-                    <td>
-                        {% if data.security.dkim %}
-                            <i class="icon positive"></i>{% translate "Yes" %}
-                        {% else %}
-                            <i class="icon negative"></i>{% translate "No" %}
-                        {% endif %}
-                    </td>
-                    <td>DKIM</td>
-                </tr>
-                <tr>
-                    <td>
-                        {% if data.security.dnssec %}
-                            <i class="icon positive"></i>{% translate "Yes" %}
-                        {% else %}
-                            <i class="icon negative"></i>{% translate "No" %}
-                        {% endif %}
-                    </td>
-                    <td>DNSSEC</td>
-                </tr>
+                {% for ooi in data.other_records %}
+                    <tr>
+                        <td>{{ ooi.human_readable }}</td>
+                        <td>{{ ooi.content }}</td>
+                        <td>{{ ooi.origin }}</td>
+                    </tr>
+                {% endfor %}
             </tbody>
         </table>
     </div>
+    <h2>{% translate "Security measures" %}</h2>
+    <div class="horizontal-scroll">
+        <div class="column-3">
+            <table>
+                <thead>
+                    <tr>
+                        <th>{% translate "Enabled" %}</th>
+                        <th>{% translate "Type" %}</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td>
+                            {% if data.security.spf %}
+                                <i class="icon positive"></i>{% translate "Yes" %}
+                            {% else %}
+                                <i class="icon negative"></i>{% translate "No" %}
+                            {% endif %}
+                        </td>
+                        <td>SPF</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            {% if data.security.dmarc %}
+                                <i class="icon positive"></i>{% translate "Yes" %}
+                            {% else %}
+                                <i class="icon negative"></i>{% translate "No" %}
+                            {% endif %}
+                        </td>
+                        <td>DMARC</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            {% if data.security.dkim %}
+                                <i class="icon positive"></i>{% translate "Yes" %}
+                            {% else %}
+                                <i class="icon negative"></i>{% translate "No" %}
+                            {% endif %}
+                        </td>
+                        <td>DKIM</td>
+                    </tr>
+                    <tr>
+                        <td>
+                            {% if data.security.dnssec %}
+                                <i class="icon positive"></i>{% translate "Yes" %}
+                            {% else %}
+                                <i class="icon negative"></i>{% translate "No" %}
+                            {% endif %}
+                        </td>
+                        <td>DNSSEC</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+    </div>
 {% endif %}
diff --git a/rocky/reports/report_types/tls_report/report.html b/rocky/reports/report_types/tls_report/report.html
index 8f9fbcd8252..5ac68d3d048 100644
--- a/rocky/reports/report_types/tls_report/report.html
+++ b/rocky/reports/report_types/tls_report/report.html
@@ -2,42 +2,44 @@
 
 <h3>Ciphers</h3>
 {% if data.suites %}
-<table>
-    <thead>
-        <tr>
-            <th>{% translate "Status" %}</th>
-            <th>{% translate "Protocol" %}</th>
-            <th>{% translate "Name" %}</th>
-            <th>{% translate "Encryption Algorithm" %}</th>
-            <th>{% translate "Bits" %}</th>
-            <th>{% translate "Key Size" %}</th>
-            <th>{% translate "Code" %}</th>
-        </tr>
-    </thead>
-    <tbody>
-        {% for protocol, suites in data.suites.items %}
-            {% for suite in suites %}
+    <div class="horizontal-scroll">
+        <table>
+            <thead>
                 <tr>
-                    <td>
-                        {% if suite.cipher_suite_name in data.suites_with_findings %}
-                            <i class="icon negative"></i> {% translate "Phase out" %}
-                        {% else %}
-                            <i class="icon positive"></i> {% translate "Good" %}
-                        {% endif %}
-                    </td>
-                    <td>{{ protocol }}</td>
-                    <td>{{ suite.cipher_suite_alias }}</td>
-                    <td>{{ suite.encryption_algorithm }}</td>
-                    <td>{{ suite.bits }}</td>
-                    <td>{{ suite.key_size }}</td>
-                    <td>{{ suite.cipher_suite_code }}</td>
+                    <th>{% translate "Status" %}</th>
+                    <th>{% translate "Protocol" %}</th>
+                    <th>{% translate "Name" %}</th>
+                    <th>{% translate "Encryption Algorithm" %}</th>
+                    <th>{% translate "Bits" %}</th>
+                    <th>{% translate "Key Size" %}</th>
+                    <th>{% translate "Code" %}</th>
                 </tr>
-            {% endfor %}
-        {% endfor %}
-    </tbody>
-</table>
+            </thead>
+            <tbody>
+                {% for protocol, suites in data.suites.items %}
+                    {% for suite in suites %}
+                        <tr>
+                            <td>
+                                {% if suite.cipher_suite_name in data.suites_with_findings %}
+                                    <i class="icon negative"></i> {% translate "Phase out" %}
+                                {% else %}
+                                    <i class="icon positive"></i> {% translate "Good" %}
+                                {% endif %}
+                            </td>
+                            <td>{{ protocol }}</td>
+                            <td>{{ suite.cipher_suite_alias }}</td>
+                            <td>{{ suite.encryption_algorithm }}</td>
+                            <td>{{ suite.bits }}</td>
+                            <td>{{ suite.key_size }}</td>
+                            <td>{{ suite.cipher_suite_code }}</td>
+                        </tr>
+                    {% endfor %}
+                {% endfor %}
+            </tbody>
+        </table>
+    </div>
 {% else %}
-<p>{% translate "No ciphers found for this IPService" %}</p>
+    <p>{% translate "No ciphers found for this IPService" %}</p>
 {% endif %}
 {% if data.findings %}
     <h3>{% translate "Findings" %}</h3>