From 9c6d87552409e901cdb22b3b65d10d5e21fc5db1 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Sun, 22 Aug 2021 23:00:43 -0400
Subject: [PATCH 1/2] Add wrapper to .page to improve `wide` behavior with
 columns

---
 client/homebrew/brewRenderer/brewRenderer.jsx  | 6 +++++-
 client/homebrew/brewRenderer/brewRenderer.less | 6 ++++++
 themes/5ePhb.style.less                        | 8 +++++---
 3 files changed, 16 insertions(+), 4 deletions(-)

diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index e3ab31742..b747aa4a6 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -131,7 +131,11 @@ const BrewRenderer = createClass({
 		if(this.props.renderer == 'legacy')
 			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
 		else
-			return <div className='phb3 page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} key={index} />;
+			return (
+				<div className='pageWrapper' id={`p${index + 1}`} key={index} >
+					<div className='page' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
+				</div>
+			);
 	},
 
 	renderPages : function(){
diff --git a/client/homebrew/brewRenderer/brewRenderer.less b/client/homebrew/brewRenderer/brewRenderer.less
index abb80fc5f..8cd8b751c 100644
--- a/client/homebrew/brewRenderer/brewRenderer.less
+++ b/client/homebrew/brewRenderer/brewRenderer.less
@@ -11,6 +11,12 @@
 			margin-left   : auto;
 			box-shadow    : 1px 4px 14px #000;
 		}
+		&>.pageWrapper{
+			margin-right  : auto;
+			margin-bottom : 30px;
+			margin-left   : auto;
+			box-shadow    : 1px 4px 14px #000;
+		}
 	}
 }
 .pane{
diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less
index 82c7c7dff..1f1356f5b 100644
--- a/themes/5ePhb.style.less
+++ b/themes/5ePhb.style.less
@@ -46,8 +46,7 @@ body {
 	-webkit-column-gap   : 0.9cm;
 	-moz-column-gap      : 0.9cm;
 }
-.page{
-	.useColumns();
+.pageWrapper{
 	counter-increment : phb-page-numbers;
 	position          : relative;
 	z-index           : 15;
@@ -55,9 +54,12 @@ body {
 	overflow          : hidden;
 	height            : 279.4mm;
 	width             : 215.9mm;
-	padding           : 1.4cm 1.9cm 1.7cm;
 	background-color  : @background;
 	background-image  : @backgroundImage;
+}
+.page{
+	.useColumns();
+	padding           : 1.4cm 1.9cm 1.7cm;
 	font-family       : BookInsanityRemake;
 	font-size         : 0.34cm;
 	text-rendering    : optimizeLegibility;

From 039db01b317d701883eb25726a8a12d3046fa935 Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Mon, 23 Aug 2021 23:03:57 -0400
Subject: [PATCH 2/2] Artificial column-break at page end

Inserting a \column into the end of the page (and a nbsp after). This makes the page emulate column-fill:auto (the standard "Homebrewery" behavior) since there is always at least one column-break, making the browser try less hard to aggressively "balance" the columns.

Then, when a user inserts `wide` or `column-span` elements, `column-fill: balance` will be able to take over and work as we expect.
---
 client/homebrew/brewRenderer/brewRenderer.jsx | 4 +++-
 themes/5ePhb.style.less                       | 1 +
 2 files changed, 4 insertions(+), 1 deletion(-)

diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index b747aa4a6..d22428f21 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -130,12 +130,14 @@ const BrewRenderer = createClass({
 	renderPage : function(pageText, index){
 		if(this.props.renderer == 'legacy')
 			return <div className='phb page' id={`p${index + 1}`} dangerouslySetInnerHTML={{ __html: MarkdownLegacy.render(pageText) }} key={index} />;
-		else
+		else {
+			pageText += `\n\\column\n&nbsp;`; //Artificial column break at page end to emulate column-fill:auto (until `wide` is used, when column-fill:balance will reappear)
 			return (
 				<div className='pageWrapper' id={`p${index + 1}`} key={index} >
 					<div className='page' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
 				</div>
 			);
+		}
 	},
 
 	renderPages : function(){
diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less
index 1f1356f5b..eaf69023a 100644
--- a/themes/5ePhb.style.less
+++ b/themes/5ePhb.style.less
@@ -59,6 +59,7 @@ body {
 }
 .page{
 	.useColumns();
+	max-height        : 100%;
 	padding           : 1.4cm 1.9cm 1.7cm;
 	font-family       : BookInsanityRemake;
 	font-size         : 0.34cm;