Adjust name & description column width dynamically

output/styles2.css

@@ -1,9 +1,47 @@
 :root {
 	--alternate-row-color:             #e8e8e8;
+	--body-margin: 8px; /* Default value in browsers */ 
+	--max-font-size-unitless: 18;
+
+	/* Measurements of the width of all columns
+	except name and description on smaller screens */
+	--collapsed-static-column-width-px: 400px;
+	--collapsed-static-column-width: calc(
+		( 400 / var(--max-font-size-unitless) ) * 1rem
+	);
+
+	/* Measurements of the width of all columns
+	except name and description on wider screens */
+	--expanded-static-column-width-px: 800px;
+	--expanded-static-column-width: calc(
+		( 800 / var(--max-font-size-unitless) ) * 1rem
+	);
+
+	/* Space left for the name and description columns,
+	in the collapsed and expanded cases. */
+	--collapsed-dynamic-columns-width: 
+		calc(
+			100vw 
+			- var(--collapsed-static-column-width)
+			- 2 * var(--body-margin);
+		);
+			
+	--expanded-dynamic-columns-width: 
+		calc(
+			100vw 
+			- var(--expanded-static-column-width)
+		);
+	
+	/* Default for wide screens. */
+	--dynamic-columns-width: var(--expanded-dynamic-columns-width);
 }
 
 html {
-	font-size: clamp(10px, 2vw, 18px);
+	font-size: clamp(10px, 2vw, var(--max-font-size-unitless) * 1px);
+}
+
+body {
+	margin: 0;
 }
 
 html.js .noscript, .hidden {
@@ -29,6 +67,8 @@ header {
 	direction: row;
 	/* Push items as far apart as possible */
 	justify-content: space-between;
+	padding-top: var(--body-margin);
+	padding-inline: var(--body-margin);
 }
 
 #headline {
@@ -40,6 +80,7 @@ header {
 
 #tbl_communities {
 	margin: 0 auto;
+	
 	--cell-padding-h: 0.5em;
 	--cell-padding-v: 0.5em;
 	--cell-padding: var(--cell-padding-h) var(--cell-padding-v);
@@ -49,7 +90,6 @@ header {
 
 /* Cells in general */
 #tbl_communities th {
-
 	white-space: nowrap;
 }
 
@@ -112,8 +152,17 @@ header {
 	font-family: monospace;
 }
 
-.td_name {
-	max-width: 15vw;
+#th_name, .td_name {
+	width: calc(
+		0.375 * (
+			var(--dynamic-columns-width)
+		)
+	);
+	max-width: calc(
+		0.375 * (
+			var(--dynamic-columns-width)
+		)
+	);
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
@@ -126,9 +175,7 @@ header {
 	content: "\2753";
 }
 
-#th_description  { }
 .td_description  {
-	max-width: 25vw;
 	position: relative;
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -138,6 +185,20 @@ header {
 	-webkit-line-clamp: 3;
 }
 
+#th_description, .td_description {
+	width: calc(
+		0.625 * (
+			var(--dynamic-columns-width)
+		)
+	);
+
+	max-width: calc(
+		0.625 * (
+			var(--dynamic-columns-width)
+		)
+	);
+}
+
 .td_description::after {
 	/* Cover overflowing description lines with internal border. */
 	position: absolute;
@@ -235,6 +296,17 @@ a[href^="https:"] .protocol-indicator::after {
 	#th_preview, .td_preview {
 		display: none;
 	}
+
+	:root {
+		--dynamic-columns-width: var(--collapsed-dynamic-columns-width);
+	}
+}
+
+@media (max-width: 500px) {
+	:root {
+		/* ! For when descriptions don't wrap and 100vw doesn't work. */
+		--dynamic-columns-width: 15rem;
+	}
 }
 
 .join_url_container {
@@ -255,8 +327,11 @@ footer {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
-	width: 100%;
+	max-width: 100%;
 	text-align: center;
+
+	padding-top: var(--body-margin);
+	padding-inline: var(--body-margin);
 }
 
 footer p {