+some small frontend annoyances

views/routes/almanach/contents/edit/body.gohtml

@@ -185,8 +185,8 @@
 			<span>Neuer Beitrag</span>
 		</button>
 	</div>
-	<div class="mx-4 mt-2 rounded-md border border-slate-200 bg-white flex flex-col overflow-hidden" data-role="contents-panel">
-		<div class="flex-1 min-h-0 overflow-y-auto">
+	<div class="mx-4 mt-2 rounded-md border border-slate-300 bg-white flex flex-col overflow-hidden p-1" data-role="contents-panel">
+		<div class="flex-1 min-h-0 overflow-y-scroll">
 			<div class="flex flex-col gap-0"
 				data-role="contents-list"
 				data-order-endpoint="/almanach/{{ $model.result.Entry.MusenalmID }}/contents/edit">
@@ -562,12 +562,26 @@
 		});
 	};
 
+	const setContentsPanelHeight = () => {
+		const panel = document.querySelector("[data-role='contents-panel']");
+		if (!panel) {
+			return;
+		}
+		const rect = panel.getBoundingClientRect();
+		const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 0;
+		const bottomGap = 16;
+		const available = Math.max(200, viewportHeight - rect.top - bottomGap);
+		panel.style.height = `${available}px`;
+	};
+
 	const initPage = () => {
 		list = document.querySelector("[data-role='contents-list']");
 		if (!list) {
 			return;
 		}
 
+		setContentsPanelHeight();
+
 		const getItems = () => Array.from(list.querySelectorAll("[data-role='content-item']"));
 		if (getItems().length === 0) {
 			return;
@@ -903,4 +917,10 @@
 			initPage();
 		}
 	});
+	if (!window.__contentsPanelResizeBound) {
+		window.__contentsPanelResizeBound = true;
+		window.addEventListener("resize", () => {
+			setContentsPanelHeight();
+		});
+	}
 </script>