pub / serci

commit 6e52658f4088495d2b9dacc40ee164310531dc78
parent 4e0b7e4c33382813c27b9a7de510c65579d3a86b
Author: JayVii <jayvii[AT]posteo[DOT]de>
Date:   Sat, 13 Jul 2024 13:45:36 +0200

fix: ensure tables fit small screens

Diffstat:
M
assets/css/custom.css
 | 
19
++++++++++++++++---
M
index.php
 | 
4
++++

2 files changed, 20 insertions(+), 3 deletions(-)
diff --git a/assets/css/custom.css b/assets/css/custom.css
@@ -1,17 +1,30 @@
-html {
-    scroll-behavior: smooth;
-}
+
+/* Make Search form stretch across entire content-width
+* It should flex / share row with the search button
+*/
 #searchform {
     width: 100%;
     display: flex;
     flex-direction: row;
 }
+
+/* On mobile devices, the search button should be in its own row instead */
 @media only screen and (width <= 720px) {
     #searchform {
         flex-direction: column;
     }
 }
+
+/* Search bar should stretch across entire content-width */
 #searchbar {
     width: 100%;
     margin-right: 5px;
 }
+
+/* Content within tables should wrap anywhere to fit small screens */
+td {
+    word-wrap: anywhere;
+}
+table, tbody, thead {
+    width: 100%;
+}
diff --git a/index.php b/index.php
@@ -157,10 +157,13 @@
                     <?php echo $categories[$category]["name"]; ?>
             </summary>
             <table>
+                <thead>
                 <tr>
                     <th>Engine</th>
                     <th>keywords</th>
                 <tr>
+                </thead>
+                <tbody>
                 <?php
                     /* Print one table row for each search engine in category */
                     foreach ($searchids as $searchid) {
@@ -189,6 +192,7 @@
                 <?php
                     }
                 ?>
+            </tbody>
             </table>
         </details>
         <?php