---
title: "Ui: tileSizing"
description: "smabar plugin reference: Ui: tileSizing"
canonical: "https://smabar.com/docs/plugin-ref-ui-tile-sizing/"
lang: en
---

# Ui: tileSizing

> smabar plugin reference: Ui: tileSizing

Canonical HTML version: https://smabar.com/docs/plugin-ref-ui-tile-sizing/ · Language: en · Publisher: smabar (https://smabar.com)

---

[Build my plugin](https://smabar.com/build-my-plugin.md) · [All references](https://smabar.com/docs/plugin-ref-index.md) · [Install the ZIP](https://smabar.com/docs/install-plugin-zip.md)

Source: smabar 1.5.0, revision `a019f2563965edc37a5e8d84742ea1ff2fa6f824`. [Export metadata and checksums](https://smabar.com/plugin-reference/export.json).

This is an offline reference. MCP calls quoted below describe the connected workflow; use the linked documents and create local files instead. Live state, installed plugins, available providers and the user's active theme are unknown. Never claim a live check.

Read with [styling](https://smabar.com/docs/plugin-ref-styling.md) and [examples](https://smabar.com/docs/plugin-ref-examples.md).

## rule

```json
"The tile hugs its content and centers it. Stability comes from the technique that fits your content, not from a width you set."
```

## scenarios

```json
[
  {
    "content": "Icon plus a short value, e.g. an icon and \"51%\"",
    "do": "Nothing. The tile is already exactly as wide as its content."
  },
  {
    "content": "A ticking number: price, clock, countdown, counter",
    "do": "Cover text inherits tabular digits in the theme's font. Use sb-mono only for an intentional monospace face. Equal-length readings stay stable when the chosen font supports tabular digits; changes in the number of digits may still resize the tile."
  },
  {
    "content": "Text whose length you do not control (a title, a status line)",
    "do": "Give it a max-width plus data-marquee. It scrolls only while it overflows, instead of stretching the tile."
  },
  {
    "content": "Several values that should all be visible over time",
    "do": "Wrap them in data-rotator. It stacks the views in one cell, so the footprint is constant and equals the widest view — no width of your own needed."
  },
  {
    "content": "The tile switches between loading, error and data",
    "do": "Render the SAME structure in every state (a placeholder like \"–\" where the value goes). A tile that changes shape per state is what looks broken; a one-time loading-to-loaded resize is normal."
  },
  {
    "content": "You genuinely need a fixed width (rare)",
    "do": "Set min-width inline as a deliberate exception, knowing the tile will be wider than its content in every other state."
  },
  {
    "content": "Two lines, e.g. a clock with the time over the date, or a value over its label",
    "do": "Wrap them in class sb-tile-stack: first child is the primary line, last child the secondary one. Both are sized from var(--sb-tile-content-h), so the text scales with the bar height instead of overflowing it. Pick the base size with tileScale (s|m|l) in smabar.json."
  }
]
```

## height

```json
"The shell publishes the available content height after bar and tile padding/borders as var(--sb-tile-content-h). Cover primitives size against this budget and the theme's type steps; the row grows to fit the tallest measured cover. Keep content compact instead of turning a tile into a panel. Roomy surfaces get tighter padding inside a tile, and sb-hero loses its glow."
```