Fix CSS width inheritance and add personnel list formatting

- Remove compound 55% width inheritance that was causing sections to be
  too narrow (55% of 55% = ~30%)
- Apply 55% width only at article > direct children level
- Add formatPersonnelLists() function to wrap text nodes in spans for
  CSS grid to work with personnel names in two-column layout
- Update definition list selectors to only apply width at top level

Fixes: authorship guidelines, getting started, attendance policy,
travel policy, making a poster, poster printing, subject compensation,
and lab members personnel list formatting.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: jeremymanning

checklist.js

@@ -6,6 +6,9 @@ document.addEventListener('DOMContentLoaded', function() {
   // Wrap orphaned text nodes after h2 headings in containers for proper styling
   wrapOrphanedTextNodes();
 
+  // Format personnel lists into two-column grid layout
+  formatPersonnelLists();
+
   // Convert the checklist section to interactive form
   // Need to wait a bit for MathJax to potentially process, but also handle native MathML
   setTimeout(convertChecklistToInteractive, 100);
@@ -84,6 +87,90 @@ function fixEnumerationNumbering() {
   });
 }
 
+// Format personnel lists (lab members) into two-column grid layout
+// tex4ht generates text nodes directly in divs, but CSS grid needs child elements
+function formatPersonnelLists() {
+  // Find the lab members heading
+  var labMembersHeading = null;
+  var h2s = document.querySelectorAll('h2');
+  h2s.forEach(function(h2) {
+    if (h2.textContent.toLowerCase().includes('lab members')) {
+      labMembersHeading = h2;
+    }
+  });
+
+  if (!labMembersHeading) return;
+
+  // Find all h3 elements after the lab members heading (subsections like "Graduate students")
+  var sibling = labMembersHeading.nextElementSibling;
+  while (sibling) {
+    // Stop if we hit another h2 (new major section)
+    if (sibling.tagName === 'H2') break;
+
+    if (sibling.tagName === 'H3') {
+      // Find the content after this h3 that contains personnel names
+      var contentSibling = sibling.nextSibling;
+      var names = [];
+
+      // Collect text nodes until we hit another heading or structural element
+      while (contentSibling) {
+        if (contentSibling.nodeType === Node.ELEMENT_NODE) {
+          var tag = contentSibling.tagName;
+          if (tag === 'H2' || tag === 'H3' || tag === 'P' || tag === 'DL') break;
+        }
+
+        if (contentSibling.nodeType === Node.TEXT_NODE) {
+          var text = contentSibling.textContent.trim();
+          if (text) {
+            // Split by newlines or common separators
+            var parts = text.split(/[\n\r]+/).map(function(s) { return s.trim(); }).filter(function(s) { return s.length > 0; });
+            names = names.concat(parts);
+          }
+        }
+
+        contentSibling = contentSibling.nextSibling;
+      }
+
+      // If we found names, create a grid container
+      if (names.length > 1) {
+        // Create the personnel list container
+        var container = document.createElement('div');
+        container.className = 'personnel-list';
+
+        // Add each name as a span
+        names.forEach(function(name) {
+          var span = document.createElement('span');
+          span.className = 'personnel-item';
+          span.textContent = name;
+          container.appendChild(span);
+        });
+
+        // Remove the old text nodes and insert the new container
+        var toRemove = [];
+        contentSibling = sibling.nextSibling;
+        while (contentSibling) {
+          if (contentSibling.nodeType === Node.ELEMENT_NODE) {
+            var tag = contentSibling.tagName;
+            if (tag === 'H2' || tag === 'H3' || tag === 'P' || tag === 'DL') break;
+          }
+          toRemove.push(contentSibling);
+          contentSibling = contentSibling.nextSibling;
+        }
+
+        // Insert container after h3
+        sibling.parentNode.insertBefore(container, sibling.nextSibling);
+
+        // Remove old nodes
+        toRemove.forEach(function(node) {
+          if (node.parentNode) node.parentNode.removeChild(node);
+        });
+      }
+    }
+
+    sibling = sibling.nextElementSibling;
+  }
+}
+
 // Convert the static checklist to an interactive form
 function convertChecklistToInteractive() {
   // Find the checklist section by looking for "Checklist and signature page" heading

lab-manual.css

@@ -25,29 +25,23 @@ article {
   position: relative;
 }
 
-/* Main content width - 55% for Tufte style, leaving room for sidenotes */
+/*
+ * Tufte-style content width: 55% for main content, leaving room for sidenotes
+ * IMPORTANT: Apply 55% width ONLY at the top level to avoid compound narrowing
+ * (55% of 55% = 30%, which is too narrow)
+ *
+ * tex4ht generates: article > direct content (p, h2, dl, etc.)
+ * Content inside these should be 100% of their parent
+ */
+
+/* Direct children of article get 55% width */
 article > p,
-article > section > p,
 article > h2,
-article > section > h2,
 article > h3,
-article > section > h3,
 article > ul,
 article > ol,
 article > dl,
-section > p,
-section > h3,
-section > ul,
-section > ol,
-section > dl,
-h2 + p,
-h3 + p {
-  width: 55%;
-}
-
-/* Text nodes directly after headings (like IRB intro) need width constraint */
-/* This targets text that follows h2 but isn't wrapped in p tags */
-article > section {
+article > div:not(.fullwidth):not(.marginnote):not(.sidenote) {
   width: 55%;
 }
 
@@ -92,24 +86,21 @@ p.noindent img {
 }
 
 /* Lab member lists - display in two balanced columns */
-/* tex4ht generates div elements with names as text content */
+/* tex4ht generates text nodes directly in a div - CSS grid can't work with those.
+   JavaScript will wrap text nodes in spans so grid can lay them out. */
 div.columns-2,
-.columns-2 {
+.columns-2,
+.personnel-list {
   width: 55%;
   display: grid;
   grid-template-columns: 1fr 1fr;
-  gap: 0.5em 2em;
+  gap: 0.3em 2em;
   line-height: 1.6;
 }
 
-/* Generic divs in the lab members section that contain names */
-/* These are generated by tex4ht for the columns environment */
-section h3 ~ div:not(.columns-2):not(.fullwidth):not(.marginnote):not(.sidenote) {
-  width: 55%;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 0.5em 2em;
-  line-height: 1.6;
+/* Individual personnel items (wrapped by JavaScript) */
+.personnel-item {
+  display: block;
 }
 
 /* Margin notes styling - positioned in right margin */
@@ -140,7 +131,8 @@ label.sidenote-number {
 }
 
 /* Definition lists (used for numbered items) */
-dl {
+/* Only top-level dl gets 55% width; nested dl inherits parent width */
+article > dl {
   width: 55%;
 }
 
@@ -161,10 +153,10 @@ dd dl {
   width: 100%;
 }
 
-/* Margin notes inside nested lists need adjusted positioning */
-dd .marginnote, dd .sidenote {
-  margin-right: -110%;
-  width: 45%;
+/* Margin notes inside definition lists need adjusted positioning */
+dl .marginnote, dl .sidenote {
+  margin-right: -80%;
+  width: 40%;
 }
 
 /* Checklist styling - make checkboxes visible */