Style panel clips fourth option on tablet-sized Obsidian views

[franchecol]

Summary

The tldraw style panel clips the rightmost option in tablet-sized Obsidian views. Desktop / wider views show the full selector correctly, but on the tablet the lower style rows only show three visible options.

Screenshots

Correct desktop / wider view

Tablet view with clipped fourth option

Environment

• Plugin: tldraw Obsidian plugin
• Installed plugin version observed: 1.29.0
• Reproduced on a Samsung tablet using an Obsidian vault synced from desktop
• Desktop / wider Obsidian view shows the selector correctly

Observed behavior

The color grid is complete, but lower style rows such as fill, dash, and size are horizontally clipped. For example, the size row shows S, M, L, while XL is clipped off the right edge.

Expected behavior

All row options should fit inside the style panel on tablet-sized views, e.g. S, M, L, and XL should all remain visible.

Likely cause

The bundled CSS fixes the style panel at 148px, but row buttons keep a min-width: 40px plus horizontal padding. Four buttons need more width than the panel allows, and horizontal overflow is hidden.

Relevant styles observed in the installed bundle:

.tlui-style-panel {
  width: 148px;
  max-width: 148px;
}

.tlui-style-panel__wrapper {
  overflow-x: hidden;
}

.tlui-button {
  min-width: 40px;
  padding: 0px 12px;
}

.tlui-row {
  display: flex;
  flex-direction: row;
  padding: 0 2px;
}

Local workaround that fixed it

This vault CSS snippet fixed the tablet view locally by allowing only the style-panel row buttons to shrink evenly:

.tldraw-view-root .tlui-style-panel .tlui-row {
  width: 100%;
}

.tldraw-view-root .tlui-style-panel .tlui-row > .tlui-button {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  padding-inline: 0;
}

This preserves the panel width and only affects compact row controls inside the tldraw style panel.