layout: wrap tables in divs to allow horizontal scrolling.

Some minor style improvements, slightly smaller font, address
scrolling issues on mobile, and reduce font size.

extensions/abigroup.py

@@ -202,6 +202,16 @@ def visit_highlight(self, node):
     def depart_highlight(self, node):
         self.body.append('</span>')
 
+	# add a wrapper around tables, so that horizontal
+    # scrolling is possible (useful on mobile)
+    def visit_table(self, node):
+        self.body.append('<div class="table">')
+        super().visit_table(node)
+
+    def depart_table(self, node):
+        super().depart_table(node)
+        self.body.append('</div>')
+
 class highlight(Inline, TextElement): pass
 
 class highlightMethod(highlight):

theme/haikumodern/static/haikumodern.css.jinja

@@ -37,6 +37,9 @@ body {
 	min-width: {{ theme_body_min_width|todim }};
 	max-width: {{ theme_body_max_width|todim }};
 	color: {{ theme_textcolor }};
+
+	/* seems to address weird scrolling behaviour on mobile */
+	position: fixed;
 }
 
 /* link colors and text decoration */
@@ -101,14 +104,17 @@ a.uplink {
 
 	display: grid;
 
-	grid-template-columns: 1fr min-content minmax(0, 100ch) 1fr;
+	grid-template-columns: 1fr min-content minmax(0, 100ch) 2fr;
 	/* header; nav; main; footer */
 	grid-template-rows: 85px 20px 1fr auto;
 	grid-template-areas:
 		'header header header header'
 		'topnav topnav topnav topnav'
 		'. toc main main'
 		'footer footer footer footer';
+
+	/* this shouldn't be needed, but having weird issues... */
+	overflow: clip;
 }
 
 header {
@@ -226,6 +232,8 @@ main {
 	margin: 0;
 	padding-left: 1em;
 	padding-right: 1em;
+
+	font-size: 90%;
 }
 
 main > * {
@@ -297,6 +305,11 @@ table.index a:hover, table.index a:active {
 	color: {{ theme_hoverlinkcolor }};
 }
 
+/* wraps table elements to support horizontal
+   scrolling on mobile... */
+div.table {
+	overflow-x: auto;
+}
 
 /* Haiku User Guide styles and layout */