fix: inscription page layout and spacing issues

Author: Zihao-kdl

frontend/src/lib/components/InscriptionMaterialDetail.svelte

@@ -16,13 +16,13 @@
 			{#if material?.ref}
 				<a class="badge strong" href={material.ref}>
 					{material.type}
-					{#if material.subtype && material.subtype.length }
+					{#if material.subtype && material.subtype.length}
 						> {material.subtype.join(', ')}
 					{/if}
 				</a>
 			{:else}
 				{material.type}
-				{#if material.subtype && material.subtype.length }
+				{#if material.subtype && material.subtype.length}
 					> {material.subtype.join(', ')}
 				{/if}
 			{/if}
@@ -79,4 +79,8 @@
 		overflow: visible;
 		text-overflow: clip;
 	}
+
+	dt + dd {
+		margin-top: var(--size-2);
+	}
 </style>

frontend/src/routes/inscription/[slug]/+page.svelte

@@ -31,15 +31,15 @@
 	 */
 	function nullIfDivEmpty(div) {
 		// Example
-		// {id: 'commentary', html: '<h2>commentary</h2>  <p>  </p>  '} => null 
+		// {id: 'commentary', html: '<h2>commentary</h2>  <p>  </p>  '} => null
 		let ret = null;
 		if (div && div.html) {
 			let html = div.html.trim();
 			// removes heading from start
 			html = html.replace(/^<(h[1-6])>.*?<\/\1>/, '');
 			// removes empty <p>
 			html = html.replace(/<p(\s[^>]*)?>\s*(?:&nbsp;|\s)*<\/p>/gi, '');
-			html = html.trim()
+			html = html.trim();
 			if (html.length) {
 				ret = div;
 			}
@@ -49,11 +49,7 @@
 
 	const attribution = $derived(html?.editions?.[0]?.html);
 	const editions = $derived(html?.divs?.find((div) => div.id === 'editions'));
-	const apparatus = $derived(
-		nullIfDivEmpty(
-			html?.divs?.find((div) => div.id === 'apparatus')
-		)
-	);
+	const apparatus = $derived(nullIfDivEmpty(html?.divs?.find((div) => div.id === 'apparatus')));
 	const translations = $derived(html?.divs?.filter((div) => div.id === 'translation') || []);
 
 	/**
@@ -609,6 +605,42 @@ ${changeDate ? `Last revised: ${changeDate}.` : ''}
 		padding-block: var(--size-2);
 	}
 
+	/* ZL: consistent spacing between section headings and their content */
+	#text-type h2 {
+		margin-bottom: var(--size-3);
+	}
+
+	#commentary :global(h2) {
+		padding-bottom: var(--size-3);
+	}
+
+	#physical-description h3 {
+		margin-top: var(--size-6);
+		margin-bottom: var(--size-2);
+	}
+
+	/* ZL: improve spacing and hierarchy in Physical description */
+	#physical-description dl {
+		display: flex;
+		flex-direction: column;
+		gap: 0;
+		margin-block: var(--size-2) var(--size-6);
+	}
+
+	#physical-description dt {
+		font-weight: bold;
+		margin-top: var(--size-4);
+	}
+
+	#physical-description dt:first-child {
+		margin-top: 0;
+	}
+
+	#physical-description dd {
+		margin-inline-start: 0;
+		margin-top: var(--size-1);
+	}
+
 	#content > section {
 		border-bottom: var(--border-size-1) solid var(--border-color);
 		padding-bottom: var(--size-8);