personal memory agent
chrome: polish facet bar, sidebar, and date-nav
request: req_zqzyhg5m
surfaces: A2 / A3 / A6-T-today
- stop facet-pill hover from clipping the lifted top edge
- paint the facet bar with deterministic facet tint over white
- remove the stray facet-color separator from the sidebar expander
- layer expander hover and active states over facet tint
- center the sidebar expander chevron with icon-sized type
- ellipsize sidebar labels and anchor stars next to drag handles
- hide the today T at rest and reveal it on date-nav hover/focus
Co-Authored-By: Codex <codex@openai.com>
+25
-21
+25
-21
convey/static/app.css
+25
-21
convey/static/app.css
···
210
210
top: 0;
211
211
left: 0;
212
212
right: 0;
213
-
background: white;
213
+
background: linear-gradient(var(--facet-bg, transparent), var(--facet-bg, transparent)), white;
214
214
z-index: var(--z-bars);
215
215
height: var(--facet-bar-height);
216
216
padding: 14px 16px 12px 16px;
···
219
219
display: flex;
220
220
align-items: center;
221
221
gap: 12px;
222
-
}
223
-
224
-
.facet-bar::before {
225
-
content: '';
226
-
position: absolute;
227
-
top: 0;
228
-
left: 0;
229
-
right: 0;
230
-
bottom: 0;
231
-
background: var(--facet-bg, transparent);
232
-
transition: background-color 0.3s ease;
233
-
pointer-events: none;
234
-
z-index: -1;
235
222
}
236
223
237
224
/* Border as pseudo-element for selective positioning */
···
428
415
font-weight: 600;
429
416
color: #9ca3af;
430
417
border-radius: 4px;
431
-
transition: background 0.15s, color 0.15s, font-weight 0.15s;
418
+
transition: background 0.15s, color 0.15s, font-weight 0.15s, opacity 0.15s;
419
+
}
420
+
421
+
.date-nav-today:not(.is-other-day) {
422
+
opacity: 0;
423
+
}
424
+
425
+
.date-nav:hover .date-nav-today:not(.is-other-day),
426
+
.date-nav:focus-within .date-nav-today:not(.is-other-day) {
427
+
opacity: 1;
432
428
}
433
429
434
430
.date-nav-today:hover {
···
824
820
gap: 10px;
825
821
align-items: center;
826
822
justify-content: center;
827
-
overflow: hidden;
823
+
overflow-x: clip;
824
+
overflow-y: visible;
828
825
min-width: 0; /* Allow container to shrink below content size */
829
826
}
830
827
···
1047
1044
font-weight: 500;
1048
1045
padding-right: 12px;
1049
1046
flex: 1;
1047
+
min-width: 0;
1048
+
overflow: hidden;
1049
+
text-overflow: ellipsis;
1050
+
white-space: nowrap;
1050
1051
}
1051
1052
1052
1053
.menu-bar .menu-item .star-toggle {
···
1121
1122
1122
1123
body.menu-full .menu-bar .menu-item .drag-handle {
1123
1124
display: inline-flex;
1125
+
opacity: 0.4;
1124
1126
}
1125
1127
1126
1128
body.menu-full .menu-bar .menu-item:hover .drag-handle {
···
1184
1186
align-items: center;
1185
1187
justify-content: center;
1186
1188
font: inherit;
1187
-
font-size: 20px;
1189
+
font-size: 22px;
1188
1190
cursor: pointer;
1189
1191
color: inherit;
1190
1192
border: none;
1191
1193
border-right: none;
1192
-
border-top: 1px solid var(--facet-border, #e5e0db);
1193
-
padding-top: 8px;
1194
1194
background: var(--facet-bg, white);
1195
1195
transition: background 0.2s;
1196
1196
user-select: none;
···
1204
1204
1205
1205
1206
1206
.menu-bar .menu-expander:hover {
1207
-
background: rgba(0,0,0,0.05);
1207
+
background:
1208
+
linear-gradient(rgba(0, 0, 0, 0.05), rgba(0, 0, 0, 0.05)),
1209
+
var(--facet-bg, white);
1208
1210
}
1209
1211
1210
1212
.menu-bar .menu-expander:active {
1211
-
background: rgba(0, 0, 0, 0.10);
1213
+
background:
1214
+
linear-gradient(rgba(0, 0, 0, 0.10), rgba(0, 0, 0, 0.10)),
1215
+
var(--facet-bg, white);
1212
1216
}
1213
1217
1214
1218
/* Hide only when sidebar is menu-full (keep visible during menu-all) */