diff --git a/projects/demo-playwright/tests/kit/tabs/tabs.spec.ts b/projects/demo-playwright/tests/kit/tabs/tabs.spec.ts index 6d2e30b84bae..7788f46fc6cd 100644 --- a/projects/demo-playwright/tests/kit/tabs/tabs.spec.ts +++ b/projects/demo-playwright/tests/kit/tabs/tabs.spec.ts @@ -43,4 +43,12 @@ test.describe('Tabs', () => { }); }); }); + + test('Single button', async ({page}) => { + await tuiGoto(page, '/navigation/tabs/API?activeItemIndex=2&sandboxWidth=133'); + + await expect(new TuiDocumentationPagePO(page).apiPageExample).toHaveScreenshot( + '03-tabs-single-item-01.png', + ); + }); }); diff --git a/projects/kit/components/tabs/tab/tab.style.less b/projects/kit/components/tabs/tab/tab.style.less index 9cef051d44c2..e28a86c97eed 100644 --- a/projects/kit/components/tabs/tab/tab.style.less +++ b/projects/kit/components/tabs/tab/tab.style.less @@ -6,11 +6,14 @@ :host-context(tui-tabs >):first-child, :host-context([tuiTabs] >):first-child, -:host-context(tui-tabs > :first-child), -:host-context([tuiTabs] > :first-child) { +:host-context(tui-tabs > :not(.t-overflown) >):first-child { margin-left: 0; } +:host-context(tui-tabs > [tuiTab] ~ :not(.t-overflown) >):first-child { + margin-left: var(--tui-tab-margin, 1.5rem); +} + :host { .transition(~'color, box-shadow, opacity, background'); .clearbtn();