Esri/calcite-design-system

[Tabs]: Allow smaller gap between tab-titles

Open

#13,724 opened on Jan 19, 2026

View on GitHub
 (4 comments) (0 reactions) (0 assignees)TypeScript (88 forks)auto 404
ArcGIS Scene Viewerc-tabcalcite-componentscalcite-design-tokensenhancementestimate - 2good first issueimpact - p3 - not time sensitivep - low

Repository metrics

Stars
 (367 stars)
PR merge metrics
 (PR metrics pending)

Description

monday.com sync: #11038671226

Check existing issues

Which Component

Tab

Description

Proposed: allow the user to adjust the gap between tab-titles

(e.g. by exposing --calcite-internal-tab-nav-gap?)

Acceptance Criteria

  • let the user reduce the gap – or reduce the gap according to width – to enhance compact layouts

Relevant Info

No response

Example Use Case

We use calcite-tabs in the header of "Scene tools" in Scene Viewer. This is a compact, fixed-width UI, with 5 icon-only tab-titles. The whole calcite-tab-nav is 248px wide.

With the gap between tab-titles being fixed to --calcite-internal-tab-nav-gap the width of each tab is limited to 25px

Reducing the gap would make the buttons more easy to click

E.g.

Priority impact

impact - p3 - not time sensitive

Calcite package

  • @esri/calcite-components
  • @esri/calcite-components-react
  • @esri/calcite-design-tokens
  • @esri/calcite-ui-icons
  • @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Scene Viewer

Contributor guide

Research direction
Examine the Tabs component's CSS custom properties, specifically ` calcite internal tab nav gap`, and determine how to make it user configurable or adjust based on container width.
Tech stack
typescriptcss
Domain
frontend
Issue type
Feature
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
2
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Fresh
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
CSSWeb Components
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
85