Add a page width: cap the columns at so many pixels, centred or at the left

The header's and footer's text follows the cap when they already follow
the main column; their backgrounds stay full width. The inset that lines
them up with the main column is now exact — the wrap's 1em plus the
column's share of the wrap's content box — and, with a page width, uses
min() so it is right whether the page or the screen is the narrower.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01Sd8UPWrvyYCLj97JexNw3A

1 files changed, 30 insertions, 2 deletions

diff --git a/internal/web/web_test.go b/internal/web/web_test.go
index ffa9db7..1ca2677 100644
--- a/internal/web/web_test.go
+++ b/internal/web/web_test.go
@@ -251,12 +251,40 @@ func TestLayoutTheme(t *testing.T) {
 	}
 	th = ThemeFromForm(th, url.Values{"left_width": {"15"}, "right_width": {"20"}, "align_to_main": {"on"}})
 	css = th.CSS()
-	for _, want := range []string{"body.has-left .site-header .wrap, body.has-left .site-footer .wrap { padding-left:calc(1em + 15%); }",
-		"body.has-right .site-header .wrap, body.has-right .site-footer .wrap { padding-right:calc(1em + 20%); }"} {
+	// The inset is the wrap's 1em plus the column's share of the wrap's content box (the wrap less 2em).
+	for _, want := range []string{"body.has-left .site-header .wrap, body.has-left .site-footer .wrap { padding-left:calc(0.7em + 15%); }",
+		"body.has-right .site-header .wrap, body.has-right .site-footer .wrap { padding-right:calc(0.6em + 20%); }"} {
 		if !strings.Contains(css, want) {
 			t.Errorf("css missing %q:\n%s", want, css)
 		}
 	}
+	if strings.Contains(css, "max-width") {
+		t.Error("no page width, no max-width")
+	}
+	// A page width caps the columns' wrap; the header and footer only when they follow the main column.
+	th = ThemeFromForm(th, url.Values{"left_width": {"15"}, "right_width": {"20"}, "page_width": {"700"}, "page_align": {"left"}})
+	if th.PageWidth != 700 || th.PageAlign != "left" || th.AlignToMain {
+		t.Errorf("page width from form: %+v", th)
+	}
+	css = th.CSS()
+	if !strings.Contains(css, ".wrap.body-wrap { max-width:700px; margin:0; }") || strings.Contains(css, ".site-header .wrap, .site-footer .wrap { max-width") {
+		t.Errorf("page width css: %s", css)
+	}
+	th = ThemeFromForm(th, url.Values{"left_width": {"15"}, "right_width": {"20"}, "page_width": {"700"}, "align_to_main": {"on"}})
+	css = th.CSS()
+	for _, want := range []string{".wrap.body-wrap { max-width:700px; margin:0 auto; }", ".site-header .wrap, .site-footer .wrap { max-width:700px; margin:0 auto; }",
+		"{ padding-left:calc(0.7em + 105px); padding-left:calc(0.7em + min(15%, 105px)); }", "{ padding-right:calc(0.6em + 140px); padding-right:calc(0.6em + min(20%, 140px)); }"} {
+		if !strings.Contains(css, want) {
+			t.Errorf("css missing %q:\n%s", want, css)
+		}
+	}
+	th = ThemeFromForm(th, url.Values{"page_width": {"12"}, "page_align": {"diagonal"}})
+	if th.PageWidth != 400 || th.PageAlign != "center" {
+		t.Errorf("page width clamp: %+v", th)
+	}
+	if th = ThemeFromForm(th, url.Values{"page_width": {""}}); th.PageWidth != 0 {
+		t.Errorf("blank is the screen: %+v", th)
+	}
 	th.LeftOn = false
 	if th.AreaOn("left") || !th.AreaOn("above") || !th.AreaOn("bogus") {
 		t.Errorf("area switches: %+v", th)