fix(addon-mobile): DataList inside DropdownMobile should not have built-in horizontal indent

projects/addon-mobile/directives/dropdown-mobile/dropdown-mobile.style.less

@@ -95,6 +95,11 @@ tui-dropdown-mobile._sheet {
             overflow: auto;
         }
     }
+
+    tui-data-list [tuiOption] {
+        margin-left: calc(-1 * var(--t-option-padding-inline));
+        margin-right: calc(-1 * var(--t-option-padding-inline));
+    }
 }
 
 .t-dropdown-mobile {

projects/core/components/data-list/data-list.style.less

@@ -26,9 +26,13 @@ tui-data-list {
 
         & > .t-empty,
         [tuiOption] {
+            --t-option-padding-inline: 0.5rem;
+
             font: var(--tui-font-text-s);
             min-block-size: 2rem;
-            padding: 0.3125rem 0.5rem;
+            // TODO: use padding-block after Safari 14+
+            padding-top: 0.3125rem;
+            padding-bottom: 0.3125rem;
 
             &::before {
                 font-size: 1rem;
@@ -38,9 +42,13 @@ tui-data-list {
 
     &[data-size='m'] > .t-empty,
     &[data-size='m'] [tuiOption] {
+        --t-option-padding-inline: 0.5rem;
+
         font: var(--tui-font-text-s);
         min-block-size: 2.5rem;
-        padding: 0.375rem 0.5rem;
+        // TODO: use padding-block after Safari 14+
+        padding-top: 0.375rem;
+        padding-bottom: 0.375rem;
     }
 
     &[data-size='l'] {
@@ -49,9 +57,13 @@ tui-data-list {
 
         & > .t-empty,
         [tuiOption] {
+            --t-option-padding-inline: 0.625rem;
+
             font: var(--tui-font-text-m);
             min-block-size: 2.75rem;
-            padding: 0.375rem 0.625rem;
+            // TODO: use padding-block after Safari 14+
+            padding-top: 0.375rem;
+            padding-bottom: 0.375rem;
         }
     }
 
@@ -101,6 +113,13 @@ tui-data-list {
             border-right: 0.5rem solid;
         }
     }
+
+    & > .t-empty,
+    [tuiOption] {
+        // TODO: use padding-inline after Safari 14+
+        padding-left: var(--t-option-padding-inline);
+        padding-right: var(--t-option-padding-inline);
+    }
 }
 
 tui-opt-group {

projects/demo-playwright/playwright.options.ts

@@ -1,6 +1,16 @@
+import type {test} from '@playwright/test';
+
 // cspell:disable
 export const TUI_PLAYWRIGHT_MOBILE_USER_AGENT =
     'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1';
 // Samsung Galaxy Ace GT:
 export const TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH = 320;
 export const TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT = 480;
+
+export const TUI_PLAYWRIGHT_MOBILE: Parameters<typeof test.use>[0] = {
+    viewport: {
+        width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
+        height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
+    },
+    userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
+};

projects/demo-playwright/tests/addon-mobile/mobile-dropdown/mobile-dropdown-with-textfield.pw.spec.ts

@@ -0,0 +1,21 @@
+import {DemoRoute} from '@demo/routes';
+import {TuiDocumentationPagePO} from '@demo-playwright/utils';
+import {expect, test} from '@playwright/test';
+
+import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options';
+
+const {describe} = test;
+
+describe('DropdownMobile for textfields', () => {
+    test.use(TUI_PLAYWRIGHT_MOBILE);
+
+    test('with select', async ({page}) => {
+        await page.goto(DemoRoute.Dropdown);
+
+        const example = new TuiDocumentationPagePO(page).getExample('#mobile');
+
+        await example.locator('tui-select').click();
+
+        await expect(page).toHaveScreenshot('dropdown-mobile-with-select.png');
+    });
+});

projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.pw.spec.ts

@@ -2,20 +2,10 @@ import {DemoRoute} from '@demo/routes';
 import {TuiDocumentationApiPagePO, tuiGoto} from '@demo-playwright/utils';
 import {expect, test} from '@playwright/test';
 
-import {
-    TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
-    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
-    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
-} from '../../../playwright.options';
+import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options';
 
 test.describe('ActionBar', () => {
-    test.use({
-        viewport: {
-            width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
-            height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
-        },
-        userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
-    });
+    test.use(TUI_PLAYWRIGHT_MOBILE);
 
     test('works', async ({page}) => {
         await tuiGoto(page, DemoRoute.ActionBar);

projects/demo-playwright/tests/kit/dropdown-hover/dropdown-hover.pw.spec.ts

@@ -7,11 +7,7 @@
 import type {Locator} from '@playwright/test';
 import {expect, test} from '@playwright/test';
 
-import {
-    TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
-    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
-    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
-} from '../../../playwright.options';
+import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options';
 
 const {describe, beforeEach} = test;
 
@@ -25,14 +21,7 @@
             let example!: Locator;
             let mobileCalendar: TuiMobileDropdownPO;
 
-            test.use({
-                viewport: {
-                    width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
-                    height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
-                },
-                userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
-                isMobile: true,
-            });
+            test.use(TUI_PLAYWRIGHT_MOBILE);
 
             beforeEach(({page}) => {
                 example = new TuiDocumentationPagePO(page).getExample('#dropdown-mobile');
@@ -48,13 +37,13 @@
 
                 await expect(page.locator('tui-dropdown')).not.toBeAttached();
                 await expect(page.locator('tui-dropdown-mobile')).toBeVisible();
                 await expect(page).toHaveScreenshot(
                     'mobile-dropdown-1st-time-time-click.png',
                 );
             });
 
             test('Closes dropdown on click on overlay', async ({page, browserName}) => {
                 // TODO: why does this test keep failing in safari
                 test.skip(
                     browserName !== 'chromium',
                     'This feature is only relevant in Chrome',
@@ -73,7 +62,7 @@
                 page,
                 browserName,
             }) => {
                 // TODO: why does this test keep failing in safari
                 test.skip(
                     browserName !== 'chromium',
                     'This feature is only relevant in Chrome',
@@ -85,7 +74,7 @@
 
                 await expect(page.locator('tui-dropdown-mobile')).toBeVisible();
 
                 await expect(page).toHaveScreenshot(
                     'mobile-dropdown-2nd-time-time-click.png',
                 );
             });

projects/demo-playwright/tests/kit/input-phone-international/phone-i18n-with-mobile-dropdown.pw.spec.ts

@@ -0,0 +1,57 @@
+import {DemoRoute} from '@demo/routes';
+import {
+    TuiDocumentationPagePO,
+    tuiGoto,
+    TuiInputPhoneInternationalPO,
+} from '@demo-playwright/utils';
+import type {Locator} from '@playwright/test';
+import {expect, test} from '@playwright/test';
+
+import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options';
+
+const {describe, beforeEach} = test;
+
+describe('InputPhoneInternational | With [tuiDropdownMobile]', () => {
+    let example: Locator;
+    let inputPhoneInternational: TuiInputPhoneInternationalPO;
+
+    test.use(TUI_PLAYWRIGHT_MOBILE);
+
+    beforeEach(async ({page}) => {
+        await tuiGoto(page, DemoRoute.InputPhoneInternational);
+
+        example = new TuiDocumentationPagePO(page).getExample('#mobile-dropdown');
+        inputPhoneInternational = new TuiInputPhoneInternationalPO(
+            example.locator('tui-textfield:has([tuiInputPhoneInternational])'),
+        );
+    });
+
+    test('opens mobile dropdown on select click', async ({page}) => {
+        await inputPhoneInternational.select.click();
+
+        await expect(page).toHaveScreenshot(
+            'input-phone-international-with-mobile-dropdown.png',
+        );
+    });
+
+    test('textfield inside dropdown is focused on dropdown open', async () => {
+        await inputPhoneInternational.select.click();
+
+        await expect(
+            inputPhoneInternational.dropdown.locator('tui-textfield input'),
+        ).toBeFocused();
+    });
+
+    test('items is filtered by textfield inside dropdown', async () => {
+        await inputPhoneInternational.select.click();
+        await inputPhoneInternational.dropdown
+            .locator('tui-textfield input')
+            .fill('aust');
+
+        const options = await inputPhoneInternational.getOptions();
+
+        expect(options).toHaveLength(2);
+        await expect(options[0]!).toContainText('Australia');
+        await expect(options[1]!).toContainText('Austria');
+    });
+});

projects/demo-playwright/tests/legacy/input-date-range/input-date-range.pw.spec.ts

@@ -2,11 +2,7 @@ import {DemoRoute} from '@demo/routes';
 import type {Locator} from '@playwright/test';
 import {expect, test} from '@playwright/test';
 
-import {
-    TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
-    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
-    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
-} from '../../../playwright.options';
+import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options';
 import {
     CHAR_NO_BREAK_SPACE,
     TuiCalendarPO,
@@ -235,13 +231,7 @@ test.describe('InputDateRange', () => {
         });
 
         test.describe('Mobile emulation', () => {
-            test.use({
-                viewport: {
-                    width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
-                    height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
-                },
-                userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
-            });
+            test.use(TUI_PLAYWRIGHT_MOBILE);
 
             let mobileCalendar!: TuiMobileCalendarPO;
 

projects/demo-playwright/tests/legacy/select/select.mobile.pw.spec.ts

@@ -2,20 +2,10 @@ import {DemoRoute} from '@demo/routes';
 import {tuiGoto} from '@demo-playwright/utils';
 import {expect, test} from '@playwright/test';
 
-import {
-    TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
-    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
-    TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
-} from '../../../playwright.options';
+import {TUI_PLAYWRIGHT_MOBILE} from '../../../playwright.options';
 
 test.describe('Select', () => {
-    test.use({
-        viewport: {
-            width: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_WIDTH,
-            height: TUI_PLAYWRIGHT_MOBILE_VIEWPORT_HEIGHT,
-        },
-        userAgent: TUI_PLAYWRIGHT_MOBILE_USER_AGENT,
-    });
+    test.use(TUI_PLAYWRIGHT_MOBILE);
 
     test('native select value', async ({page}) => {
         await tuiGoto(page, DemoRoute.Select);

projects/demo-playwright/utils/page-objects/textfield-with-data-list.po.ts

@@ -3,7 +3,9 @@
 
 export class TuiTextfieldWithDataListPO {
     public readonly textfield: Locator = this.host.getByRole('textbox');
-    public readonly dropdown = this.host.page().locator('tui-dropdown');
+    public readonly dropdown = this.host
+        .page()
+        .locator('tui-dropdown,tui-dropdown-mobile');
 
     constructor(protected readonly host: Locator) {}
 
@@ -23,7 +25,7 @@
 
     public async scrollDropdown(x: number, y: number): Promise<void>;
     public async scrollDropdown(options?: ScrollToOptions): Promise<void>;
     public async scrollDropdown(...args: any[]): Promise<void> {
         await this.dropdown
             .locator('tui-scrollbar')
             .evaluate((el, args) => el.scrollTo(...args), args);

projects/demo/src/modules/components/sheet-dialog/examples/6/index.less

@@ -26,6 +26,7 @@
     margin: 0 -1rem;
     white-space: nowrap;
     overflow: hidden;
+    border-radius: 0;
 }
 
 .button {