seems to work across dimensions

client/homebrew/pages/basePages/listPage/brewItem/brewItem.less

@@ -125,7 +125,7 @@
 	position: relative;
 	box-sizing: border-box;
 	display: inline-block;
-	width: clamp(400px, 48%, 600px);
+	width: clamp(300px, 48%, 600px);
 	min-height: 125px;
 	padding: 5px 15px 2px 6px;
 	padding-right: 15px;
@@ -166,7 +166,7 @@
 		position: initial;
 		bottom: 2px;
 
-		font-size: .9em;
+		font-size: 0.9em;
 		& > span {
 			margin-right: 12px;
 			line-height: 1.5em;
@@ -323,7 +323,6 @@
 			display: inline-block;
 			grid-area: authors;
 			height: fit-content;
-			overflow: hidden;
 			width: 150px;
 			overflow: hidden;
 			text-overflow: ellipsis;
@@ -356,10 +355,6 @@
 			filter: drop-shadow(0 0 10px white);
 		}
 
-		.brewTags {
-			padding-left: 10px;
-		}
-
 		.brewTags:has(span:nth-of-type(4)) {
 			position: relative;
 			overflow: hidden;
@@ -462,7 +457,6 @@
 	color: white;
 	font-size: 13px;
 
-
 	&::before {
 		display: block;
 		content: '';
@@ -509,7 +503,7 @@
 		.description {
 			height: 0;
 			overflow: hidden;
-			transition:height .2s;
+			transition: height 0.2s;
 		}
 	}
 
@@ -518,10 +512,10 @@
 		height: 130px;
 		display: grid;
 		grid-template-areas:
-		"tags tags tags"
+			'tags tags tags'
-		"author author author"
+			'authors authors authors'
-		"pages views views"
+			'pages views views'
-		"update update storage";
+			'update update storage';
 
 		.brewTags {
 			color: black;
@@ -535,7 +529,7 @@
 			}
 		}
 		.brewAuthors {
-			grid-area: author;
+			grid-area: authors;
 		}
 		.brewPages {
 			grid-area: pages;
@@ -549,7 +543,6 @@
 		.storage {
 			grid-area: storage;
 		}
-
 	}
 
 	.links {
@@ -560,15 +553,9 @@
 		height: 40px;
 		display: flex;
 	}
-
 }
 
-
 @media screen and (max-width: 1400px) {
-	.brewCollection {
-		background:@yellow;
-	}
-
 	.brewCollection .brewGroup {
 		&.list {
 			.brewItem:not(.detailsOpen) {
@@ -579,7 +566,9 @@
 					grid-template-areas: 'tags update storage';
 				}
 
-				.brewPages, .lastViewed, .brewAuthors {
+				.brewPages,
+				.lastViewed,
+				.brewAuthors {
 					display: none;
 				}
 			}
@@ -594,10 +583,6 @@
 }
 
 @media screen and (max-width: 1200px) {
-	.brewCollection {
-		background:@yellow;
-	}
-
 	.brewCollection .brewGroup {
 		&.list {
 			.brewItem:not(.detailsOpen) {
@@ -608,17 +593,126 @@
 					grid-template-areas: 'tags storage';
 				}
 
-				.brewPages, .lastViewed, .brewAuthors, .lastUpdated {
+				.brewPages,
+				.lastViewed,
+				.brewAuthors,
+				.lastUpdated {
 					display: none;
 				}
 			}
 			.detailsOpen {
-				grid-template-columns: 1fr 2fr;
+				grid-template-columns: 3fr 2fr 1fr;
-				.links{
+
-					display:none;
+				.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'
+						'authors update storage';
+				}
+				.lastUpdated {
+					width: 100px;
+					overflow: hidden;
+					text-overflow: ellipsis;
+					white-space: nowrap;
+					word-break: break-all;
 				}
 			}
 		}
 	}
 }
 
+@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';
+				}
+
+				.brewPages,
+				.lastViewed,
+				.brewAuthors,
+				.lastUpdated,
+				.storage {
+					display: none;
+				}
+			}
+
+			.brewItem {
+				transition: height 0.2s;
+			}
+			.detailsOpen {
+				height: 100px;
+				padding: 5px;
+				display: grid;
+				grid-template-columns: 3fr 3fr 30px;
+
+				.text {
+					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;
+					}
+				}
+
+				.info {
+					height: 100%;
+					width: 100%;
+					display: grid;
+					grid-template-columns: 2fr 1fr 1fr 20px;
+					grid-template-areas:
+						'tags pages views views'
+						'authors update update storage';
+				}
+				.links {
+					display: flex;
+					flex-direction: column;
+					gap: 5px;
+					a,
+					button {
+						margin: 0;
+					}
+				}
+			}
+		}
+	}
+}
+
+@media screen and (max-width: 650px) {
+	.brewCollection .brewGroup {
+		&.list {
+			.brewItem:not(.detailsOpen) {
+				grid-template-columns: 3fr 1fr;
+				.info {
+					display: none;
+				}
+			}
+			.detailsOpen {
+				grid-template-rows: 1fr 2fr;
+				.info {
+					display: grid;
+
+					.lastUpdated {
+						width: 100px;
+						overflow: hidden;
+						text-overflow: ellipsis;
+						white-space: nowrap;
+						word-break: break-all;
+					}
+				}
+			}
+		}
+	}
+}

client/homebrew/pages/basePages/listPage/listPage.less

@@ -20,7 +20,7 @@
 .listPage {
 	.content {
 		z-index : 1;
-		padding : clamp(50px, 5vh, 200px) 10vw;
+		padding : clamp(20px, 5vh, 200px) 10vw;
 		.noBrews {
 			margin     : 10px 0px;
 			font-size  : 1.3em;
@@ -54,7 +54,7 @@
 					flex-wrap: wrap;
 					justify-content: center;
 					gap:20px;
-					min-width:400px;
+					min-width:200px;
 				}
 			
 

server.js

@@ -23,7 +23,7 @@ async function start() {
 	const app = await createApp(vite);
 
 	const PORT = process.env.PORT || config.get('web_port') || 3000;
-	app.listen(PORT, ()=>{
+	app.listen(PORT, '0.0.0.0', ()=>{
 		const reset = '\x1b[0m'; // Reset to default style
 		const bright = '\x1b[1m'; // Bright (bold) style
 		const cyan = '\x1b[36m'; // Cyan color