[PATCH htdocs] schedule: wrap long table for smaller screens

[PATCH htdocs] schedule: wrap long table for smaller screens

[Mike Frysinger]

The current table is comfortable on wider screens, but on anything
smaller than ~768px (e.g. most phones), the table exceeds the screen
and is difficult to read.  In this case, switch the table to flexbox
so that the last column (the long comment text) is allowed to wrap
into a row all by itself and take up the entire width of the screen.
This makes reading on small devices much more manageable.

CSS flexbox has been common since 2020, but if the browser doesn't
support it, then it would be ignored and the current table layout
continues to work as-is.
---
 css/schedule.css | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/css/schedule.css b/css/schedule.css
index a5cc139bbe7e..37ca821d7192 100644
--- a/css/schedule.css
+++ b/css/schedule.css
@@ -40,3 +40,27 @@ table#history tr > td:nth-child(6) {
   text-align: left;
   white-space: normal;
 }
+
+/* This is ~768px with 16pt font.  */
+@media only screen and (max-width: 50em) {
+  /* Allow the comment field to wrap onto a row by itself.  */
+  table#history tr {
+    display: flex;
+    flex-flow: row wrap;
+    width: 100%;
+  }
+
+  table#history th,
+  table#history td {
+    flex: 1 1 15%;
+    order: 1;
+  }
+
+  table#history tr > th:nth-child(6),
+  table#history tr > td:nth-child(6) {
+    flex: 5 1 100%;
+    order: 5;
+    padding-bottom: 1em;
+    padding-left: 1em;
+  }
+}
-- 
2.43.0