From 87f377cc72e98471f86971f3dbf02ae30dbbf091 Mon Sep 17 00:00:00 2001
From: Til Schmitter <til.schmitter@gmail.com>
Date: Fri, 8 May 2026 22:40:16 +0200
Subject: [PATCH] misc layout fixes for viewmodes

---
 copyparty/web/browser.css | 27 ++++++++++++++++++++++-----
 copyparty/web/browser.js  |  3 +--
 2 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index b94226db..9925f798 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -964,6 +964,11 @@ tr.play td:nth-child(1) a {
 	display: block;
 	width: 100%;
 	height: 100%;
+	height: calc(100% - 8px);
+	border-radius: calc(var(--radius) / 3 * 2);
+}
+#ggrid>a.play svg {
+	background: var(--bg-u2);
 }
 #ggrid>a img {
 	z-index: 1;
@@ -976,9 +981,12 @@ tr.play td:nth-child(1) a {
 	margin: 0 auto;
 	display: block;
 	width: 100%;
-	height: 100%;
+	height: calc(var(--grid-sz) - 2.5em);
 	object-fit: cover;
 }
+#ggrid>a.dir img {
+	max-height: calc(var(--grid-sz)/1.25 - 10px);
+}
 #ggrid.noupscale>a img {
 	width: auto;
 	height: auto;
@@ -994,6 +1002,7 @@ tr.play td:nth-child(1) a {
 	max-height: 20em;
 	max-height: calc(var(--grid-sz)*2);
 	object-fit: contain;
+	height: 100%;
 }
 
 .imgcontainer {
@@ -1005,6 +1014,7 @@ tr.play td:nth-child(1) a {
 	box-sizing: border-box;
 	margin: -3px -2px;
 	padding: 4px 3px;
+	justify-content: center;
 }
 .th_ext {
 	position: absolute;
@@ -3972,7 +3982,7 @@ html.e #wrap.thin {
 		gap: 1em;
 	}
 	#ggrid.gallery {
-		gap: 1px 2px;
+		gap: 2px 3px;
 		margin: -.2em -.5em;
 		a::before {
 			padding: .1em 0;
@@ -3983,6 +3993,10 @@ html.e #wrap.thin {
 			span:not(.th_ext) {
 				display: none;
 			}
+			img {
+				max-height: none;
+				height: calc(var(--grid-sz) - 8px);
+			}
 		}
 	}
 	#ggrid.gallery.nocrop {
@@ -3995,18 +4009,21 @@ html.e #wrap.thin {
 		}
 		a {
 			margin-bottom: .2em;
+			img {
+				height: calc(var(--grid-sz) - 1.5em);
+			}
 		}
-		a.img, a.dir {
+		a.img {
 			min-width: calc(var(--grid-sz) / 2);
 			width: auto;
 			img {
 				max-width: 100%;
-				height: calc(var(--grid-sz) - 1em);
-
+				height: var(--grid-sz);
 			}
 		}
 		a.dir {
 			img {
+				height: calc(var(--grid-sz) - 1.5em - 10px);
 				margin-left: 10px;
 				margin-right: 10px;
 			}
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index f16a5e5c..3bc367e4 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -6468,8 +6468,7 @@ var thegrid = (function () {
 				(isdir || ext == 'unk' || ext.startsWith('/') ? '' : 
 					'<span class="th_ext" style="font-size: ' + (r.sz / 5) +'em; font-size:calc(var(--grid-sz) / 5 * ' + 
 					(ext.length > 3 ? 1 / (3 + ext.length * .4) * 3 : 1) + ')">' + ext + '</span>') +
-				'<img style="height:' +
-				(r.sz / 1.25) + 'em" loading="lazy" onload="th_onload(this)" onerror="th_onerror(this)" src="' +
+				'<img loading="lazy" onload="th_onload(this)" onerror="th_onerror(this)" src="' +
 				ihref + '" /></div><span class="' + ac + '">' + ao.innerHTML + '</span></a>');
 		}
 		ggrid.innerHTML = html.join('\n');