Standardize header styles for test panel

[kumi222]

Align section header font properties and toggle indicators across both the Add a case and Test results drawers for visual consistency.

Closes #298

---

Summary by cubic

Standardizes header typography and toggle indicators across the Add a case and Test results drawers so both panels look and behave consistently. Closes #298.

• Replaces the text "v" chevron with a shared CSS-drawn arrow that rotates 90° when opened and returns when closed.
• Hides the native <details> marker and applies the same font, padding, and alignment to both headers.
• Adds a browser test verifying both headers share marker and typography styles and that each chevron rotates on open and restores on close.

^{Written for commit 1a5edde. Summary will update on new commits.}

[jserv]

display is not one of the few properties ::marker accepts, so that half of the rule does nothing. Firefox also drops the whole selector list because it does not recognize ::-webkit-details-marker. The native triangle only disappears because the summary is now display: flex, and it will come back if that ever changes. Make it explicit: keep .test-drawer summary::-webkit-details-marker { display: none; } as its own rule for Safari, and add list-style: none to the summary rule.

[jserv]

Improve git commit messages per https://cbea.ms/git-commit/ :

1. Separate subject from body with a blank line
2. Limit the subject line to 50 characters
3. Capitalize the subject line
4. Do not end the subject line with a period
5. Use the imperative mood in the subject line
6. Wrap the body at 72 characters
7. Use the body to explain what and why vs. how

The English writing must be improved, addressing comprehensive why vs. how.

[kumi222]

Improve git commit messages per https://cbea.ms/git-commit/ :

1. Separate subject from body with a blank line
2. Limit the subject line to 50 characters
3. Capitalize the subject line
4. Do not end the subject line with a period
5. Use the imperative mood in the subject line
6. Wrap the body at 72 characters
7. Use the body to explain what and why vs. how

The English writing must be improved, addressing comprehensive why vs. how.

Refined the git commit message to improve the English phrasing and comprehensively explain the underlying rationale (why), thank you!

[jserv]

CI fails on the indent gate: interview.html has formatting drift. Run make indent, then amend and force-push. The cargo-audit failure on the same run comes from rustls on main, not from this branch, and needs nothing from you.

[jserv]

Rebase latest main branch to eliminate known vulnerabilities.

[ColtenOuO]

Do not leave the commit body empty. CI will check :)

[jserv]

@kumi222 #298 asked for a browser test that checks both headers, and this branch changes only web/interview.html and web/styles.css. Add a test under tests/browser/ that asserts the two headers share the same marker and type styles and that the marker turns when each section opens, and amend it into the same commit.

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="tests/browser/test-drawer-headers.test.js">

<violation number="1" location="tests/browser/test-drawer-headers.test.js:108">
P2: The chevron has a 120ms transform transition, and this test reads the computed transform immediately after toggling. The restore assertion will compare a mid-transition matrix against `none` and fail. Wait for the transition to finish before reading, and assert the open state is the 90deg rotation.</violation>
</file>

<sub>Reply with feedback, questions, or to request a fix.

View guided diff | Re-trigger cubic</sub>

[cubic-dev-ai]

P2: The chevron has a 120ms transform transition, and this test reads the computed transform immediately after toggling. The restore assertion will compare a mid-transition matrix against none and fail. Wait for the transition to finish before reading, and assert the open state is the 90deg rotation.

Prompt for AI agents

Check if this issue is valid — if so, understand the root cause and fix it. When an issue isn't valid or won't be fixed in this PR, reply in its thread with the reason and then resolve the thread. At tests/browser/test-drawer-headers.test.js, line 108:

<comment>The chevron has a 120ms transform transition, and this test reads the computed transform immediately after toggling. The restore assertion will compare a mid-transition matrix against `none` and fail. Wait for the transition to finish before reading, and assert the open state is the 90deg rotation.</comment>

<file context>
@@ -0,0 +1,121 @@
+      );
+
+      await header.close();
+      const restoredTransform = await marker.evaluate(
+        (el) => getComputedStyle(el).transform,
+      );
</file context>

[jserv]

Improve git commit messages per https://cbea.ms/git-commit/ :

1. Separate subject from body with a blank line
2. Limit the subject line to 50 characters
3. Capitalize the subject line
4. Do not end the subject line with a period
5. Use the imperative mood in the subject line
6. Wrap the body at 72 characters
7. Use the body to explain what and why vs. how

Don’t repeat the same mistakes; doing so means you haven’t learned from them.

[jserv]

Run git config to specify your name properly and do git commit --amend.

[ColtenOuO]

I feel the commit message is still not quite right.

Match the two test drawer headers

Add a case used the browser's native disclosure triangle on the left,
while Test results drew a "v" character at the right edge, so two
headers in one drawer looked like different controls. Both now draw
the same chevron before the label with the same font and padding, and
it turns with the state each header already has: the open attribute
on the details element and the open class on the results toggle.

Closes #298

Would it be better this way? A commit message shouldn't explain the changes file by file; instead, it should give a clear, high-level summary that lets people quickly understand what changed.

[ColtenOuO]

Nothing ever adds open to #results-toggle, so this rule never applies on the real page. The click handler at web/interview.js:848-851 still flips resultsBody.hidden and writes ^/v into #results-chevron, which is now the CSS triangle. Clicking the toggle on this branch in Chromium:

	chevron text	transform	body
load	""	none	shown
1st click	^	none	hidden
2nd click	v	none	shown

So Test results starts open with its chevron pointing right, as if closed, and a click adds a stray character instead of turning it. The new test doesn't catch this because it adds the class itself (tests/browser/test-drawer-headers.test.js:72) rather than clicking. It also means the commit body's "each marker rotates when its section opens" isn't true yet for Test results.

The handler could toggle the class in place of the text, e.g. nodes.resultsToggle.classList.toggle("open", !nodes.resultsBody.hidden). runTests also shows the body at web/interview.js:2538, so that path needs the same sync, and the toggle should start with open in the markup since the body starts visible. Could the test click #results-toggle instead of setting the class?