fix: ui improvements

output/index.css

@@ -37,6 +37,10 @@
 
 	/* Default for wide screens. */
 	--dynamic-columns-width: var(--expanded-dynamic-columns-width);
+
+	--column-name-min-width: 8em;
+	--column-name-proportional-width: 0.325;
+	--column-description-proportional-width: calc( 1 - var(--column-name-proportional-width) );
 }
 
 html:not(.js) {
@@ -403,22 +407,23 @@ div.search-actions {
 
 #th_name, .td_name {
 	width: calc(
-		0.375 * (
-			var(--dynamic-columns-width)
-		)
+		var(--column-name-proportional-width)
+		* var(--dynamic-columns-width)
 	);
 	max-width: calc(
-		0.375 * (
-			var(--dynamic-columns-width)
-		)
+		var(--column-name-proportional-width)
+		* var(--dynamic-columns-width)
 	);
 	overflow: hidden;
 	text-overflow: ellipsis;
+	min-width: var(--column-name-min-width);
 }
 
 .td_name > a {
 	/* Block padding for inline element does not change flow, only clickbox */
 	padding-block: calc( var(--cell-padding-v) );
+	word-wrap: anywhere; /* fallback */
+	overflow-wrap: anywhere;
 }
 
 .room-row-stickied > .td_name > a {
@@ -445,16 +450,17 @@ html.js .td_description  {
 
 #th_description, .td_description {
 	width: calc(
-		0.625 * (
-			var(--dynamic-columns-width)
-		)
+		var(--column-description-proportional-width)
+		* var(--dynamic-columns-width)
 	);
 
 	max-width: calc(
-		0.625 * (
-			var(--dynamic-columns-width)
-		)
+		var(--column-description-proportional-width)
+		* var(--dynamic-columns-width)
 	);
+
+	word-wrap: anywhere; /* fallback */
+	overflow-wrap: anywhere;
 }
 
 html.js .td_description::after {
@@ -601,7 +607,7 @@ footer, aside {
 #details-modal {
 	padding: 0;
 	width: 80vw;
-	--modal-height: calc(90vh - 8em);
+	--modal-height: calc(80vh - 8em);
 	height: var(var(--modal-height));
 	color: var(--primary-color);
 	background-color: var(--secondary-color);
@@ -644,7 +650,6 @@ footer, aside {
 	overflow: auto;
 	box-sizing: border-box;
 	justify-content: space-between;
-	gap: 1em;
 }
 
 #details-modal-close {
@@ -742,6 +747,19 @@ footer, aside {
 	transition: filter 0.15s, opacity 0.15s;
 }
 
+#details-modal-description {
+	margin-bottom: 1em;
+}
+
+#details-modal-description-inner {
+	word-wrap: anywhere; /* fallback */
+	overflow-wrap: anywhere;
+}
+
+#details-modal-room-tags {
+	margin-bottom: 0.5em;
+}
+
 /*#details-modal-start*/ #details-modal-language-flag:empty::after {
 	content: "Unknown";
 	font-style: italic;
@@ -774,7 +792,7 @@ footer, aside {
 	row-gap: .5em;
 	flex-grow: 1000;
 	align-content: flex-end;
-	margin-top: 1em;
+	margin-block: 1em;
 }
 
 #details-modal-qr-code-label-name {

sites/+components/qr-modals.php

@@ -45,26 +45,26 @@
 							tabindex="0"
 						>
 					</div>
-					<p id="details-modal-description">
+					<div id="details-modal-description">
 						<span id="details-modal-description-inner" data-hydrate-with="description"></span>
-					</p>
-					<p id="details-modal-room-tags">
-					</p>
+					</div>
+					<div id="details-modal-room-tags">
+					</div>
 					<gap></gap>
 					<div id="details-modal-room-info">
-						<p id="details-modal-language">
+						<div id="details-modal-language">
 							Language: <span
 								id="details-modal-language-flag"
 								data-hydrate-with="language_flag"
 							></span>
-						</p>
-						<p id="details-modal-users">
+						</div>
+						<div id="details-modal-users">
 							Users: <span data-hydrate-with="users"></span>
-						</p>
-						<p id="details-modal-created">
+						</div>
+						<div id="details-modal-created">
 							Created: <span data-hydrate-with="creation_datestring"></span>
-						</p>
-						<p id="details-modal-host">
+						</div>
+						<div id="details-modal-host">
 							Server:
 							<a
 								title="Open server in new tab"
@@ -73,7 +73,7 @@
 								rel="noopener noreferrer"
 								href="#"
 							></a>
-						</p>
+						</div>
 					</div>
 					<gap></gap>
 					<div id="details-modal-actions">