Skip to content

Commit 5fca2fa

Browse files
committed
Standardize header styles for test panel
The test panel drawer headers display inconsistent typography and toggle indicators between the case creation form and test execution status. This change aligns font properties and stateful indicator styles across both sections to establish visual continuity in the interview view.
1 parent 8394d54 commit 5fca2fa

2 files changed

Lines changed: 33 additions & 5 deletions

File tree

‎web/interview.html‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -264,7 +264,10 @@ <h1 id="problem-title">Loading interview...</h1>
264264
></div>
265265
<section id="test-drawer" class="test-drawer">
266266
<details id="candidate-case">
267-
<summary>Add a case</summary>
267+
<summary>
268+
<span class="drawer-chevron" aria-hidden="true"></span>
269+
<span>Add a case</span>
270+
</summary>
268271
<label
269272
>Input JSON
270273
<textarea
@@ -284,8 +287,8 @@ <h1 id="problem-title">Loading interview...</h1>
284287
<ol id="candidate-case-list" class="small"></ol>
285288
</details>
286289
<button id="results-toggle" type="button">
290+
<span id="results-chevron" class="drawer-chevron" aria-hidden="true"></span>
287291
<span id="results-label">Test results</span>
288-
<span id="results-chevron">v</span>
289292
</button>
290293
<div id="results-body" class="results-body">
291294
<p class="muted small">

‎web/styles.css‎

Lines changed: 28 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1425,16 +1425,41 @@ p {
14251425
flex-basis: auto;
14261426
}
14271427

1428+
.test-drawer summary::-webkit-details-marker,
1429+
.test-drawer summary::marker {
1430+
display: none;
1431+
}
1432+
1433+
.test-drawer summary,
14281434
#results-toggle {
14291435
display: flex;
1436+
align-items: center;
1437+
gap: 0.5rem;
14301438
width: 100%;
1431-
justify-content: space-between;
1439+
padding: 0.5rem 1rem;
14321440
border: 0;
14331441
background: transparent;
14341442
color: var(--sub);
1435-
padding: 0.5rem 1rem;
1436-
cursor: pointer;
1443+
font-family: inherit;
1444+
font-size: 0.875rem;
14371445
font-weight: 700;
1446+
cursor: pointer;
1447+
text-align: left;
1448+
}
1449+
1450+
.drawer-chevron {
1451+
display: inline-block;
1452+
width: 0;
1453+
height: 0;
1454+
border-top: 4px solid transparent;
1455+
border-bottom: 4px solid transparent;
1456+
border-left: 6px solid var(--sub);
1457+
transition: transform 120ms ease;
1458+
}
1459+
1460+
.test-drawer details[open] .drawer-chevron,
1461+
#results-toggle.open .drawer-chevron {
1462+
transform: rotate(90deg);
14381463
}
14391464

14401465
.results-body {

0 commit comments

Comments
 (0)