From 5d42196297c9afa9232a1867d66b17e4df29a0ae Mon Sep 17 00:00:00 2001
From: Trevor Buckner <calculuschild@gmail.com>
Date: Thu, 9 Sep 2021 09:14:16 -0400
Subject: [PATCH] Give spellList "wide" class for consistency

---
 client/homebrew/brewRenderer/brewRenderer.jsx          |  2 +-
 .../homebrew/editor/snippetbar/snippets/magic.gen.js   |  4 ++--
 client/homebrew/pages/printPage/printPage.jsx          |  2 +-
 themes/5ePhb.style.less                                | 10 +++++-----
 4 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/client/homebrew/brewRenderer/brewRenderer.jsx b/client/homebrew/brewRenderer/brewRenderer.jsx
index 2b8019f73..771abdfaf 100644
--- a/client/homebrew/brewRenderer/brewRenderer.jsx
+++ b/client/homebrew/brewRenderer/brewRenderer.jsx
@@ -131,7 +131,7 @@ 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 {
-			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)
+			pageText += `\n&nbsp;\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='page' id={`p${index + 1}`} key={index} >
 					<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
diff --git a/client/homebrew/editor/snippetbar/snippets/magic.gen.js b/client/homebrew/editor/snippetbar/snippets/magic.gen.js
index 43bc5843b..33ce8406d 100644
--- a/client/homebrew/editor/snippetbar/snippets/magic.gen.js
+++ b/client/homebrew/editor/snippetbar/snippets/magic.gen.js
@@ -60,13 +60,13 @@ module.exports = {
 		const levels = ['Cantrips (0 Level)', '1st Level', '2nd Level', '3rd Level', '4th Level', '5th Level', '6th Level', '7th Level', '8th Level', '9th Level'];
 
 		const content = _.map(levels, (level)=>{
-			const spells = _.map(_.sampleSize(spellNames, _.random(5, 15)), (spell)=>{
+			const spells = _.map(_.sampleSize(spellNames, _.random(4, 10)), (spell)=>{
 				return `- ${spell}`;
 			}).join('\n');
 			return `##### ${level} \n${spells} \n`;
 		}).join('\n');
 
-		return `{{spellList\n${content}\n}}`;
+		return `{{spellList,wide\n${content}\n}}`;
 	},
 
 	spell : function(){
diff --git a/client/homebrew/pages/printPage/printPage.jsx b/client/homebrew/pages/printPage/printPage.jsx
index b77fbb8f7..1f4d2f12e 100644
--- a/client/homebrew/pages/printPage/printPage.jsx
+++ b/client/homebrew/pages/printPage/printPage.jsx
@@ -46,7 +46,7 @@ const PrintPage = createClass({
 			});
 		} else {
 			return _.map(this.state.brewText.split(/^\\page$/gm), (pageText, index)=>{
-				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)
+				pageText += `\n&nbsp;\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='page' id={`p${index + 1}`} key={index} >
 						<div className='columnWrapper' dangerouslySetInnerHTML={{ __html: Markdown.render(pageText) }} />
diff --git a/themes/5ePhb.style.less b/themes/5ePhb.style.less
index f30adb21e..81d596a5d 100644
--- a/themes/5ePhb.style.less
+++ b/themes/5ePhb.style.less
@@ -567,10 +567,7 @@ body {
 // *****************************/
 .page .spellList{
 	.useSansSerif();
-	column-count        : 4;
-	column-span         : all;
-	-webkit-column-span : all;
-	-moz-column-span    : all;
+	column-count        : 2;
 	ul+h5{
 		margin-top : 15px;
 	}
@@ -587,6 +584,9 @@ body {
 		page-break-inside           : auto;
 		break-inside                : auto;
 	}
+	&.wide{
+		column-count : 4;
+	}
 }
 
 //*****************************
@@ -717,7 +717,7 @@ body {
 		break-inside      : avoid;
 		display           : inline-block;
 		min-width         : 100%;
-		-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
+		//-webkit-transform : translateZ(0); //Prevents shadows from breaking across columns
 	}
 	.inline-block {
 		display : inline-block;