@crewlethq/ui 0.27.1 → 0.29.0

package/dist/styles.css

@@ -548,7 +548,7 @@
 }
 
 
-/* AppShell-APHZKJYH.css */
+/* AppShell-GCM4TDVY.css */
 /*
  * The application frame: a rail on the FRAME, and the screen on a SHEET that
  * floats beside it.
@@ -1040,9 +1040,12 @@
 }
 
 /* A screen that draws to the bottom of the window: the scroller stops
-   scrolling and the content column takes the height that is left. */
+   scrolling and the content column takes the height that is left. It
+   reserves no scrollbar gutter either, since nothing in it scrolls: the
+   reserved strip was a dead band down the screen's end edge. */
 .crewlet-app-shell--fill .crewlet-app-shell__main {
   overflow: hidden;
+  scrollbar-gutter: auto;
 }
 
 .crewlet-app-shell--fill .crewlet-app-shell__content {
@@ -1704,7 +1707,27 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
-/* ArrangeGroup-SHFHA7BE.css */
+/* ArrangeGrid-XM4ZFTED.css */
+/*
+ * ArrangeGrid: the page grid a board's blocks stand on. Equal columns, the
+ * board's gap between them, and each block stretched to its row's height, so
+ * the cards in one row share their bottom edge.
+ */
+.crewlet-arrange-grid {
+  display: grid;
+  grid-template-columns: repeat(var(--crewlet-arrange-columns, 12), minmax(0, 1fr));
+  gap: var(--crewlet-arrange-board-gap, var(--spacing-4));
+  align-items: stretch;
+}
+
+/* More room between rows while the page is arranged: each block's toolbar
+   sits on its top edge, half in the gap above it. */
+.crewlet-arrange-board.is-editing .crewlet-arrange-grid {
+  row-gap: var(--spacing-5);
+}
+
+
+/* ArrangeGroup-GY5YMP6E.css */
 /*
  * ArrangeGroup: a titled band of blocks. The hue is the header's; the body
  * stays the page's ground, so the cards inside keep their own contrast.
@@ -1839,11 +1862,10 @@ button.crewlet-account-row__who:focus-visible {
   margin-inline-start: auto;
 }
 
+/* The body is the page's grid (ArrangeGrid's `.crewlet-arrange-grid`), inside
+   the group: the same columns and gap, so a block is one width on the page
+   and in a group. */
 .crewlet-arrange-group__body {
-  display: grid;
-  grid-template-columns: repeat(var(--crewlet-arrange-columns, 12), minmax(0, 1fr));
-  gap: var(--spacing-4);
-  align-items: stretch;
   padding: var(--spacing-4);
   min-height: 5rem;
 }
@@ -1974,6 +1996,367 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
+/* ArtifactBar-IBWB5POL.css */
+/*
+ * One row, one hairline under it, the height of a large row. The lead (the
+ * way back, the glyph, the title, the version) takes what the end leaves it
+ * and the title is what gives way, ellipsised; the views sit between the two,
+ * centred while both sides have room, because the lead and the end each grow
+ * from a zero basis and the end never shrinks below its controls.
+ *
+ * Three widths of its OWN fold it (a container query, since a sidebar or a
+ * panel beside it decides its room, not the window): under a laptop sheet's
+ * width the presence stack goes (the People control still counts who is
+ * here), then the labelled tools' words, and under a phone's two panes the
+ * views, the unlabelled tools and the kind's glyph fold away, the first two
+ * into More.
+ */
+
+.crewlet-artifact-bar {
+  container: crewlet-artifact-bar / inline-size;
+  display: block;
+  min-width: 0;
+  background: var(--color-surface-background);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-artifact-bar__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  height: var(--size-row-lg);
+  padding: 0 var(--spacing-3);
+  min-width: 0;
+}
+
+.crewlet-artifact-bar__lead {
+  display: flex;
+  flex: 1 1 0;
+  align-items: center;
+  gap: var(--spacing-1);
+  min-width: 0;
+}
+
+.crewlet-artifact-bar__end {
+  display: flex;
+  flex: none;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+  margin-inline-start: auto;
+}
+
+/* WITH VIEWS TO CENTRE, the end grows from zero as the lead does, so the two
+   sides stay equal while there is room and the views sit in the middle; the
+   end never shrinks below its controls, so it is the title that gives way. */
+.crewlet-artifact-bar__row--centred .crewlet-artifact-bar__end {
+  flex: 1 0 0;
+  min-width: max-content;
+}
+
+.crewlet-artifact-bar__modes {
+  display: flex;
+  flex: none;
+  align-items: center;
+}
+
+.crewlet-artifact-bar__glyph {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: var(--size-control-sm);
+  height: var(--size-control-sm);
+  color: var(--color-text-secondary);
+}
+
+/* THE TITLE. Read only, it is text; renamable, its words are a button drawn
+   as text that answers the pointer with the hover ground, as a field would. */
+.crewlet-artifact-bar__title {
+  position: relative;
+  display: flex;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-bar__title--editing {
+  overflow: visible;
+}
+
+.crewlet-artifact-bar__rename {
+  min-width: 0;
+  max-width: 100%;
+  margin: 0;
+  padding: var(--spacing-1) var(--spacing-2);
+  overflow: hidden;
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  letter-spacing: inherit;
+  text-align: start;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: text;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-artifact-bar__rename:hover {
+  background: var(--color-surface-hover);
+}
+
+.crewlet-artifact-bar__rename:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+/* The field is as wide as what is typed in it: the grid cell is sized by a
+   hidden copy of the text, and the field fills that cell. */
+.crewlet-artifact-bar__sizer {
+  display: inline-grid;
+  min-width: 0;
+  max-width: 100%;
+}
+
+.crewlet-artifact-bar__sizer::after {
+  content: attr(data-value) ' ';
+  visibility: hidden;
+  grid-area: 1 / 1;
+  padding: var(--spacing-1) var(--spacing-2);
+  overflow: hidden;
+  white-space: pre;
+  font: inherit;
+}
+
+.crewlet-artifact-bar__field {
+  grid-area: 1 / 1;
+  min-width: 0;
+  width: 100%;
+  margin: 0;
+  padding: calc(var(--spacing-1) - 1px) calc(var(--spacing-2) - 1px);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  color: var(--color-text-primary);
+  font: inherit;
+  letter-spacing: inherit;
+}
+
+.crewlet-artifact-bar__field:focus {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-artifact-bar__field[aria-invalid='true'] {
+  border-color: var(--color-feedback-danger);
+}
+
+.crewlet-artifact-bar__error {
+  position: absolute;
+  top: calc(100% + var(--spacing-1));
+  left: 0;
+  z-index: var(--z-index-dropdown);
+  padding: var(--spacing-1) var(--spacing-2);
+  border: 1px solid var(--color-border-default);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-elevated);
+  box-shadow: var(--shadow-md);
+  color: var(--color-feedback-danger-ink);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+}
+
+.crewlet-artifact-bar__placeholder {
+  display: block;
+  flex: 0 1 12rem;
+  height: var(--font-size-sm);
+  border-radius: var(--radius-sm);
+  background: var(--color-surface-subtle);
+}
+
+.crewlet-artifact-bar__version {
+  display: inline-flex;
+  flex: none;
+  margin-inline-start: var(--spacing-1);
+}
+
+.crewlet-artifact-bar__presence {
+  display: inline-flex;
+  align-items: center;
+  margin-inline-end: var(--spacing-1);
+}
+
+.crewlet-artifact-bar__tools {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-artifact-bar__tool {
+  position: relative;
+  display: inline-flex;
+}
+
+/* A figure on the glyph's corner, inside the button's own box so it never
+   reaches past the bar's edge. */
+.crewlet-artifact-bar__badge {
+  position: absolute;
+  top: calc(-1 * var(--spacing-1));
+  right: calc(-1 * var(--spacing-1));
+  min-width: var(--spacing-4);
+  height: var(--spacing-4);
+  padding: 0 var(--spacing-1);
+  border-radius: var(--radius-pill);
+  background: var(--color-brand-accent);
+  color: var(--color-text-on-accent);
+  font-size: var(--font-size-2xs);
+  font-weight: var(--font-weight-semibold);
+  font-variant-numeric: tabular-nums;
+  line-height: var(--spacing-4);
+  text-align: center;
+  pointer-events: none;
+}
+
+/* WHILE THE PRESENCE STACK IS DRAWN it says who is here, so a tool's figure
+   saying the same is not drawn beside it; it comes back where the stack
+   folds away. */
+.crewlet-artifact-bar--present .crewlet-artifact-bar__badge {
+  display: none;
+}
+
+/* A rule between two groups of tools: the kind's, then every artifact's. */
+.crewlet-artifact-bar__rule {
+  width: 1px;
+  height: var(--spacing-4);
+  margin: 0 var(--spacing-1);
+  background: var(--color-border-default);
+}
+
+.crewlet-artifact-bar__tip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Both arrangements are drawn; the bar's width says which one shows. */
+.crewlet-artifact-bar__narrow,
+.crewlet-artifact-bar__tight {
+  display: none;
+}
+
+.crewlet-artifact-bar__wide,
+.crewlet-artifact-bar__roomy {
+  display: inline-flex;
+}
+
+@container crewlet-artifact-bar (width < 860px) {
+  .crewlet-artifact-bar__presence {
+    display: none;
+  }
+
+  .crewlet-artifact-bar--present .crewlet-artifact-bar__badge {
+    display: block;
+  }
+}
+
+@container crewlet-artifact-bar (width < 720px) {
+  .crewlet-artifact-bar__roomy {
+    display: none;
+  }
+
+  .crewlet-artifact-bar__tight {
+    display: inline-flex;
+  }
+}
+
+@container crewlet-artifact-bar (width < 640px) {
+  .crewlet-artifact-bar__row {
+    gap: var(--spacing-1);
+    padding: 0 var(--spacing-2);
+  }
+
+  /* The title has the row's room before the kind's glyph does: the glyph
+     says again what the title already names. */
+  .crewlet-artifact-bar__wide,
+  .crewlet-artifact-bar__glyph {
+    display: none;
+  }
+
+  .crewlet-artifact-bar__narrow {
+    display: inline-flex;
+  }
+
+  /* The views have folded, so there is nothing to centre: the title takes
+     the room. */
+  .crewlet-artifact-bar__row--centred .crewlet-artifact-bar__end {
+    flex: none;
+    min-width: 0;
+  }
+}
+
+/*
+ * THE VERSION CHIP: quiet at rest, the hover ground under the pointer, and
+ * the accent's soft ground while an older version than the newest is on
+ * show, so history never passes for the present.
+ */
+.crewlet-version-chip {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  height: var(--size-target-min);
+  padding: 0 var(--spacing-2);
+  border: 0;
+  border-radius: var(--radius-pill);
+  background: var(--color-surface-subtle);
+  color: var(--color-text-secondary);
+  font-family: var(--font-family-sans);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-medium);
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  cursor: pointer;
+  transition: background-color var(--motion-duration-fast) var(--motion-easing-default);
+}
+
+.crewlet-version-chip:hover {
+  background: var(--color-surface-hover);
+  color: var(--color-text-primary);
+}
+
+.crewlet-version-chip:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+}
+
+.crewlet-version-chip--older {
+  background: var(--color-brand-accent-soft);
+  color: var(--color-brand-accent-ink);
+}
+
+.crewlet-version-chip--older:hover {
+  background: var(--color-brand-accent-soft-strong);
+  color: var(--color-brand-accent-ink);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .crewlet-artifact-bar__rename,
+  .crewlet-version-chip {
+    transition: none;
+  }
+}
+
+
 /* ArtifactCard-EXVAEBV6.css */
 /*
  * A card in a gallery: the preview on top at a fixed ratio, so a grid of them
@@ -2156,6 +2539,141 @@ button.crewlet-account-row__who:focus-visible {
 }
 
 
+/* ArtifactPanel-YFXT5O77.css */
+/*
+ * The workspace is a row: the artifact's body, then at most one panel. The
+ * body scrolls itself, so a panel beside it stays in view however far the
+ * artifact is read; the panel's own body scrolls under its head.
+ *
+ * ONE HAIRLINE between the two, the panel's start edge, and none at the
+ * workspace's own edges: whatever frames the workspace already draws those.
+ */
+
+.crewlet-artifact-workspace {
+  container: crewlet-artifact-workspace / inline-size;
+  position: relative;
+  display: flex;
+  min-width: 0;
+  min-height: 0;
+}
+
+.crewlet-artifact-workspace__body {
+  flex: 1 1 auto;
+  min-width: 0;
+  min-height: 0;
+  overflow: auto;
+}
+
+/* EXPANDED, the panel is the workspace; the body stays mounted behind it. */
+.crewlet-artifact-workspace[data-panel='expanded'] > .crewlet-artifact-workspace__body {
+  display: none;
+}
+
+.crewlet-artifact-panel {
+  --crewlet-artifact-panel-width: 25rem;
+  display: flex;
+  flex: none;
+  flex-direction: column;
+  width: var(--crewlet-artifact-panel-width);
+  min-height: 0;
+  border-left: 1px solid var(--color-border-default);
+  background: var(--color-surface-background);
+}
+
+.crewlet-artifact-panel--sm {
+  --crewlet-artifact-panel-width: 20rem;
+}
+
+.crewlet-artifact-panel--lg {
+  --crewlet-artifact-panel-width: 36rem;
+}
+
+.crewlet-artifact-panel[data-expanded] {
+  flex: 1 1 auto;
+  width: auto;
+  border-left: 0;
+}
+
+.crewlet-artifact-panel__head {
+  display: flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: var(--size-row-lg);
+  padding: 0 var(--spacing-2) 0 var(--spacing-4);
+  border-bottom: 1px solid var(--color-border-default);
+}
+
+.crewlet-artifact-panel__icon {
+  display: inline-flex;
+  flex: none;
+  color: var(--color-text-tertiary);
+}
+
+.crewlet-artifact-panel__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--color-text-primary);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--font-line-height-snug);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.crewlet-artifact-panel__title:focus-visible {
+  outline: 2px solid var(--color-focus);
+  outline-offset: var(--size-focus-ring-inset-offset);
+  border-radius: var(--radius-sm);
+}
+
+.crewlet-artifact-panel__actions {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  gap: var(--spacing-1);
+}
+
+.crewlet-artifact-panel__body {
+  flex: 1 1 auto;
+  min-height: 0;
+  padding: var(--spacing-4);
+  overflow: auto;
+  overscroll-behavior: contain;
+}
+
+/* NOT ROOM FOR TWO COLUMNS: the panel slides over the artifact's end edge,
+   raised off it, rather than squeezing the artifact under a useful width. */
+@container crewlet-artifact-workspace (width < 960px) {
+  .crewlet-artifact-panel {
+    position: absolute;
+    inset-block: 0;
+    inset-inline-end: 0;
+    z-index: var(--z-index-overlay);
+    width: min(var(--crewlet-artifact-panel-width), 100%);
+    box-shadow: var(--shadow-lg);
+  }
+
+  .crewlet-artifact-panel[data-expanded] {
+    inset-inline-start: 0;
+    width: auto;
+    box-shadow: none;
+  }
+}
+
+/* A PHONE: the panel is the screen until it is closed. */
+@container crewlet-artifact-workspace (width < 640px) {
+  .crewlet-artifact-panel {
+    inset-inline-start: 0;
+    width: auto;
+    border-left: 0;
+    box-shadow: none;
+  }
+}
+
+
 /* AuthLayout-ODHBUPHQ.css */
 /*
  * The sign-in page: one narrow column near the top of the window.
@@ -4761,7 +5279,7 @@ a.crewlet-breadcrumb__crumb:focus-visible {
 }
 
 
-/* Charts-JYW4X5ZL.css */
+/* Charts-RY4JN5FC.css */
 /* The chart kit: a legend, a ranked bar list, a stacked bar, stacked
    columns, an activity strip, a time series and the reading layer they share. Hand-drawn rather than a charting library, for one reason that
    decides it: every mark here reads tokens, in two themes, at the contrast
@@ -5197,11 +5715,23 @@ a.crewlet-breadcrumb__crumb:focus-visible {
   height: 0;
   font-family: var(--font-family-mono);
   font-size: var(--font-size-2xs);
+  line-height: var(--font-line-height-tight);
   color: var(--color-text-tertiary);
   font-variant-numeric: tabular-nums;
   white-space: nowrap;
 }
 
+/*
+ * THE TOP TICK STANDS ON THE PLOT'S TOP EDGE, centred on it, so half its line
+ * sits above the plot. Under a head row that half falls in the row; with no
+ * head it fell outside the figure, and a container that clips its content
+ * (a dashboard widget's body) cut the axis's top value in half. The figure
+ * keeps that half line above the plot itself.
+ */
+.crewlet-stacked-columns--headless {
+  padding-block-start: calc(var(--font-size-2xs) * var(--font-line-height-tight) / 2);
+}
+
 .crewlet-stacked-columns__plot {
   position: relative;
   display: flex;
@@ -9703,7 +10233,7 @@ body.crewlet-data-table-resizing {
 }
 
 
-/* DatasetSource-47LBDMPR.css */
+/* DatasetSource-XFPZBRXL.css */
 /*
  * DatasetSource: one entry of a dashboard's Sources rail. The title and its
  * source kind, the definition, then where the rows stand, how many there are
@@ -9767,7 +10297,9 @@ button.crewlet-dataset-source__summary:focus-visible {
   overflow: hidden;
   color: var(--color-text-primary);
   font-size: var(--font-size-sm);
-  font-weight: var(--font-weight-semibold);
+  /* Medium, not semibold: the rail is the board's footnotes, and a column of
+     semibold titles beside it outweighed the figures' own. */
+  font-weight: var(--font-weight-medium);
   line-height: var(--font-line-height-snug);
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -9799,9 +10331,15 @@ button.crewlet-dataset-source__summary:focus-visible {
   color: var(--color-text-secondary);
 }
 
-/* The separators are drawn, not typed, so a screen reader hears the facts alone. */
-.crewlet-dataset-source__rows::before,
-.crewlet-dataset-source__refresh::before {
+/* How the rows are kept current, on the quiet step under the facts. */
+.crewlet-dataset-source__refresh {
+  color: var(--color-text-tertiary);
+  font-size: var(--font-size-xs);
+  line-height: var(--font-line-height-snug);
+}
+
+/* The separator is drawn, not typed, so a screen reader hears the facts alone. */
+.crewlet-dataset-source__rows::before {
   content: '\00b7' / '';
   margin-inline-end: var(--spacing-2);
 }
@@ -15152,7 +15690,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* Note-RT4L6VUT.css */
+/* Note-ONSKKTOA.css */
 /*
  * Note: words on a coloured paper. Each hue pairs its fill with its own ink.
  */
@@ -15196,6 +15734,16 @@ svg.crewlet-datetime__chevron {
   letter-spacing: var(--font-letter-spacing-tight);
 }
 
+/* The note's name, at a card title's step, in the note's own ink. */
+.crewlet-note__heading {
+  margin: 0 0 var(--spacing-2);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-semibold);
+  letter-spacing: var(--font-letter-spacing-tight);
+  line-height: var(--font-line-height-snug);
+  text-wrap: balance;
+}
+
 /* Prose inside takes the note's ink, links included. */
 .crewlet-note :is(p, li, h2, h3, h4, strong, em) {
   color: inherit;
@@ -16555,7 +17103,7 @@ svg.crewlet-datetime__chevron {
 }
 
 
-/* PeopleRail-R64WVOSH.css */
+/* PeopleRail-SZGHZXVT.css */
 /* PeopleRail: a raised column of everybody present, one row a person, the
    name over what they are doing and the controls at the row's end. */
 .crewlet-people-rail {
@@ -16569,6 +17117,14 @@ svg.crewlet-datetime__chevron {
   background: var(--color-surface-elevated);
 }
 
+/* PLAIN: the list alone, in a host that frames and names it. */
+.crewlet-people-rail--plain {
+  padding: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+
 .crewlet-people-rail__head {
   display: flex;
   align-items: center;
@@ -26678,7 +27234,7 @@ svg.crewlet-time-window__tick {
 }
 
 
-/* WidgetFrame-4EFJOJMW.css */
+/* WidgetFrame-LRZIL62O.css */
 /*
  * WidgetFrame: one figure on a dashboard. A title row, the figure filling the
  * height the host's frame gives it, and the citation line at the foot.
@@ -26688,24 +27244,44 @@ svg.crewlet-time-window__tick {
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
-  gap: var(--spacing-2);
+  gap: var(--spacing-3);
   min-width: 0;
   height: 100%;
   min-height: 0;
-  padding: var(--spacing-3) var(--spacing-4);
+  /* THE CARD'S OWN INSET, set on each part rather than on the frame, so a
+     flush figure can give up its sides while the title and the citation keep
+     theirs. */
+  padding-block: var(--spacing-4);
+  /* THE CARD RECIPE: the ground, the hairline and the corner every card on a
+     board stands on, so a figure and the cards around it are one object. */
   border: 1px solid var(--color-border-default);
   border-radius: var(--radius-lg);
-  background: var(--color-surface-elevated);
+  background: var(--color-surface-subtle);
+  /* Measured by its own width, for the citation below. */
+  container: crewlet-widget-frame / inline-size;
+}
+
+.crewlet-widget-frame__head,
+.crewlet-widget-frame__body,
+.crewlet-widget-frame__cite {
+  padding-inline: var(--spacing-4);
 }
 
 .crewlet-widget-frame__head {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   gap: var(--spacing-2);
   min-width: 0;
 }
 
+/*
+ * THE TITLE IS THE FIGURE'S ONLY NAME, so it is read whole: it takes a second
+ * line before it gives up a word, and only a title longer than two lines ends
+ * in an ellipsis. Cut at one line, a frame three columns wide named "Tokens,
+ * last 14 days" as "Tokens, last 14 da".
+ */
 .crewlet-widget-frame__title {
+  display: -webkit-box;
   flex: 1;
   min-width: 0;
   margin: 0;
@@ -26714,15 +27290,21 @@ svg.crewlet-time-window__tick {
   font-size: var(--font-size-sm);
   font-weight: var(--font-weight-semibold);
   line-height: var(--font-line-height-snug);
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  overflow-wrap: anywhere;
+  text-wrap: pretty;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
 }
 
+/* The controls stand on the title's first line: the box is one line of the
+   title tall and the control is centred in it, whatever its own height. */
 .crewlet-widget-frame__actions {
   display: inline-flex;
   flex: none;
   align-items: center;
   gap: var(--spacing-1);
+  height: calc(var(--font-size-sm) * var(--font-line-height-snug));
 }
 
 .crewlet-widget-frame__body {
@@ -26732,6 +27314,24 @@ svg.crewlet-time-window__tick {
   overflow: auto;
 }
 
+/* A flush figure reaches the frame's sides, and a table's cells take the
+   frame's inset, so its first column starts under the title and its row
+   rules meet the border. */
+.crewlet-widget-frame--flush .crewlet-widget-frame__body {
+  padding-inline: 0;
+}
+
+.crewlet-widget-frame--flush .crewlet-data-table--compact {
+  --crewlet-data-table-cell-pad-x: var(--spacing-4);
+}
+
+/* A stat tile drawn flush as the figure stands on the frame's inset; its own
+   is for a column of a StatGroup, and inside a frame it doubled the space
+   around the label and under the value. */
+.crewlet-widget-frame__body .crewlet-statcard--flush {
+  padding: 0;
+}
+
 .crewlet-widget-frame__blocked {
   display: flex;
   align-items: flex-start;
@@ -26754,10 +27354,16 @@ svg.crewlet-time-window__tick {
   min-width: 0;
 }
 
+/*
+ * ONE LINE: the dataset's title gives up its tail before the time leaves the
+ * line. Allowed to wrap, a long title was cut and its "as of" fell to a line
+ * of its own that began with the separator.
+ */
 .crewlet-widget-frame__cite-text,
 .crewlet-widget-frame__cite-button {
   display: inline-flex;
-  flex-wrap: wrap;
+  flex-wrap: nowrap;
+  max-width: 100%;
   align-items: center;
   gap: 0 var(--spacing-1);
   min-width: 0;
@@ -26789,6 +27395,8 @@ svg.crewlet-time-window__tick {
 }
 
 .crewlet-widget-frame__source {
+  flex: 0 1 auto;
+  min-width: 0;
   overflow: hidden;
   color: var(--color-text-secondary);
   font-weight: var(--font-weight-medium);
@@ -26802,7 +27410,34 @@ svg.crewlet-time-window__tick {
   margin-inline-end: var(--spacing-1);
 }
 
+.crewlet-widget-frame__when {
+  flex: none;
+  white-space: nowrap;
+}
+
+/*
+ * A NARROW FRAME STACKS ITS CITATION: the dataset's title on one line and
+ * when it was true under it, with no separator to begin a line. Side by side
+ * in a frame three columns wide, the title kept four letters ("Open w...").
+ */
+@container crewlet-widget-frame (width < 18rem) {
+  .crewlet-widget-frame__cite-text,
+  .crewlet-widget-frame__cite-button {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+
+  .crewlet-widget-frame__source {
+    max-width: 100%;
+  }
+
+  .crewlet-widget-frame__when::before {
+    content: none;
+  }
+}
+
 .crewlet-widget-frame__stale {
   display: inline-flex;
+  flex: none;
   color: var(--color-feedback-warning-ink);
 }