Skip to content

Commit ae219a7

Browse files
committed
Architecture tabs: shorter labels + 2x2 mobile grid
Shorten tab labels from 'Dual-Model Engine' / 'Docker Isolation' / 'Validation System' to 'Dual-Model' / 'Docker' / 'Validation' so that all four fit comfortably on a 390px phone in a 2x2 grid. Also tighten .arch-content horizontal padding on phone and add a clean 2-col grid layout for .arch-tabs with min-width: 0 + word-break so no label is ever clipped against the frame.
1 parent cbde9bc commit ae219a7

2 files changed

Lines changed: 39 additions & 3 deletions

File tree

website/css/style.css

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1015,6 +1015,42 @@ header.g {
10151015

10161016
/* Phone: vertical single-column stack with explicit connector strips */
10171017
@media (max-width: 700px) {
1018+
/* Tabs: 2×2 grid so all 4 labels are always fully visible */
1019+
.arch-tabs {
1020+
display: grid;
1021+
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
1022+
border-bottom: none;
1023+
border-top: 1px solid var(--border);
1024+
border-right: 1px solid var(--border);
1025+
gap: 0;
1026+
max-width: 100%;
1027+
box-sizing: border-box;
1028+
}
1029+
.arch-tab {
1030+
min-width: 0;
1031+
padding: 12px 8px;
1032+
font-size: 0.625rem;
1033+
letter-spacing: 0.06em;
1034+
border-left: 1px solid var(--border);
1035+
border-bottom: 1px solid var(--border);
1036+
bottom: 0;
1037+
text-align: center;
1038+
white-space: normal;
1039+
line-height: 1.3;
1040+
word-break: break-word;
1041+
}
1042+
.arch-tab.active {
1043+
border-bottom-width: 2px;
1044+
}
1045+
/* Reduce outer horizontal padding on phone so content uses more width */
1046+
.arch-content {
1047+
padding: 16px 12px 24px;
1048+
}
1049+
.arch-title {
1050+
font-size: 1.5rem;
1051+
margin-bottom: 16px;
1052+
}
1053+
10181054
.arch-grid {
10191055
grid-template-columns: 1fr;
10201056
grid-template-rows: auto;

website/index.html

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -154,9 +154,9 @@ <h2>Setup<br>Agent</h2>
154154

155155
<div class="arch-tabs">
156156
<button class="arch-tab active" onclick="showTab('overview')">Overview</button>
157-
<button class="arch-tab" onclick="showTab('dual')">Dual-Model Engine</button>
158-
<button class="arch-tab" onclick="showTab('docker')">Docker Isolation</button>
159-
<button class="arch-tab" onclick="showTab('verify')">Validation System</button>
157+
<button class="arch-tab" onclick="showTab('dual')">Dual-Model</button>
158+
<button class="arch-tab" onclick="showTab('docker')">Docker</button>
159+
<button class="arch-tab" onclick="showTab('verify')">Validation</button>
160160
</div>
161161

162162
<!-- Overview -->

0 commit comments

Comments
 (0)