From 3f7516f9a1543e1ebc5756d45bf7dc4ace88f2da Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?V=C3=ADctor=20Losada=20Hern=C3=A1ndez?=
 <losada.hernandez.victor@gmail.com>
Date: Fri, 11 Sep 2026 18:04:23 +0200
Subject: [PATCH] small changes

---
 .../basePages/listPage/brewItem/brewItem.jsx  |   2 +-
 .../basePages/listPage/brewItem/brewItem.less | 869 +++++++-----------
 2 files changed, 352 insertions(+), 519 deletions(-)

diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
index d97fa534f..2e02a4d9f 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.jsx
@@ -122,7 +122,7 @@ const BrewItem = ({
 		<div className={`brewItem${detailsOpen ? ' detailsOpen' : ''}`} onClick={() => setDetailsOpen(!detailsOpen)} >
 			{brew.thumbnail && <div className='thumbnail' style={{ backgroundImage: `url(${brew.thumbnail})` }}></div>}
 			<div className='text'>
-				<h2>{brew.title}</h2>
+				<h2 title={brew.title}>{brew.title}</h2>
 				<p className='description'>{brew.description}</p>
 			</div>
 			<div className='info'>
diff --git a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
index 7ff5d3a7c..1be4fce6c 100644
--- a/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
+++ b/client/homebrew/pages/basePages/listPage/brewItem/brewItem.less
@@ -3,719 +3,552 @@
 @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;
-	break-inside: avoid;
+	position                    : relative;
+	overflow                    : hidden;
+	font-size                   : 15px;
+	break-inside                : avoid;
+	-webkit-column-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 {
 		h2 {
-			margin-bottom: 5px;
-			font-size: 1.3em;
-			font-weight: 400;
-			font-family: Alata;
+			font-family : "Alata";
+			font-size   : 1.25em;
 		}
 	}
 	.info {
-		font-size: 1.2em;
-		& > span {
-			line-height: 1.5em;
-		}
-		a {
-			color: inherit;
-		}
+		font-size : 0.9em;
+		& > 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 : rgba(from var(--tag-base) r g b / 0.1);
+		border           : 1px solid 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;
 		}
+
+		--tag-base       : #C8AC6E;
+		--tag-type       : #008000;
+		--tag-group      : #000000;
+		--tag-meta       : #000080;
+		--tag-system     : #800000;
+
 		&.type {
-			color: #008000;
-			background-color: #0080003b;
-			&::before {
-				content: '\f0ad';
-			}
+			color            : var(--tag-type);
+			background-color : rgba(from var(--tag-type) r g b / 0.231);
+			&::before { content : '\f0ad'; }
 		}
 		&.group {
-			color: #000000;
-			background-color: #5050503b;
-			&::before {
-				content: '\f500';
-			}
+			color            : var(--tag-group);
+			background-color : rgba(from var(--tag-group) r g b / 0.1);
+			&::before { content : '\f500'; }
 		}
 		&.meta {
-			color: #000080;
-			background-color: #0000803b;
-			&::before {
-				content: '\f05a';
-			}
+			color            : var(--tag-meta);
+			background-color : rgba(from var(--tag-meta) r g b / 0.231);
+			&::before { content : '\f05a'; }
 		}
 		&.system {
-			color: #800000;
-			background-color: #8000003b;
-			&::before {
-				content: '\f518';
-			}
-		}
-	}
-	&:nth-child(2n + 1) {
-		margin-right: 0px;
-	}
-	.links {
-		text-align: center;
-		background-color: fade(black, 60%);
-		a,
-		button {
-			display: block;
-			width: 100%;
-			font-size: 1.3em;
-			color: white;
-			text-decoration: unset;
-			opacity: 0.6;
-			&:hover {
-				opacity: 1;
-			}
-			i {
-				cursor: pointer;
-			}
+			color            : var(--tag-system);
+			background-color : rgba(from var(--tag-system) r g b / 0.231);
+			&::before { content : '\f518'; }
 		}
 	}
+	&:nth-child(2n + 1) { margin-right : 0px; }
 	.googleDriveIcon {
-		height: 18px;
-		padding: 0px;
-		margin: -5px;
+		height  : 18px;
+		padding : 0px;
+		margin  : -5px;
 	}
 	.homebreweryIcon {
-		position: relative;
-		top: 5px;
-		left: -7.5px;
-		height: 18px;
-		padding: 0px;
+		position : relative;
+		top      : 5px;
+		left     : -7.5px;
+		height   : 18px;
+		padding  : 0px;
 	}
+	.links {
+		a,
+		button {
+			display         : block;
+			width           : 100%;
+			font-size       : 1.3em;
+			color           : white;
+			text-decoration : unset;
+			i { cursor : pointer; }
+		}
+	}
+	
 }
 
 .grid > .brewItem {
-	width: clamp(300px, 48%, 500px);
-	min-height: 125px;
-	padding: 5px 15px 2px 6px;
-	padding-right: 20px;
-	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;
+	display          : flex;
+	flex-direction   : column;
+	justify-content  : space-between;
+	width            : clamp(300px, 48%, 500px);
+	min-height       : 125px;
+	padding          : 5px 15px 5px 6px;
+	padding-right    : 30px;
+	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;
 	.thumbnail {
-		position: absolute;
-		top: 0;
-		right: 30px;
-		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               : 30px;
+		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;
-		h2 {
-			margin-bottom: 5px;
-			font-size: 1.3em;
-		}
-		.description {
-			padding-left: 5px;
-		}
+		min-height : 54px;
+		h2 { margin-bottom : 5px; }
+		.description { padding-left : 5px; }
 	}
 	.info {
-		font-size: 0.9em;
-		padding-left: 5px;
-		& > span {
-			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;
-		&::before {
-			margin-right: 3px;
-			font-family: 'Font Awesome 6 Free';
-			font-size: 12px;
-		}
-		&.type {
-			color: #008000;
-			background-color: #0080003b;
-			&::before {
-				content: '\f0ad';
-			}
-		}
-		&.group {
-			color: #000000;
-			background-color: #5050503b;
-			&::before {
-				content: '\f500';
-			}
-		}
-		&.meta {
-			color: #000080;
-			background-color: #0000803b;
-			&::before {
-				content: '\f05a';
-			}
-		}
-		&.system {
-			color: #800000;
-			background-color: #8000003b;
-			&::before {
-				content: '\f518';
-			}
-		}
+		padding-left : 5px;
+		& > span { margin-right : 12px; }
 	}
 	.links {
-		position: absolute;
-		top: 0px;
-		right: 0px;
-		width: 2em;
-		height: 100%;
-		text-align: center;
-		background-color: #555;
-		display: flex;
-		flex-direction: column;
-		justify-content: space-evenly;
+		position         : absolute;
+		top              : 0px;
+		right            : 0px;
+		display          : flex;
+		flex-direction   : column;
+		justify-content  : space-evenly;
+		width            : 2em;
+		height           : 100%;
+		text-align       : center;
+		background-color : #555555;
 		a,
 		button {
-			display: block;
-			width: 100%;
-			font-size: 1.1em;
-			color: white;
-			text-decoration: unset;
-			opacity: 0.6;
-			&:hover {
-				opacity: 1;
-			}
-			i {
-				cursor: pointer;
-			}
+			display         : block;
+			width           : 100%;
+			font-size       : 1.1em;
+			color           : white;
+			text-decoration : unset;
+			opacity         : 0.6;
+			&:hover { opacity : 1; }
+			i { cursor : pointer; }
 		}
 	}
-	.googleDriveIcon {
-		height: 18px;
-		padding: 0px;
-		margin: -5px;
-	}
-	.homebreweryIcon {
-		position: relative;
-		top: 5px;
-		left: -7.5px;
-		height: 18px;
-		padding: 0px;
-	}
 }
 
 .list > .brewItem {
-	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;
+	display               : grid;
+	grid-template-columns : 35% 3fr 150px;
+	gap                   : 10px;
+	align-items           : center;
+	width                 : 100%;
+	height                : 50px;
+	color                 : #000000;
+	background            : #EEEEEE;
 
 	.text {
-		display: grid;
-		align-content: center;
-		width: 100%;
-		height: 100%;
-		min-height: unset;
-		padding-inline: 10px;
+		padding-left : 10px;
 
 		h2 {
-			align-content: center;
-			height: 100%;
-			min-height: 1.4em;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			font-size: 1.6em;
-			font-weight: 900;
-			vertical-align: middle;
-			white-space: nowrap;
+			align-content  : center;
+			min-height     : 1.4em;
+			overflow       : hidden;
+			text-overflow  : ellipsis;
+			font-weight    : 900;
+			vertical-align : middle;
+			white-space    : nowrap;
 		}
 
-		.description {
-			display: none;
-		}
+		.description { display : none; }
 	}
 
 	.info {
-		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;
-		}
+		display               : grid;
+		grid-template-areas   : 'tags authors pages views update storage';
+		grid-template-columns : 2fr 150px   0.7fr 65px 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;
 
 			span {
-				color: #606060;
-				background-color: hsla(from #c1b673 h s l / 20%);
-			}
-			.type {
-				color: #518251;
-				background-color: hsla(from currentColor h s l / 20%);
-			}
-			.system {
-				color: #c55656;
-				background-color: hsla(from currentColor h s l / 20%);
-			}
-			.group {
-				color: #525252;
-				background-color: hsla(from currentColor h s l / 20%);
-			}
-			.meta {
-				color: #5050b1;
-				background-color: hsla(from currentColor h s l / 20%);
+				--tag-base   : #AE9913;
+				--tag-type   : #3D843D;
+				--tag-group  : #525252;
+				--tag-meta   : #5050B1;
+				--tag-system : #C55656;
 			}
+
 		}
 		.brewAuthors {
-			display: inline-block;
-			display: -webkit-box;
-			grid-area: authors;
-			width: 150px;
-			height: fit-content;
-			overflow: hidden;
-			text-overflow: ellipsis;
-			line-clamp : 3;
-			-webkit-line-clamp: 3;
-			-webkit-box-orient: vertical;
+			display            : -webkit-box;
+			grid-area          : authors;
+			align-content      : center;
+			width              : 150px;
+			height             : 40px;
+			overflow           : hidden;
+			text-overflow      : ellipsis;
+			-webkit-line-clamp : 3;
+			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;
-			display: flex;
-			flex-wrap: wrap;
-			overflow: hidden;
+			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 {
-				position: absolute;
-				top: 0;
-				z-index: 100;
-				width: min-content;
-				height: max-content;
-				padding: 10px;
-				overflow: visible;
-				background: #707070;
+				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;
-					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;
+					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 {
-		position: relative;
-		display: flex;
-		align-items: center;
-		justify-content: space-evenly;
-		width: 100%;
-		height: 100%;
-		background: none;
-		opacity: 1;
+		position        : relative;
+		display         : flex;
+		align-items     : center;
+		justify-content : space-evenly;
+		height          : 100%;
 
-		> a {
-			opacity: 0.8;
-
-			&:hover {
-				opacity: 1;
-			}
-		}
-
-		.editLink {
-			color: @green;
-		}
-		.deleteLink {
-			color: @red;
-		}
-
-		.shareLink {
-			color: deepskyblue;
-		}
-
-		.downloadLink {
-			color: coral;
+		a, button {
+			align-content : center;
+			height        : 100%;
+			text-align    : center;
+			&:hover { background-color : hsl(from currentColor h 30% 90%); }
 		}
+	
+		.shareLink { color : @yellow; }
+		.editLink { color : @green; }
+		.downloadLink { color : @blueLight; }
+		.deleteLink { color : @red; }
 	}
 }
 
 .card > .brewItem {
-	position: relative;
-	display: flex;
-	flex-direction: column;
-	justify-content: flex-end;
-	width: 300px;
-	height: 400px;
-	padding: 10px;
-	padding-top: 100px;
-	padding-bottom: 50px;
-	font-size: 12px;
-	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;
+	display               : flex;
+	flex-direction        : column;
+	gap                   : 5px;
+	justify-content       : flex-end;
+	width                 : 300px;
+	height                : 400px;
+	padding               : 10px;
+	padding-top           : 100px;
+	padding-bottom        : 50px;
+	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 {
-		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;
+		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, #777777ff 0, #777777ff 42%, #77777700 55%);
-		}
-		.text .description {
-			height: fit-content;
+			height           : 100%;
+			background-image : linear-gradient(0deg, #777777FF 0, #777777FF 55%, #77777700 65%);
 		}
+		.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-size: 1.6em;
-			font-weight: 900;
-		}
+		h2 { font-weight : 900; }
 
 		.description {
-			height: 0;
-			overflow: hidden;
-			transition: height 0.2s;
+			height     : 0;
+			overflow   : hidden;
+			transition : height 0.2s;
 		}
 	}
 
 	.info {
-		display: grid;
-		grid-template-areas:
-			'tags tags tags tags'
+		display               : grid;
+		grid-template-areas   : 'tags tags tags tags'
 			'authors authors authors authors'
 			'pages views . .'
 			'update update storage .';
-		grid-template-columns: 1fr 1fr 1fr 30px;
-		height: 110px;
-		filter: drop-shadow(0 1px 2px black);
+		grid-template-columns : 1fr 1fr 1fr 30px;
+		height                : 110px;
+		filter                : drop-shadow(0 1px 2px black);
 
 		.brewTags {
-			grid-area: tags;
-			color: black;
+			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;
-		right: 0;
-		bottom: 0;
-		left: 0;
-		display: flex;
-		height: 40px;
+		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 : 35% 3fr 150px;
 				.info {
-					grid-template-areas: 'tags update storage';
-					grid-template-columns: 2fr 1fr 20px;
-					width: clamp(200px, 100%, 650px);
+					grid-template-areas   : 'tags update storage';
+					grid-template-columns : 2fr 1fr 20px;
+					width                 : clamp(200px, 100%, 650px);
 				}
 
 				.brewPages,
 				.lastViewed,
-				.brewAuthors {
-					display: none;
-				}
+				.brewAuthors { display : none; }
 			}
 			.brewItem {
-				transition: height 0.2s;
-			}
-			.detailsOpen {
-				height: 70px;
+				grid-template-columns : 25% 3fr 150px;
+				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 : 35% 3fr 150px;
 				.info {
-					grid-template-areas: 'tags storage';
-					grid-template-columns: 1fr 20px;
-					width: clamp(200px, 100%, 650px);
+					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;
+				height : 100px;
 
 				.info {
-					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);
+					display               : grid;
+					grid-template-areas   : 'tags views pages .'
+						'authors update update storage';
+					grid-template-rows    : 1fr 1fr;
+					grid-template-columns : 2fr 1fr 1fr 30px;
+					width                 : clamp(200px, 100%, 650px);
 				}
 				.lastUpdated {
-					width: 100px;
-					overflow: hidden;
-					text-overflow: ellipsis;
-					word-break: break-all;
-					white-space: nowrap;
+					max-width     : 120px;
+					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 {
-					grid-template-areas: 'tags';
-					grid-template-columns: 1fr;
-					width: clamp(200px, 100%, 650px);
+					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 {
-				display: grid;
-				grid-template-columns: 3fr 3fr 30px;
-				height: 100px;
-				padding: 5px;
+				display               : grid;
+				grid-template-columns : 3fr 3fr 30px;
+				height                : 100px;
+				padding               : 5px;
 
 				.text {
-					height: 100%;
-					padding: 0;
+					height  : 100%;
+					padding : 0;
 
 					h2 {
-						display: -webkit-box;
-						height: fit-content;
-						overflow: hidden;
-						text-overflow: ellipsis;
-						line-clamp:3;
-						-webkit-line-clamp: 3;
-						white-space: wrap;
-						-webkit-box-orient: vertical;
+						display            : -webkit-box;
+						height             : fit-content;
+						overflow           : hidden;
+						text-overflow      : ellipsis;
+						-webkit-line-clamp : 3;
+						line-clamp         : 3;
+						white-space        : wrap;
+						-webkit-box-orient : vertical;
 					}
 				}
 
 				.info {
-					display: grid;
-					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%;
+					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;
-						word-break: break-all;
-						white-space: nowrap;
+						width         : 100px;
+						overflow      : hidden;
+						text-overflow : ellipsis;
+						word-break    : break-all;
+						white-space   : nowrap;
 					}
 				}
 			}