Pine/deepseek-harness
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases 1 Wiki Activity

feat(host): fixed-label show-hidden toggle; even divider clearance; 680x500 card

Browse Source
This commit is contained in:
creatixchu
2026-07-29 13:29:17 +08:00
parent cdcdd2221e
commit c747f721ba
5 changed files with 39 additions and 26 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/host/directory-picker-browse/src/client/DirectoryBrowser.module.css
+25 -15
View File
@@ -1,6 +1,7 @@
/* Directory-browser dialog (figma 813-23126 family). The shared Modal renders
* headless here — mask, card, Escape only — and this module owns the figma
* frame: 600×420 card (viewport-clamped), header (title + crumbs, l3 separator),
* frame: 680×500 card (viewport-clamped; upsized from the figma 600×420),
* header (title + crumbs, l3 separator),
* the one-or-two-column Miller content, and the bordered footer. */
/* Doubled class beats Modal's own .dialog regardless of stylesheet order. */
@@ -8,19 +9,19 @@
* columns scroll, so shrinking the height keeps Open/Cancel reachable
* instead of clipping them below a fixed overlay. */
.dialog.dialog {
width: min(600px, 100%);
height: min(420px, calc(100dvh - 32px));
width: min(680px, 100%);
height: min(500px, calc(100dvh - 32px));
padding: 0;
gap: 0;
}
/* Header block: pl24 pr14 pt22 pb12, 8px between title row and crumb row. */
/* Header block: pl24 pr14 pt16 pb8, 8px between title row and crumb row. */
.header {
display: flex;
flex-direction: column;
gap: 8px;
flex: none;
padding: 22px 14px 12px 24px;
padding: 16px 14px 8px 24px;
border-bottom: 1px solid var(--dsw-alias-border-l3);
}
@@ -56,6 +57,7 @@
min-height: 0;
gap: 20px;
overflow-x: auto;
scrollbar-width: none;
}
.crumbTrail {
@@ -126,28 +128,31 @@
color: var(--dsw-alias-label-primary);
}
/* Miller content: pt16 px24; columns are 256 wide (or full width solo) with
* the hairline divider centered between them; each column scrolls alone. */
/* Miller content: symmetric 16px vertical padding so the divider clears the
* header and footer rules evenly; columns are 256 wide (or full width solo)
* with the hairline divider centered between them; each column scrolls alone. */
.content {
display: flex;
flex-direction: column;
flex: 1 1 0;
min-height: 0;
padding: 16px 24px 0;
padding: 16px 24px;
}
/* Two-pane columns split the row evenly around the divider; 256px is the
* floor below which the row scrolls (scrollbar hidden, the effect pins the
* child pane into view) instead of squeezing the panes. */
.column {
display: flex;
flex-direction: column;
gap: 2px;
width: 256px;
flex: none;
flex: 1 1 0;
min-width: 256px;
overflow-y: auto;
}
.columnWide {
width: 100%;
flex: 1 1 0;
}
.divider {
@@ -228,8 +233,8 @@
color: var(--dsw-alias-state-error-primary);
}
/* Footer: l3 separator on top, pt12 px24, New-folder pinned left; the fixed
* card leaves the figma 28px below the 36px buttons. */
/* Footer: l3 separator on top, symmetric padding so the row sits vertically
* centered in the bar; New-folder and the show-hidden toggle pin left. */
.footerBar {
display: flex;
align-items: center;
@@ -238,12 +243,17 @@
flex-wrap: wrap;
gap: 8px;
flex: none;
padding: 12px 24px 28px;
padding: 16px 24px;
border-top: 1px solid var(--dsw-alias-border-l3);
}
/* Show-hidden toggle: a subtle text button in the footer, left of the gap. */
/* Show-hidden toggle: a subtle fixed-label text button left of the gap;
* the pressed state seats a check glyph before the label (Menu's selected
* vocabulary) instead of flipping the wording. */
.showHiddenToggle {
display: inline-flex;
align-items: center;
gap: 4px;
border: none;
background: transparent;
padding: 0;