diff --git a/copyparty/web/browser.css b/copyparty/web/browser.css
index c879364d..e1429838 100644
--- a/copyparty/web/browser.css
+++ b/copyparty/web/browser.css
@@ -1,6 +1,7 @@
 :root {
 	color-scheme: dark;
   	--transparent: transparent;
+	--font-mono: monospace;
 
 	--grid-sz: 10em;
 	--grid-ln: 3;
@@ -5429,6 +5430,9 @@ html.f {
   		margin-right: -.6em;
 		border-radius: 0 0 var(--radius) var(--radius);
 	}
+	.th_ext .inner {
+		font-size: .8em;
+	}
 }
 html.fz {
 	--bg: #2e258c;
diff --git a/copyparty/web/browser.js b/copyparty/web/browser.js
index 96f4d9bb..bd35a22c 100644
--- a/copyparty/web/browser.js
+++ b/copyparty/web/browser.js
@@ -6572,8 +6572,8 @@ window.thegrid = (function () {
 					(isdir ? 'folder' : 'file') + '-icon" color="' +
 					(ext == 'unk' || ext.startsWith('/') ? '#0000' : intToHSL(hashCode(ext))) + '"/></svg>' +
 				(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>') +
+					'<span class="th_ext" style="font-size: ' + (r.sz / 5) +'em; font-size:calc((var(--grid-sz) - 2.5em) / 3 * ' +
+					(ext.length > 3 ? 1 / (3 + ext.length * .4) * 3 : 1) + ')"><span class="inner">' + ext + '</span></span>') +
 				'<img loading="lazy" onload="th_onload(this)" src="' +
 				ihref + '" /></div><span class="' + ac + '">' + ao.innerHTML + '</span></a>');
 		}