From 43ba216bfa52361533a5122a1729d6a8c9214b86 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Wed, 9 Sep 2026 20:56:47 +0200
Subject: [PATCH] better use of space

---
 .../basePages/listPage/brewItem/brewItem.less | 867 ++++++++----------
 .../pages/basePages/listPage/listPage.less    | 326 ++++---
 2 files changed, 546 insertions(+), 647 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
index a8b2c4f59..2f05dae78 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
@@ -3,713 +3,626 @@
 @import url('https://fonts.googleapis.com/css2?family=Alata&display=swap');
 
 .brewItem {
-	position: relative;
-	box-sizing: border-box;
-	display: inline-block;
-	overflow: hidden;
-	break-inside: avoid;
-	-webkit-column-break-inside: avoid;
-	page-break-inside: avoid;
+	position                    : relative;
+	box-sizing                  : border-box;
+	display                     : inline-block;
+	overflow                    : hidden;
+	break-inside                : avoid;
+	-webkit-column-break-inside : avoid;
+	break-inside           : avoid;
 	.thumbnail {
-		position: absolute;
-		top: 0;
-		right: 0;
-		z-index: -1;
-		width: 150px;
-		height: 100%;
-		background-repeat: no-repeat;
-		background-position: right top;
-		background-size: contain;
+		position            : absolute;
+		top                 : 0;
+		right               : 0;
+		z-index             : -1;
+		width               : 150px;
+		height              : 100%;
+		background-repeat   : no-repeat;
+		background-position : right top;
+		background-size     : contain;
 	}
 	.text {
 		h4 {
-			margin-bottom: 5px;
-			font-size: 2.2em;
+			margin-bottom : 5px;
+			font-size     : 2.2em;
 		}
 	}
 	.info {
-		position: initial;
-		bottom: 2px;
-		font-size: 1.2em;
-		& > span {
-			line-height: 1.5em;
-		}
-		a {
-			color: inherit;
-		}
+		position  : initial;
+		bottom    : 2px;
+		font-size : 1.2em;
+		& > span { line-height : 1.5em; }
+		a { color : inherit; }
 	}
 	.brewTags span {
-		display: inline-block;
-		padding: 2px;
-		margin: 2px;
-		font-weight: bold;
-		white-space: nowrap;
-		cursor: pointer;
-		background-color: #c8ac6e3b;
-		border: 1px solid #c8ac6e;
-		border-color: currentColor;
-		border-radius: 4px;
+		display          : inline-block;
+		padding          : 2px;
+		margin           : 2px;
+		font-weight      : bold;
+		white-space      : nowrap;
+		cursor           : pointer;
+		background-color : #C8AC6E3B;
+		border           : 1px solid #C8AC6E;
+		border-color     : currentColor;
+		border-radius    : 4px;
 		&::before {
-			margin-right: 3px;
-			font-family: 'Font Awesome 6 Free';
-			font-size: 12px;
+			margin-right : 3px;
+			font-family  : 'Font Awesome 6 Free';
+			font-size    : 12px;
 		}
 		&.type {
-			color: #008000;
-			background-color: #0080003b;
-			&::before {
-				content: '\f0ad';
-			}
+			color            : #008000;
+			background-color : #0080003B;
+			&::before { content : '\f0ad'; }
 		}
 		&.group {
-			color: #000000;
-			background-color: #5050503b;
-			&::before {
-				content: '\f500';
-			}
+			color            : #000000;
+			background-color : #5050503B;
+			&::before { content : '\f500'; }
 		}
 		&.meta {
-			color: #000080;
-			background-color: #0000803b;
-			&::before {
-				content: '\f05a';
-			}
+			color            : #000080;
+			background-color : #0000803B;
+			&::before { content : '\f05a'; }
 		}
 		&.system {
-			color: #800000;
-			background-color: #8000003b;
-			&::before {
-				content: '\f518';
-			}
+			color            : #800000;
+			background-color : #8000003B;
+			&::before { content : '\f518'; }
 		}
 	}
-	&:nth-child(2n + 1) {
-		margin-right: 0px;
-	}
+	&:nth-child(2n + 1) { margin-right : 0px; }
 	.links {
-		text-align: center;
-		background-color: fade(black, 60%);
+		text-align       : center;
+		background-color : fade(black, 60%);
 		a,
 		button {
 			.animate(opacity);
-			display: block;
-			margin: 8px 0px;
-			font-size: 1.3em;
-			color: white;
-			text-decoration: unset;
-			opacity: 0.6;
-			width: 100%;
-			&:hover {
-				opacity: 1;
-			}
-			i {
-				cursor: pointer;
-			}
+			display         : block;
+			width           : 100%;
+			margin          : 8px 0px;
+			font-size       : 1.3em;
+			color           : white;
+			text-decoration : unset;
+			opacity         : 0.6;
+			&:hover { opacity : 1; }
+			i { cursor : pointer; }
 		}
 	}
 	.googleDriveIcon {
-		padding: 0px;
-		margin: -5px;
-		height: 18px;
+		height  : 18px;
+		padding : 0px;
+		margin  : -5px;
 	}
 	.homebreweryIcon {
-		position: relative;
-		padding: 0px;
-		top: 5px;
-		left: -7.5px;
-		height: 18px;
+		position : relative;
+		top      : 5px;
+		left     : -7.5px;
+		height   : 18px;
+		padding  : 0px;
 	}
 }
 
 .grid > .brewItem {
-	position: relative;
-	box-sizing: border-box;
-	display: inline-block;
-	width: clamp(300px, 48%, 600px);
-	min-height: 125px;
-	padding: 5px 15px 2px 6px;
-	padding-right: 15px;
-	overflow: hidden;
-	vertical-align: top;
-	background-color: #cab2802e;
-	background-image: url('https://ik.imagekit.io/5eCleric/background%20note.png');
-	background-size: cover;
-	border: 1px solid #c9ad6a;
-	border-radius: 5px;
-	box-shadow: 0px 4px 5px 0px #333333;
-	break-inside: avoid;
-	-webkit-column-break-inside: avoid;
-	page-break-inside: avoid;
-	isolation: isolate;
+	position                    : relative;
+	box-sizing                  : border-box;
+	display                     : inline-block;
+	width                       : clamp(300px, 48%, 600px);
+	min-height                  : 125px;
+	padding                     : 5px 15px 2px 6px;
+	padding-right               : 15px;
+	overflow                    : hidden;
+	vertical-align              : top;
+	background-color            : #CAB2802E;
+	background-image            : url('https://ik.imagekit.io/5eCleric/background%20note.png');
+	background-size             : cover;
+	border                      : 1px solid #C9AD6A;
+	border-radius               : 5px;
+	box-shadow                  : 0px 4px 5px 0px #333333;
+	isolation                   : isolate;
+	break-inside                : avoid;
+	-webkit-column-break-inside : avoid;
+	break-inside           : avoid;
 	.thumbnail {
-		position: absolute;
-		top: 0;
-		right: 0;
-		z-index: -1;
-		width: 155px;
-		height: 100%;
-		background-repeat: no-repeat;
-		background-position: right top;
-		background-size: contain;
-		opacity: 50%;
-		-webkit-mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%);
-		mask-image: linear-gradient(80deg, #00000000 20%, #005500 40%);
+		position            : absolute;
+		top                 : 0;
+		right               : 0;
+		z-index             : -1;
+		width               : 155px;
+		height              : 100%;
+		background-repeat   : no-repeat;
+		background-position : right top;
+		background-size     : contain;
+		opacity             : 50%;
+		-webkit-mask-image  : linear-gradient(80deg, #00000000 20%, #005500 40%);
+		mask-image          : linear-gradient(80deg, #00000000 20%, #005500 40%);
 	}
 	.text {
-		min-height: 54px;
+		min-height : 54px;
 		h2 {
-			margin-bottom: 5px;
-			font-size: 1.3em;
+			margin-bottom : 5px;
+			font-size     : 1.3em;
 		}
 	}
 	.info {
-		position: initial;
-		bottom: 2px;
+		position  : initial;
+		bottom    : 2px;
 
-		font-size: 0.9em;
+		font-size : 0.9em;
 		& > span {
-			margin-right: 12px;
-			line-height: 1.5em;
+			margin-right : 12px;
+			line-height  : 1.5em;
 		}
 	}
 	.brewTags span {
-		display: inline-block;
-		padding: 2px;
-		margin: 2px;
-		font-weight: bold;
-		white-space: nowrap;
-		cursor: pointer;
-		background-color: #c8ac6e3b;
-		border: 1px solid #c8ac6e;
-		border-color: currentColor;
-		border-radius: 4px;
+		display          : inline-block;
+		padding          : 2px;
+		margin           : 2px;
+		font-weight      : bold;
+		white-space      : nowrap;
+		cursor           : pointer;
+		background-color : #C8AC6E3B;
+		border           : 1px solid #C8AC6E;
+		border-color     : currentColor;
+		border-radius    : 4px;
 		&::before {
-			margin-right: 3px;
-			font-family: 'Font Awesome 6 Free';
-			font-size: 12px;
+			margin-right : 3px;
+			font-family  : 'Font Awesome 6 Free';
+			font-size    : 12px;
 		}
 		&.type {
-			color: #008000;
-			background-color: #0080003b;
-			&::before {
-				content: '\f0ad';
-			}
+			color            : #008000;
+			background-color : #0080003B;
+			&::before { content : '\f0ad'; }
 		}
 		&.group {
-			color: #000000;
-			background-color: #5050503b;
-			&::before {
-				content: '\f500';
-			}
+			color            : #000000;
+			background-color : #5050503B;
+			&::before { content : '\f500'; }
 		}
 		&.meta {
-			color: #000080;
-			background-color: #0000803b;
-			&::before {
-				content: '\f05a';
-			}
+			color            : #000080;
+			background-color : #0000803B;
+			&::before { content : '\f05a'; }
 		}
 		&.system {
-			color: #800000;
-			background-color: #8000003b;
-			&::before {
-				content: '\f518';
-			}
+			color            : #800000;
+			background-color : #8000003B;
+			&::before { content : '\f518'; }
 		}
 	}
 	&:hover,
 	&:focus-within {
-		.links {
-			opacity: 1;
-		}
+		.links { opacity : 1; }
 	}
 	.links {
 		.animate(opacity);
-		position: absolute;
-		top: 0px;
-		right: 0px;
-		width: 2em;
-		height: 100%;
-		text-align: center;
-		background-color: fade(black, 60%);
-		opacity: 0;
+		position         : absolute;
+		top              : 0px;
+		right            : 0px;
+		width            : 2em;
+		height           : 100%;
+		text-align       : center;
+		background-color : fade(black, 60%);
+		opacity          : 0;
 		a,
 		button {
 			.animate(opacity);
-			display: block;
-			margin: 8px 0px;
-			font-size: 1.3em;
-			color: white;
-			text-decoration: unset;
-			opacity: 0.6;
-			width: 100%;
-			&:hover {
-				opacity: 1;
-			}
-			i {
-				cursor: pointer;
-			}
+			display         : block;
+			width           : 100%;
+			margin          : 8px 0px;
+			font-size       : 1.3em;
+			color           : white;
+			text-decoration : unset;
+			opacity         : 0.6;
+			&:hover { opacity : 1; }
+			i { cursor : pointer; }
 		}
 	}
 	.googleDriveIcon {
-		padding: 0px;
-		margin: -5px;
-		height: 18px;
+		height  : 18px;
+		padding : 0px;
+		margin  : -5px;
 	}
 	.homebreweryIcon {
-		position: relative;
-		padding: 0px;
-		top: 5px;
-		left: -7.5px;
-		height: 18px;
+		position : relative;
+		top      : 5px;
+		left     : -7.5px;
+		height   : 18px;
+		padding  : 0px;
 	}
 }
 
 .list > .brewItem {
-	height: 50px;
-	min-height: unset;
-	width: 100%;
-	display: grid;
-	grid-template-columns: 2fr 3fr 1fr;
-	align-items: center;
-	color: rgb(2, 2, 2);
-	background: #efefef;
-	overflow: visible;
-	font-size: 12px;
+	display               : grid;
+	grid-template-columns : 2fr 3fr 1fr;
+	align-items           : center;
+	width                 : 100%;
+	height                : 50px;
+	min-height            : unset;
+	overflow              : visible;
+	font-size             : 12px;
+	color                 : rgb(2, 2, 2);
+	background            : #EFEFEF;
 
 	.text {
-		min-height: unset;
-		width: 100%;
-		padding-inline: 10px;
-		height: 100%;
 
-		display: grid;
-		align-content: center;
+		display        : grid;
+		align-content  : center;
+		width          : 100%;
+		height         : 100%;
+		min-height     : unset;
+		padding-inline : 10px;
 
 		h2 {
-			text-overflow: ellipsis;
-			overflow: hidden;
-			white-space: nowrap;
-			font-size: 20px;
-			font-weight: 900;
-			height: 100%;
-			min-height: 1.4em;
-			align-content: center;
-			vertical-align: middle;
+			align-content  : center;
+			height         : 100%;
+			min-height     : 1.4em;
+			overflow       : hidden;
+			text-overflow  : ellipsis;
+			font-size      : 20px;
+			font-weight    : 900;
+			vertical-align : middle;
+			white-space    : nowrap;
 		}
 
-		.description {
-			display: none;
-		}
+		.description { display : none; }
 	}
 
 	.info {
-		width: clamp(400px, 100%, 650px);
-		display: grid;
-		grid-template-areas: 'tags authors views pages update storage';
-		justify-content: end;
-		align-content: space-around;
-		align-items: center;
-		grid-template-columns: 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px;
-		br {
-			display: none;
-		}
+		display               : grid;
+		grid-template-areas   : 'tags authors views pages update storage';
+		grid-template-columns : 2fr 1.5fr 0.7fr 0.6fr 1.5fr 20px;
+		align-content         : space-around;
+		align-items           : center;
+		justify-content       : end;
+		width                 : clamp(400px, 100%, 650px);
+		br { display : none; }
 		.brewTags {
-			display: inline-block;
-			grid-area: tags;
-			min-width: 100px;
+			display   : inline-block;
+			grid-area : tags;
+			min-width : 100px;
 		}
 		.brewAuthors {
-			display: inline-block;
-			grid-area: authors;
-			height: fit-content;
-			width: 150px;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			display: -webkit-box;
-			-webkit-line-clamp: 3;
-			-webkit-box-orient: vertical;
+			display            : inline-block;
+			display            : -webkit-box;
+			grid-area          : authors;
+			width              : 150px;
+			height             : fit-content;
+			overflow           : hidden;
+			text-overflow      : ellipsis;
+			-webkit-line-clamp : 3;
+			-webkit-box-orient : vertical;
 
-			&:has(a:only-of-type) {
-				width: fit-content;
-			}
+			&:has(a:only-of-type) { width : fit-content; }
 		}
 
 		.lastViewed {
-			display: inline-block;
-			grid-area: views;
-			min-width: 50px;
+			display   : inline-block;
+			grid-area : views;
+			min-width : 50px;
 		}
 		.brewPages {
-			display: inline-block;
-			grid-area: pages;
-			min-width: 40px;
+			display   : inline-block;
+			grid-area : pages;
+			min-width : 40px;
 		}
 		[title*='Created'] {
-			display: inline-block;
-			grid-area: update;
+			display   : inline-block;
+			grid-area : update;
 		}
 		[title*='Storage'] {
-			display: inline-block;
-			grid-area: storage;
-			filter: drop-shadow(0 0 10px white);
+			display   : inline-block;
+			grid-area : storage;
+			filter    : drop-shadow(0 0 10px white);
 		}
 
 		.brewTags:has(span:nth-of-type(4)) {
-			position: relative;
-			overflow: hidden;
-			display: flex;
-			flex-wrap: wrap;
+			position  : relative;
+			display   : flex;
+			flex-wrap : wrap;
+			overflow  : hidden;
 
-			span:nth-of-type(n + 2) {
-				display: none;
-			}
+			span:nth-of-type(n + 2) { display : none; }
 
 			&:hover {
-				overflow: visible;
-				position: absolute;
-				top: 0;
-				background: #707070;
-				height: max-content;
-				z-index: 100;
-				width: min-content;
-				padding: 10px;
+				position   : absolute;
+				top        : 0;
+				z-index    : 100;
+				width      : min-content;
+				height     : max-content;
+				padding    : 10px;
+				overflow   : visible;
+				background : #707070;
 
-				span:nth-of-type(n + 4) {
-					display: block;
-				}
+				span:nth-of-type(n + 4) { display : block; }
 
-				&:after {
-					position: absolute;
-					top: 48px;
-					right: 0;
-					left: 0;
-					bottom: 0;
-					content: '';
-					display: block;
-					height: calc(100% - 48px);
-					background: #707070;
-					border-inline: 1px solid gold;
-					border-bottom: 1px solid gold;
-					border-bottom-left-radius: 5px;
-					border-bottom-right-radius: 5px;
-					z-index: -1;
+				&::after {
+					position                   : absolute;
+					top                        : 48px;
+					right                      : 0;
+					bottom                     : 0;
+					left                       : 0;
+					z-index                    : -1;
+					display                    : block;
+					height                     : calc(100% - 48px);
+					content                    : '';
+					background                 : #707070;
+					border-inline              : 1px solid gold;
+					border-bottom              : 1px solid gold;
+					border-bottom-right-radius : 5px;
+					border-bottom-left-radius  : 5px;
 				}
 			}
 		}
 	}
 
 	.links {
-		opacity: 1;
-		background: none;
-		position: relative;
-		display: flex;
-		justify-content: space-evenly;
-		width: 100%;
-		align-items: center;
-		height: 100%;
+		position        : relative;
+		display         : flex;
+		align-items     : center;
+		justify-content : space-evenly;
+		width           : 100%;
+		height          : 100%;
+		background      : none;
+		opacity         : 1;
 
 		> a {
-			opacity: 0.8;
+			opacity : 0.8;
 
-			&:hover {
-				opacity: 1;
-			}
+			&:hover { opacity : 1; }
 		}
 
-		.editLink {
-			color: @green;
-		}
-		.deleteLink {
-			color: @red;
-		}
+		.editLink { color : @green; }
+		.deleteLink { color : @red; }
 
-		.shareLink {
-			color: deepskyblue;
-		}
+		.shareLink { color : deepskyblue; }
 
-		.downloadLink {
-			color: coral;
-		}
+		.downloadLink { color : coral; }
 	}
 }
 
 .card > .brewItem {
-	background-color: grey;
-	background-image: url('@themes/assets/naturalCritLogoBlack.svg');
-	background-size: 60%;
-	background-position: center 20%;
-	background-repeat: no-repeat;
-	background-blend-mode: soft-light;
-	width: 300px;
-	height: 400px;
-	border: 1px solid;
-	margin: 10px;
-	border-radius: 10px;
-	padding: 10px;
-	padding-top: 100px;
-	padding-bottom: 50px;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-	isolation: isolate;
-	position: relative;
-	color: white;
-	font-size: 13px;
+	position              : relative;
+	display               : flex;
+	flex-direction        : column;
+	justify-content       : flex-end;
+	width                 : 300px;
+	height                : 400px;
+	padding               : 10px;
+	padding-top           : 100px;
+	padding-bottom        : 50px;
+	margin                : 10px;
+	font-size             : 13px;
+	color                 : white;
+	background-color      : grey;
+	background-image      : url('@themes/assets/naturalCritLogoBlack.svg');
+	background-repeat     : no-repeat;
+	background-position   : center 20%;
+	background-size       : 60%;
+	border                : 1px solid;
+	border-radius         : 10px;
+	background-blend-mode : soft-light;
+	isolation             : isolate;
 
 	&::before {
-		display: block;
-		content: '';
-		height: 50%;
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		background-image: linear-gradient(0deg, #777f 0, #7770 90%);
-		z-index: -1;
-		transition: height 0.2s;
+		position         : absolute;
+		right            : 0;
+		bottom           : 0;
+		left             : 0;
+		z-index          : -1;
+		display          : block;
+		height           : 50%;
+		content          : '';
+		background-image : linear-gradient(0deg, #777777FF 0, #77777700 90%);
+		transition       : height 0.2s;
 	}
 
 	&:hover {
 		&::before {
-			height: 100%;
-			background-image: linear-gradient(0deg, #777f 0, #777f 42%, #7770 55%);
-		}
-		.text .description {
-			height: fit-content;
+			height           : 100%;
+			background-image : linear-gradient(0deg, #777777FF 0, #777777FF 42%, #77777700 55%);
 		}
+		.text .description { height : fit-content; }
 	}
 
 	.thumbnail {
-		position: absolute;
-		top: 0;
-		left: 0;
-		z-index: -2;
-		width: 100%;
-		height: 100%;
-		background-repeat: no-repeat;
-		background-position: right top;
-		background-size: cover;
+		position            : absolute;
+		top                 : 0;
+		left                : 0;
+		z-index             : -2;
+		width               : 100%;
+		height              : 100%;
+		background-repeat   : no-repeat;
+		background-position : right top;
+		background-size     : cover;
 	}
 
 	.text {
-		filter: drop-shadow(0 1px 4px black);
+		filter : drop-shadow(0 1px 4px black);
 
 		h2 {
-			font-weight: 900;
-			font-size: 1.2em;
+			font-size   : 1.2em;
+			font-weight : 900;
 		}
 
 		.description {
-			height: 0;
-			overflow: hidden;
-			transition: height 0.2s;
+			height     : 0;
+			overflow   : hidden;
+			transition : height 0.2s;
 		}
 	}
 
 	.info {
-		filter: drop-shadow(0 1px 2px black);
-		height: 130px;
-		display: grid;
-		grid-template-areas:
-			'tags tags tags'
+		display             : grid;
+		grid-template-areas : 'tags tags tags'
 			'authors authors authors'
 			'pages views views'
 			'update update storage';
+		height              : 130px;
+		filter              : drop-shadow(0 1px 2px black);
 
 		.brewTags {
-			color: black;
-			grid-area: tags;
+			grid-area : tags;
+			color     : black;
 
-			i {
-				color: white;
-			}
-			> span {
-				background: hsl(from currentColor h 20% 80%);
-			}
-		}
-		.brewAuthors {
-			grid-area: authors;
-		}
-		.brewPages {
-			grid-area: pages;
-		}
-		.lastViewed {
-			grid-area: views;
-		}
-		.lastUpdated {
-			grid-area: update;
-		}
-		.storage {
-			grid-area: storage;
+			i { color : white; }
+			> span { background : hsl(from currentColor h 20% 80%); }
 		}
+		.brewAuthors { grid-area : authors; }
+		.brewPages { grid-area : pages; }
+		.lastViewed { grid-area : views; }
+		.lastUpdated { grid-area : update; }
+		.storage { grid-area : storage; }
 	}
 
 	.links {
-		position: absolute;
-		bottom: 0;
-		left: 0;
-		right: 0;
-		height: 40px;
-		display: flex;
+		position : absolute;
+		right    : 0;
+		bottom   : 0;
+		left     : 0;
+		display  : flex;
+		height   : 40px;
 	}
 }
 
-@media screen and (max-width: 1400px) {
+@media screen and (max-width : 1400px) {
 	.brewCollection .brewGroup {
 		&.list {
 			.brewItem:not(.detailsOpen) {
-				grid-template-columns: 3fr 2.5fr 1fr;
+				grid-template-columns : 3fr 2.5fr 1fr;
 				.info {
-					width: clamp(200px, 100%, 650px);
-					grid-template-columns: 2fr 1fr 20px;
-					grid-template-areas: 'tags update storage';
+					grid-template-areas   : 'tags update storage';
+					grid-template-columns : 2fr 1fr 20px;
+					width                 : clamp(200px, 100%, 650px);
 				}
 
 				.brewPages,
 				.lastViewed,
-				.brewAuthors {
-					display: none;
-				}
-			}
-			.brewItem {
-				transition: height 0.2s;
-			}
-			.detailsOpen {
-				height: 70px;
+				.brewAuthors { display : none; }
 			}
+			.brewItem { transition : height 0.2s; }
+			.detailsOpen { height : 70px; }
 		}
 	}
 }
 
-@media screen and (max-width: 1200px) {
+@media screen and (max-width : 1200px) {
 	.brewCollection .brewGroup {
 		&.list {
 			.brewItem:not(.detailsOpen) {
-				grid-template-columns: 3fr 2fr 1fr;
+				grid-template-columns : 3fr 2fr 1fr;
 				.info {
-					width: clamp(200px, 100%, 650px);
-					grid-template-columns: 1fr 20px;
-					grid-template-areas: 'tags storage';
+					grid-template-areas   : 'tags storage';
+					grid-template-columns : 1fr 20px;
+					width                 : clamp(200px, 100%, 650px);
 				}
 
 				.brewPages,
 				.lastViewed,
 				.brewAuthors,
-				.lastUpdated {
-					display: none;
-				}
+				.lastUpdated { display : none; }
 			}
 			.detailsOpen {
-				grid-template-columns: 3fr 2fr 1fr;
+				grid-template-columns : 3fr 2fr 1fr;
 
 				.info {
-					width: clamp(200px, 100%, 650px);
-					display: grid;
-					grid-template-columns: 2fr 1fr 1fr;
-					grid-template-rows: 1fr 1fr;
-					grid-template-areas:
-						'tags views pages'
+					display               : grid;
+					grid-template-areas   : 'tags views pages'
 						'authors update storage';
+					grid-template-rows    : 1fr 1fr;
+					grid-template-columns : 2fr 1fr 1fr;
+					width                 : clamp(200px, 100%, 650px);
 				}
 				.lastUpdated {
-					width: 100px;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					white-space: nowrap;
-					word-break: break-all;
+					width         : 100px;
+					overflow      : hidden;
+					text-overflow : ellipsis;
+					word-break    : break-all;
+					white-space   : nowrap;
 				}
 			}
 		}
 	}
 }
 
-@media screen and (max-width: 800px) {
+@media screen and (max-width : 800px) {
 	.brewCollection .brewGroup {
 		&.list {
 			.brewItem:not(.detailsOpen) {
 				.info {
-					width: clamp(200px, 100%, 650px);
-					grid-template-columns: 1fr;
-					grid-template-areas: 'tags';
+					grid-template-areas   : 'tags';
+					grid-template-columns : 1fr;
+					width                 : clamp(200px, 100%, 650px);
 				}
 
 				.brewPages,
 				.lastViewed,
 				.brewAuthors,
 				.lastUpdated,
-				.storage {
-					display: none;
-				}
+				.storage { display : none; }
 			}
 
-			.brewItem {
-				transition: height 0.2s;
-			}
+			.brewItem { transition : height 0.2s; }
 			.detailsOpen {
-				height: 100px;
-				padding: 5px;
-				display: grid;
-				grid-template-columns: 3fr 3fr 30px;
+				display               : grid;
+				grid-template-columns : 3fr 3fr 30px;
+				height                : 100px;
+				padding               : 5px;
 
 				.text {
-					height: 100%;
-					padding: 0;
+					height  : 100%;
+					padding : 0;
 
 					h2 {
-						height: fit-content;
-						white-space: wrap;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						display: -webkit-box;
-						-webkit-line-clamp: 3;
-						-webkit-box-orient: vertical;
+						display            : -webkit-box;
+						height             : fit-content;
+						overflow           : hidden;
+						text-overflow      : ellipsis;
+						-webkit-line-clamp : 3;
+						white-space        : wrap;
+						-webkit-box-orient : vertical;
 					}
 				}
 
 				.info {
-					height: 100%;
-					width: 100%;
-					display: grid;
-					grid-template-columns: 2fr 1fr 1fr 20px;
-					grid-template-areas:
-						'tags pages views views'
+					display               : grid;
+					grid-template-areas   : 'tags pages views views'
 						'authors update update storage';
+					grid-template-columns : 2fr 1fr 1fr 20px;
+					width                 : 100%;
+					height                : 100%;
 				}
 				.links {
-					display: flex;
-					flex-direction: column;
-					gap: 5px;
+					display        : flex;
+					flex-direction : column;
+					gap            : 5px;
 					a,
-					button {
-						margin: 0;
-					}
+					button { margin : 0; }
 				}
 			}
 		}
 	}
 }
 
-@media screen and (max-width: 650px) {
+@media screen and (max-width : 650px) {
 	.brewCollection .brewGroup {
 		&.list {
 			.brewItem:not(.detailsOpen) {
-				grid-template-columns: 3fr 1fr;
-				.info {
-					display: none;
-				}
+				grid-template-columns : 3fr 1fr;
+				.info { display : none; }
 			}
 			.detailsOpen {
-				grid-template-rows: 1fr 2fr;
+				grid-template-rows : 1fr 2fr;
 				.info {
-					display: grid;
+					display : grid;
 
 					.lastUpdated {
-						width: 100px;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						white-space: nowrap;
-						word-break: break-all;
+						width         : 100px;
+						overflow      : hidden;
+						text-overflow : ellipsis;
+						word-break    : break-all;
+						white-space   : nowrap;
 					}
 				}
 			}
diff --git a/client/homebrew/pages/basePages/listPage/listPage.less b/client/homebrew/pages/basePages/listPage/listPage.less
index 35ab5fa79..d9f6dbc72 100644
--- a/client/homebrew/pages/basePages/listPage/listPage.less
+++ b/client/homebrew/pages/basePages/listPage/listPage.less
@@ -2,81 +2,87 @@
 @import '@sharedStyles/colors.less';
 
 .noColumns() {
-	-webkit-column-width: auto;
-	-moz-column-width: auto;
-	column-width: auto;
-	-webkit-column-count: auto;
-	-moz-column-count: auto;
-	column-count: auto;
-	column-fill: auto;
-	-webkit-column-gap: normal;
-	-moz-column-gap: normal;
-	column-gap: normal;
-	height: auto;
-	min-height: 279.4mm;
-	margin: 20px auto;
-	contain: unset;
+	-webkit-column-width : auto;
+	-moz-column-width    : auto;
+	column-width         : auto;
+	-webkit-column-count : auto;
+	-moz-column-count    : auto;
+	column-count         : auto;
+	column-fill          : auto;
+	-webkit-column-gap   : normal;
+	-moz-column-gap      : normal;
+	column-gap           : normal;
+	height               : auto;
+	min-height           : 279.4mm;
+	margin               : 20px auto;
+	contain              : unset;
 }
 .listPage {
 	.content {
-		z-index: 1;
-		padding: clamp(20px, 5vh, 200px) 10vw;
+		z-index        : 1;
+		padding-block  : clamp(20px, 5vh, 200px);
+		padding-inline : clamp(20px, 20vw, 200px);
+
 		.noBrews {
-			margin: 10px 0px;
-			font-size: 1.3em;
-			font-style: italic;
+			margin     : 10px 0px;
+			font-size  : 1.3em;
+			font-style : italic;
 		}
 		.brewCollection {
-			width: fit-content;
-
 			h1 {
-				margin-bottom: 20px;
-				font-size: 25px;
-				color: #dddddd;
+				width         : fit-content;
+				margin-bottom : 20px;
+				font-size     : 25px;
+				color         : #DDDDDD;
 
 				&.active::before,
 				&.inactive::before {
-					padding-right: 0.5em;
-					font-family: 'Font Awesome 6 Free';
-					font-size: 0.6cm;
-					font-weight: 900;
+					padding-right : 0.5em;
+					font-family   : 'Font Awesome 6 Free';
+					font-size     : 0.6cm;
+					font-weight   : 900;
 				}
 				&.active {
-					color: white;
-				}
-				&.active::before {
-					content: '\f107';
-				}
-				&.inactive::before {
-					content: '\f105';
+					color : white;
+					&::before { content : '\f107'; }
 				}
+				&.inactive::before { content : '\f105'; }
 			}
-			h1:hover {
-				cursor: pointer;
-			}
+			h1:hover { cursor : pointer; }
 
 			.brewGroup {
+				margin-bottom : 20px;
 				&.grid {
-					display: flex;
-					flex-wrap: wrap;
-					justify-content: center;
-					gap: 20px;
-					min-width: 200px;
+					display         : flex;
+					flex-wrap       : wrap;
+					gap             : 20px;
+					justify-content : center;
+					width           : fit-content;
+					min-width       : 200px;
 				}
 
 				&.list {
-					display: flex;
-					flex-direction: column;
-					gap: 2px;
+					display        : flex;
+					flex-direction : column;
+					gap            : 2px;
 				}
 				&.card {
-					display: flex;
-					flex-wrap: wrap;
-					column-gap: 40px;
-					justify-content: center;
+					--columns             : 4;
+					display               : grid;
+					grid-template-columns : repeat(var(--columns), 1fr);
+					column-gap            : 40px;
+					justify-items         : center;
 
-					h1 {
-						position: absolute;
+					@media screen and (max-width : 1700px) {--columns : 3;}
+					@media screen and (max-width : 1400px) {--columns : 2;}
+					@media screen and (max-width : 900px) {--columns : 1;}
+					h1 { position : absolute; }
+
+					&:not(:has(.brewItem:last-child:nth-child(3n))) {
+						.brewItem:last-child {
+							margin-right : auto;
+							background   : green;
+						}
 					}
 				}
 			}
@@ -84,169 +90,149 @@
 	}
 
 	.listPageNav {
-		position: relative;
-		width: 100%;
-		height: fit-content;
-		display: flex;
-		flex-wrap: wrap;
-		align-items:center;
-		justify-content: center;
-		background: #555;
-		column-gap: 20px;
-		row-gap: 10px;
-		border-top: 1px solid #666;
-		border-bottom: 1px solid #666;
-		font-family: 'Open Sans', sans-serif;
-		color: white;
-		row-rule: 1px solid #666;
+		position        : relative;
+		display         : flex;
+		flex-wrap       : wrap;
+		row-gap         : 10px;
+		column-gap      : 20px;
+		align-items     : center;
+		justify-content : center;
+		width           : 100%;
+		height          : fit-content;
+		font-family     : 'Open Sans', sans-serif;
+		color           : white;
+		background      : #555555;
+		border-top      : 1px solid #666666;
+		border-bottom   : 1px solid #666666;
+		row-rule        : 1px solid #666666;
 
 		> div {
-			width: fit-content;
-			padding-inline: 10px;
-			height:30px;
+			width          : fit-content;
+			height         : 30px;
+			padding-inline : 10px;
 		}
 
 		.sort-container {
-			z-index: 1;
-			display: flex;
-			flex-wrap: wrap;
-			row-gap: 5px;
-			column-gap: 15px;
-			align-items: baseline;
-			justify-content: center;
+			z-index         : 1;
+			display         : flex;
+			flex-wrap       : wrap;
+			row-gap         : 5px;
+			column-gap      : 15px;
+			align-items     : baseline;
+			justify-content : center;
 
-			text-align: center;
+			text-align      : center;
 
 			h6 {
-				font-size: 11px;
-				font-weight: bold;
-				text-transform: uppercase;
+				font-size      : 11px;
+				font-weight    : bold;
+				text-transform : uppercase;
 			}
 			.sort-option {
-				display: flex;
-				align-items: center;
-				height: 100%;
-				padding: 0 8px;
-				color: #cccccc;
+				display     : flex;
+				align-items : center;
+				height      : 100%;
+				padding     : 0 8px;
+				color       : #CCCCCC;
 
-				&:hover {
-					background-color: #444444;
-				}
+				&:hover { background-color : #444444; }
 
 				&.active {
-					font-weight: bold;
-					color: #dddddd;
-					background-color: #333333;
+					font-weight      : bold;
+					color            : #DDDDDD;
+					background-color : #333333;
 
 					button {
-						height: 100%;
-						font-weight: 800;
-						color: white;
-						& + .sortDir {
-							padding-left: 5px;
-						}
+						height      : 100%;
+						font-weight : 800;
+						color       : white;
+						& + .sortDir { padding-left : 5px; }
 					}
 				}
 			}
 
 			button {
-				padding: 0;
-				font-size: 11px;
-				font-weight: normal;
-				color: #cccccc;
-				text-transform: uppercase;
-				background-color: transparent;
+				padding          : 0;
+				font-size        : 11px;
+				font-weight      : normal;
+				color            : #CCCCCC;
+				text-transform   : uppercase;
+				background-color : transparent;
 			}
 		}
 
 		.filter-option {
-			display: grid;
-			place-items: center;
-			font-size: 11px;
-			background-color: transparent !important;
-			i {
-				padding-right: 5px;
-			}
+			display          : grid;
+			place-items      : center;
+			font-size        : 11px;
+			background-color : transparent !important;
+			i { padding-right : 5px; }
 		}
 		.tags-container {
-			display: flex;
-			flex-wrap: wrap;
-			row-gap: 5px;
-			column-gap: 15px;
-			align-items: center;
-			justify-content: center;
-			height: 30px;
+			display         : flex;
+			flex-wrap       : wrap;
+			row-gap         : 5px;
+			column-gap      : 15px;
+			align-items     : center;
+			justify-content : center;
+			height          : 30px;
 			span {
-				padding: 3px;
-				font-family: 'Open Sans', sans-serif;
-				font-size: 11px;
-				font-weight: bold;
-				color: #dfdfdf;
-				cursor: pointer;
-				border: 1px solid;
-				border-radius: 3px;
+				padding       : 3px;
+				font-family   : 'Open Sans', sans-serif;
+				font-size     : 11px;
+				font-weight   : bold;
+				color         : #DFDFDF;
+				cursor        : pointer;
+				border        : 1px solid;
+				border-radius : 3px;
 				&::before {
-					margin-right: 3px;
-					font-family: 'Font Awesome 6 Free';
-					font-size: 12px;
+					margin-right : 3px;
+					font-family  : 'Font Awesome 6 Free';
+					font-size    : 12px;
 				}
 				&::after {
-					margin-left: 3px;
-					font-family: 'Font Awesome 6 Free';
-					font-size: 12px;
-					content: '\f00d';
+					margin-left : 3px;
+					font-family : 'Font Awesome 6 Free';
+					font-size   : 12px;
+					content     : '\f00d';
 				}
 				&.type {
-					background-color: #008000;
-					border-color: #00a000;
-					&::before {
-						content: '\f0ad';
-					}
+					background-color : #008000;
+					border-color     : #00A000;
+					&::before { content : '\f0ad'; }
 				}
 				&.group {
-					background-color: #505050;
-					border-color: #000000;
-					&::before {
-						content: '\f500';
-					}
+					background-color : #505050;
+					border-color     : #000000;
+					&::before { content : '\f500'; }
 				}
 				&.meta {
-					background-color: #000080;
-					border-color: #0000a0;
-					&::before {
-						content: '\f05a';
-					}
+					background-color : #000080;
+					border-color     : #0000A0;
+					&::before { content : '\f05a'; }
 				}
 				&.system {
-					background-color: #800000;
-					border-color: #a00000;
-					&::before {
-						content: '\f518';
-					}
+					background-color : #800000;
+					border-color     : #A00000;
+					&::before { content : '\f518'; }
 				}
 			}
 		}
 		.layout-container {
-			z-index: 1;
-			display: flex;
-			flex-wrap: wrap;
-			row-gap: 5px;
-			column-gap: 15px;
-			align-items: center;
-			justify-content: center;
-			text-align: center;
+			z-index         : 1;
+			display         : flex;
+			flex-wrap       : wrap;
+			row-gap         : 5px;
+			column-gap      : 15px;
+			align-items     : center;
+			justify-content : center;
+			text-align      : center;
 
-			input[type='radio'] {
-				display: none;
-			}
+			input[type='radio'] { display : none; }
 
-			i {
-				transition: color 0.2s;
-			}
+			i { transition : color 0.2s; }
 
-			input:checked + i {
-				color: @blue;
-			}
+			input:checked + i { color : @blue; }
 		}
 	}
 }