Sizing And Wrapping

Small layout corrections for controls, labels, and compact rails.

Use .fit when a control or element should shrink to its content instead of filling the available inline space.

<select class="select fit" aria-label="Theme">
  <option>System</option>
  <option>Light</option>
  <option>Dark</option>
</select>

Use .nowrap on a flex layout such as .cluster when the group must stay on one line.

<div class="cluster nowrap sm">
  <select class="select sm fit" aria-label="Segment">
    <option>All segments</option>
  </select>
  <button class="btn sm outline" type="button">Filter</button>
</div>

Use .truncate on the flexible item that should ellipsize inside a constrained row.

A long account name that should not push actions away

<header class="cluster nowrap">
  <strong class="truncate">A long account name that should not push actions away</strong>
  <button class="btn sm ghost" type="button">Open</button>
</header>

CSS

.fit {
  inline-size: fit-content;
  max-inline-size: 100%;
}

.nowrap {
  flex-wrap: nowrap;
  white-space: nowrap;
}

.truncate {
  min-inline-size: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

Scroller

Use .scroller to apply optional framework scrollbar treatment to a scroll container. It styles the scrollbar only; pair it with .overflow-auto or a component that already creates overflow. scroller is not imported by actual.css. Import it explicitly when a project wants Actual CSS scrollbar chrome instead of the native OS default:

CSS

@import "actual-css/css/optional/scroller";

Scrollable content keeps the native scrollbar but makes it quieter.

Long content can keep flowing without forcing every component to invent its own scrollbar rules.

The utility exposes local custom properties for one-off tuning.

<div class="overflow-auto scroller" style="max-block-size: 12rem">
  <div class="stack">
    <p>Scrollable content keeps the native scrollbar but makes it quieter.</p>
    <p>Long content can keep flowing without forcing every component to invent its own scrollbar rules.</p>
    <p>The utility exposes local custom properties for one-off tuning.</p>
  </div>
</div>

CSS

.scroller {
  --scroller-size: 0.625rem;
  --scroller-padding: 0.125rem;
  --scroller-track: transparent;
  --scroller-thumb: var(--border);
  --scroller-thumb-hover: var(--text-muted);

  scrollbar-color: var(--scroller-thumb) var(--scroller-track);
  scrollbar-width: thin;
}

Customize locally when a scroll surface needs more contrast:

...

<div class="overflow-auto scroller"
     style="--scroller-thumb: var(--text-muted); --scroller-thumb-hover: var(--text)">
  ...
</div>

For rounded scroll containers, keep the thumb visually away from the edge by tuning --scroller-padding rather than adding extra wrappers or masking pseudo-elements.