Skip to content

Commit 1f01c97

Browse files
sametbasbugclaude
sametbasbug
and
claude
committed
Rebuild the More sheet and give agents a robot head
The sheet was not designed, it was inherited. Giving it .app-rail-nav to save a few bytes handed it the rail's proportions and, twice now, the rail's behaviour: first the icon-only rules blanked its labels, then .primary-nav's justify-content: center pushed every icon to a different x, so the column zig-zagged by label length. It has its own styles now — rows down from 46px to 38, panel from 208x254 to 184x210, icons in a fixed column with the labels on one line. The leak is closed at the source too: the bar's rules are scoped to .primary-nav > a, so nothing inside the sheet inherits them. That is what made room in the CSS budget, along with .side-nav, which has been dead since the rail moved into BaseLayout and nobody noticed. The ceiling did not move. Agents drew a two-person silhouette right next to the account's one-person silhouette, which read as singular and plural of the same thing. They are not: one is the agents writing on Orbit, the other is the human holding the connection. Agents is a robot head now, drawn to the set's language — 24x24, no fill, 1.8 stroke, round caps — and checked at 19, 36 and 120px. The eyes are short strokes because dots disappear at bar size. One icon source, so desktop and mobile both get it. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
1 parent 85d0d2c commit 1f01c97

4 files changed

Lines changed: 76 additions & 65 deletions

File tree

‎src/components/Header.astro‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -61,9 +61,16 @@ const searchQuery = Astro.url.searchParams.get('q') ?? '';
6161
<Icon name="chevron" size={18} />
6262
<span class="nav-label">Diğer</span>
6363
</summary>
64-
{/* Bağlantı stilleri rayınkiyle aynı sınıftan geliyor: iki menü,
65-
tek görünüm kaynağı. */}
66-
<div class="nav-more-sheet app-rail-nav">
64+
{/*
65+
Kendi stilleri var, rayınkini ödünç almıyor.
66+
67+
Bir dönem `app-rail-nav` sınıfını taşıyordu — CSS bütçesinden
68+
kazanmak içindi — ve iki kez ısırdı: rayın ikon modu menünün
69+
etiketlerini gizledi, çubuğun `justify-content: center` kuralı da
70+
ikonları satır uzunluğuna göre kaydırdı. Bir menü panelinin
71+
ölçüleri bir gezinme rayınınkiyle aynı olmak zorunda değil.
72+
*/}
73+
<div class="nav-more-sheet">
6774
{moreLinks.map((link) => (
6875
<a
6976
href={link.href}

‎src/shared/icons.ts‎

Lines changed: 17 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -30,11 +30,24 @@ export const ICON_PATHS: Record<IconName, string[]> = {
3030
'M5.5 9.5V21h13V9.5',
3131
'M9.5 21v-6h5v6',
3232
],
33+
/* Ajanlar: robot kafası.
34+
*
35+
* Bir dönem burada iki kişilik bir insan silüeti vardı ve hesap
36+
* bağlantısındaki tek kişilik silüetin çoğulu gibi duruyordu — oysa
37+
* ikisi aynı türden şey değil: biri Orbit'te yazan ajanlar, öteki
38+
* bağlantıyı kuran insan.
39+
*
40+
* Setin diline uyuyor: 24×24, dolgusuz, 1.8 kalınlık, yuvarlak uç.
41+
* Gözler kısa dikey çizgi; nokta olarak çizilenler 18px'te kayboluyor. */
3342
agents: [
34-
'M16 21v-2a4 4 0 0 0-4-4H6a4 4 0 0 0-4 4v2',
35-
'M9 11a4 4 0 1 0 0-8 4 4 0 0 0 0 8Z',
36-
'M22 21v-2a4 4 0 0 0-3-3.87',
37-
'M16 3.13a4 4 0 0 1 0 7.75',
43+
'M6 9.5h12a2 2 0 0 1 2 2v6a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2v-6a2 2 0 0 1 2-2Z',
44+
'M12 6.5v3',
45+
'M12 6.5a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3Z',
46+
'M9.5 13v1.5',
47+
'M14.5 13v1.5',
48+
'M9.75 17h4.5',
49+
'M4 13.5H2.5',
50+
'M20 13.5h1.5',
3851
],
3952
/* Tek kişi. `agents` iki kişilik bir grup ve o "ajanlar" demek; hesap
4053
* bağlantısı onunla aynı ikonu taşıyınca menüde yan yana iki özdeş

‎src/styles/components.css‎

Lines changed: 9 additions & 47 deletions
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@
7979
line-height: var(--leading-none);
8080
}
8181

82-
.primary-nav a {
82+
.primary-nav > a {
8383
position: relative;
8484
display: inline-flex;
8585
align-items: center;
@@ -95,7 +95,7 @@
9595
transition: color 160ms ease, background 160ms ease, transform 160ms ease;
9696
}
9797

98-
.primary-nav a::after {
98+
.primary-nav > a::after {
9999
content: "";
100100
position: absolute;
101101
background: transparent;
@@ -106,7 +106,7 @@
106106
border-radius: 3px 3px 0 0;
107107
}
108108

109-
.primary-nav a:hover {
109+
.primary-nav > a:hover {
110110
color: var(--ink);
111111
background: var(--surface-hover);
112112
}
@@ -1152,20 +1152,20 @@
11521152
line-height: var(--leading-tight);
11531153
}
11541154

1155-
.primary-nav a > span {
1155+
.primary-nav > a > span {
11561156
font-size: var(--text-base);
11571157
font-weight: var(--weight-medium);
11581158
}
11591159

1160-
.primary-nav a b {
1160+
.primary-nav > a b {
11611161
font-weight: var(--weight-bold);
11621162
}
11631163

1164-
.primary-nav a[aria-current="page"] {
1164+
.primary-nav > a[aria-current="page"] {
11651165
color: var(--orbit-blue);
11661166
}
11671167

1168-
.primary-nav a[aria-current="page"]::after {
1168+
.primary-nav > a[aria-current="page"]::after {
11691169
background: linear-gradient(90deg, var(--orbit-blue), var(--orbit-violet));
11701170
}
11711171

@@ -1177,39 +1177,6 @@
11771177
box-shadow: 0 0 0 3px rgba(66, 184, 131, 0.13);
11781178
}
11791179

1180-
.side-nav {
1181-
display: grid;
1182-
gap: var(--space-3);
1183-
}
1184-
1185-
.side-nav a {
1186-
display: flex;
1187-
align-items: center;
1188-
gap: var(--space-6);
1189-
min-height: 3.05rem;
1190-
padding: 0 var(--space-6);
1191-
border-radius: 0.8rem;
1192-
color: var(--muted);
1193-
font-size: var(--text-md);
1194-
font-weight: var(--weight-bold);
1195-
text-decoration: none;
1196-
transition: background 160ms ease, color 160ms ease, transform 160ms ease;
1197-
}
1198-
1199-
.side-nav a span {
1200-
width: 1.2rem;
1201-
color: var(--orbit-blue);
1202-
font-size: var(--text-lg);
1203-
text-align: center;
1204-
}
1205-
1206-
.side-nav a:hover,
1207-
.side-nav a.active {
1208-
color: var(--ink);
1209-
background: var(--surface-nav-active);
1210-
transform: translateX(2px);
1211-
}
1212-
12131180
.truth-note > span {
12141181
color: var(--orbit-violet);
12151182
}
@@ -1342,24 +1309,19 @@
13421309
line-height: 0;
13431310
}
13441311

1345-
.primary-nav a > .icon {
1312+
.primary-nav > a > .icon {
13461313
width: 1.12rem;
13471314
height: 1.12rem;
13481315
}
13491316

1350-
.primary-nav a > .nav-label {
1317+
.primary-nav > a > .nav-label {
13511318
width: auto;
13521319
color: inherit;
13531320
font-size: var(--text-sm);
13541321
font-weight: var(--weight-bold);
13551322
line-height: var(--leading-none);
13561323
}
13571324

1358-
.side-nav a > .icon {
1359-
width: 1.14rem;
1360-
color: var(--orbit-blue);
1361-
}
1362-
13631325
.pinned-label {
13641326
display: inline-flex;
13651327
align-items: center;

‎src/styles/responsive.css‎

Lines changed: 40 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -264,21 +264,50 @@
264264
background: var(--surface-soft);
265265
}
266266

267+
/* Panel telefon için ölçülü: satırlar 2.4rem, ikonlar sabit bir sütunda
268+
ve etiketler tek hizadan başlıyor. Rayın ölçülerini ödünç alan hâli
269+
46px'lik satırlarla gereksiz iri duruyordu. */
267270
.nav-more-sheet {
268271
display: grid;
269272
gap: var(--space-1);
270273
position: absolute;
271274
right: 0;
272-
bottom: calc(100% + 0.6rem);
273-
min-width: 13rem;
274-
padding: var(--space-3);
275+
bottom: calc(100% + 0.5rem);
276+
min-width: 11.5rem;
277+
padding: var(--space-2);
275278
border: 1px solid rgba(211, 217, 229, 0.9);
276-
border-radius: 1.1rem;
279+
border-radius: 0.9rem;
277280
background: rgba(255, 255, 255, 0.97);
278281
box-shadow: 0 18px 40px rgba(31, 40, 72, 0.24);
279282
backdrop-filter: blur(18px);
280283
}
281284

285+
/* Çubuğun kuralları artık `.primary-nav > a` ile sınırlı, yani buraya
286+
sızmıyor; panel kendi ölçüsünü kendisi kuruyor. İkonlar sabit
287+
genişlikte bir sütunda ve etiketler tek hizadan başlıyor. */
288+
.nav-more-sheet a {
289+
display: flex;
290+
align-items: center;
291+
gap: var(--space-4);
292+
min-height: 2.4rem;
293+
padding: 0 var(--space-4);
294+
border-radius: 0.6rem;
295+
color: var(--muted);
296+
font-size: var(--text-sm);
297+
font-weight: var(--weight-bold);
298+
text-decoration: none;
299+
}
300+
301+
.nav-more-sheet a > .icon {
302+
flex: 0 0 auto;
303+
color: var(--orbit-blue);
304+
}
305+
306+
.nav-more-sheet a[aria-current="page"] {
307+
color: var(--ink);
308+
background: var(--surface-nav-active);
309+
}
310+
282311
html[data-theme="dark"] .nav-more-sheet {
283312
border-color: var(--line);
284313
background: rgba(17, 23, 36, 0.97);
@@ -299,15 +328,15 @@
299328
justify-content: center;
300329
}
301330

302-
.primary-nav a > span {
331+
.primary-nav > a > span {
303332
font-size: var(--text-lg);
304333
}
305334

306-
.primary-nav a b {
335+
.primary-nav > a b {
307336
font-size: var(--text-3xs);
308337
}
309338

310-
.primary-nav a[aria-current="page"] {
339+
.primary-nav > a[aria-current="page"] {
311340
background: #eef1ff;
312341
}
313342

@@ -330,13 +359,13 @@
330359
white-space: nowrap;
331360
}
332361

333-
.primary-nav a > .nav-label,
362+
.primary-nav > a > .nav-label,
334363
.nav-more > summary > .nav-label {
335364
width: auto;
336365
font-size: var(--text-3xs);
337366
}
338367

339-
.primary-nav a > .icon,
368+
.primary-nav > a > .icon,
340369
.nav-more > summary > .icon {
341370
width: 1.15rem;
342371
height: 1.15rem;
@@ -348,7 +377,7 @@
348377
box-shadow: 0 14px 35px rgba(0, 0, 0, 0.35);
349378
}
350379

351-
html[data-theme="dark"] .primary-nav a[aria-current="page"] {
380+
html[data-theme="dark"] .primary-nav > a[aria-current="page"] {
352381
background: #252d49;
353382
}
354383
}
@@ -784,7 +813,7 @@
784813

785814
.record,
786815
.agent-card,
787-
.side-nav a,
816+
.app-rail-nav a,
788817
.reply-summary,
789818
.equinox-link,
790819
.skip-link,

0 commit comments

Comments
 (0)