From 8fd33299f8c73f46e92085be1fa00861be0574b0 Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Wed, 2 Oct 2024 13:36:55 +0400
Subject: [PATCH 1/4] feat(kit): `ActionBar` add `s` size and update according
 to spec

---
 projects/demo/src/modules/app/pages.ts        |  4 +-
 .../action-bar/examples/1/index.html          | 69 ++++++++++++++++---
 .../action-bar/examples/1/index.less          |  5 --
 .../components/action-bar/examples/1/index.ts | 11 ++-
 .../action-bar/examples/2/index.html          | 18 ++++-
 .../action-bar/examples/2/index.less          |  5 --
 .../components/action-bar/examples/2/index.ts | 16 +++--
 .../modules/components/action-bar/index.html  | 22 ++----
 .../modules/components/action-bar/index.ts    |  4 +-
 .../action-bar/action-bar.component.ts        | 19 ++++-
 .../action-bar/action-bar.style.less          | 51 +++++++++++---
 .../items-with-more.style.less                |  2 +
 12 files changed, 167 insertions(+), 59 deletions(-)
 delete mode 100644 projects/demo/src/modules/components/action-bar/examples/1/index.less
 delete mode 100644 projects/demo/src/modules/components/action-bar/examples/2/index.less

diff --git a/projects/demo/src/modules/app/pages.ts b/projects/demo/src/modules/app/pages.ts
index 392e0fedbe92..b64ba7687a5b 100644
--- a/projects/demo/src/modules/app/pages.ts
+++ b/projects/demo/src/modules/app/pages.ts
@@ -891,7 +891,7 @@ export const pages: TuiDocRoutePages = [
     {
         section: 'Navigation',
         title: 'Segmented',
-        keywords: 'tabs, control, radio, navigation, навигация, beaver, вкладки, таб',
+        keywords: 'tabs, control, radio, navigation, навигация, вкладки, таб',
         route: DemoRoute.Segmented,
     },
     {
@@ -934,7 +934,7 @@ export const pages: TuiDocRoutePages = [
     {
         section: 'Layout',
         title: 'Navigation',
-        keywords: 'шапка, header, sidebar, aside, сайдбар, навигация',
+        keywords: 'шапка, header, sidebar, aside, сайдбар, навигация, beaver',
         route: DemoRoute.Navigation,
     },
     {
diff --git a/projects/demo/src/modules/components/action-bar/examples/1/index.html b/projects/demo/src/modules/components/action-bar/examples/1/index.html
index db0ca43c37e5..82ed474b8552 100644
--- a/projects/demo/src/modules/components/action-bar/examples/1/index.html
+++ b/projects/demo/src/modules/components/action-bar/examples/1/index.html
@@ -68,28 +68,80 @@
                 </span>
             </button>
         </tui-opt-group>
+        <tui-opt-group>
+            <button
+                *tuiRepeatTimes="let index of 5"
+                role="menuitem"
+                tuiOption
+                type="button"
+            >
+                <span>
+                    <tui-icon
+                        icon="@tui.star"
+                        class="tui-space_right-3"
+                    />
+                    Action {{ index + 1 }}
+                </span>
+            </button>
+        </tui-opt-group>
     </tui-data-list>
 
     <div>
-        Selected: {{ selected }} of {{ items.length }}
-
+        <strong>Selected: {{ selected }} of {{ items.length }}</strong>
         <button
             *ngIf="!isMobile()"
-            appearance="icon"
             tuiLink
             type="button"
             class="tui-space_left-3"
-            [pseudo]="true"
             (click)="toggleSelect()"
         >
             {{ selected < items.length ? 'Select all' : 'Select none' }}
         </button>
     </div>
 
+    <tui-items-with-more>
+        <ng-container *tuiRepeatTimes="let index of 5">
+            <button
+                *tuiItem
+                iconStart="@tui.star"
+                tuiButton
+                type="button"
+            >
+                Action {{ index + 1 }}
+            </button>
+        </ng-container>
+        <ng-template
+            let-lastIndex
+            tuiMore
+        >
+            <button
+                iconStart="@tui.ellipsis"
+                tuiButton
+                tuiDropdownAlign="right"
+                tuiDropdownOpen
+                type="button"
+                [tuiDropdown]="dropdown"
+            >
+                More
+            </button>
+            <ng-template #dropdown>
+                <tui-data-list size="l">
+                    <ng-container *tuiRepeatTimes="let index of 5">
+                        <button
+                            *ngIf="index > lastIndex"
+                            tuiOption
+                            type="button"
+                        >
+                            Action {{ index + 1 }}
+                        </button>
+                    </ng-container>
+                </tui-data-list>
+            </ng-template>
+        </ng-template>
+    </tui-items-with-more>
+
     <button
-        appearance="glass"
         iconStart="@tui.send"
-        size="m"
         tuiButton
         type="button"
         [disabled]="expanded"
@@ -98,9 +150,7 @@
     </button>
     <button
         *ngIf="!isMobile()"
-        appearance="glass"
         iconStart="@tui.trash"
-        size="m"
         tuiButton
         type="button"
         [disabled]="expanded"
@@ -111,9 +161,7 @@
 
     <button
         *ngIf="isMobile()"
-        appearance="glass"
         iconStart="@tui.ellipsis"
-        size="m"
         tuiIconButton
         type="button"
         (click)="expanded = !expanded"
@@ -125,7 +173,6 @@
         *ngIf="!isMobile()"
         appearance="icon"
         iconStart="@tui.x"
-        size="m"
         tuiIconButton
         type="button"
         (click)="close()"
diff --git a/projects/demo/src/modules/components/action-bar/examples/1/index.less b/projects/demo/src/modules/components/action-bar/examples/1/index.less
deleted file mode 100644
index bd3ce6aabef8..000000000000
--- a/projects/demo/src/modules/components/action-bar/examples/1/index.less
+++ /dev/null
@@ -1,5 +0,0 @@
-:host {
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-}
diff --git a/projects/demo/src/modules/components/action-bar/examples/1/index.ts b/projects/demo/src/modules/components/action-bar/examples/1/index.ts
index 027ff63add94..50fb60ec7b9c 100644
--- a/projects/demo/src/modules/components/action-bar/examples/1/index.ts
+++ b/projects/demo/src/modules/components/action-bar/examples/1/index.ts
@@ -1,23 +1,26 @@
-import {NgIf} from '@angular/common';
+import {NgForOf, NgIf} from '@angular/common';
 import {Component, inject} from '@angular/core';
 import {toSignal} from '@angular/core/rxjs-interop';
 import {FormControl, ReactiveFormsModule} from '@angular/forms';
 import {changeDetection} from '@demo/emulate/change-detection';
 import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiRepeatTimes} from '@taiga-ui/cdk';
 import {
     TuiBreakpointService,
     TuiButton,
     TuiDataList,
+    TuiDropdown,
     TuiIcon,
     TuiLink,
 } from '@taiga-ui/core';
-import {TuiActionBar, TuiFilter} from '@taiga-ui/kit';
+import {TuiActionBar, TuiFilter, TuiItemsWithMore} from '@taiga-ui/kit';
 import {map} from 'rxjs';
 
 @Component({
     standalone: true,
     imports: [
         NgIf,
+        NgForOf,
         ReactiveFormsModule,
         TuiActionBar,
         TuiButton,
@@ -25,9 +28,11 @@ import {map} from 'rxjs';
         TuiFilter,
         TuiIcon,
         TuiLink,
+        TuiItemsWithMore,
+        TuiDropdown,
+        TuiRepeatTimes,
     ],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
     encapsulation,
     changeDetection,
 })
diff --git a/projects/demo/src/modules/components/action-bar/examples/2/index.html b/projects/demo/src/modules/components/action-bar/examples/2/index.html
index 2e9b0fdf9b58..fd2ccd81a34e 100644
--- a/projects/demo/src/modules/components/action-bar/examples/2/index.html
+++ b/projects/demo/src/modules/components/action-bar/examples/2/index.html
@@ -7,15 +7,27 @@
     Show TableBar
 </button>
 
-<tui-action-bar *tuiActionBar="open()">
-    <span>Table bar opened</span>
+<tui-action-bar
+    *tuiActionBar="open()"
+    size="s"
+>
+    <span [style.width.%]="isMobile() ? 100 : null">Table bar opened</span>
 
     <button
         appearance="glass"
-        size="m"
+        iconStart="@tui.trash"
         tuiButton
         type="button"
         (click)="open.set(false)"
+    >
+        Remove
+    </button>
+    <button
+        iconStart="@tui.x"
+        tuiIconButton
+        type="button"
+        [appearance]="isMobile() ? 'glass' : 'icon'"
+        (click)="open.set(false)"
     >
         Close
     </button>
diff --git a/projects/demo/src/modules/components/action-bar/examples/2/index.less b/projects/demo/src/modules/components/action-bar/examples/2/index.less
deleted file mode 100644
index f01b0f68fc8d..000000000000
--- a/projects/demo/src/modules/components/action-bar/examples/2/index.less
+++ /dev/null
@@ -1,5 +0,0 @@
-tui-action-bar {
-    left: 3rem;
-    right: 3rem;
-    background: var(--tui-chart-categorical-13);
-}
diff --git a/projects/demo/src/modules/components/action-bar/examples/2/index.ts b/projects/demo/src/modules/components/action-bar/examples/2/index.ts
index beaaa3548002..1ed0ec1f3f25 100644
--- a/projects/demo/src/modules/components/action-bar/examples/2/index.ts
+++ b/projects/demo/src/modules/components/action-bar/examples/2/index.ts
@@ -1,15 +1,23 @@
-import {Component, signal} from '@angular/core';
+import {NgIf} from '@angular/common';
+import {Component, inject, signal} from '@angular/core';
+import {toSignal} from '@angular/core/rxjs-interop';
 import {changeDetection} from '@demo/emulate/change-detection';
-import {TuiButton} from '@taiga-ui/core';
+import {encapsulation} from '@demo/emulate/encapsulation';
+import {TuiBreakpointService, TuiButton} from '@taiga-ui/core';
 import {TuiActionBar} from '@taiga-ui/kit';
+import {map} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [TuiActionBar, TuiButton],
+    imports: [TuiActionBar, TuiButton, NgIf],
     templateUrl: './index.html',
-    styleUrls: ['./index.less'],
+    encapsulation,
     changeDetection,
 })
 export default class Example {
     protected open = signal(false);
+
+    protected readonly isMobile = toSignal(
+        inject(TuiBreakpointService).pipe(map((size) => size === 'mobile')),
+    );
 }
diff --git a/projects/demo/src/modules/components/action-bar/index.html b/projects/demo/src/modules/components/action-bar/index.html
index 679d016ae2f4..b0bcf522593a 100644
--- a/projects/demo/src/modules/components/action-bar/index.html
+++ b/projects/demo/src/modules/components/action-bar/index.html
@@ -4,23 +4,15 @@
     type="components"
 >
     <ng-template pageTab>
-        <p>
-            It is an element on the bottom of screen to show actions by multiselect of some items. It works with custom
-            content.
-        </p>
+        It is an element on the bottom of screen to show actions by multiselect of some items. It works with custom
+        content.
 
         <tui-doc-example
-            id="base"
-            heading="Basic"
-            [component]="1 | tuiComponent"
-            [content]="1 | tuiExample"
-        />
-
-        <tui-doc-example
-            id="directive"
-            heading="Customization"
-            [component]="2 | tuiComponent"
-            [content]="2 | tuiExample"
+            *ngFor="let example of examples; let index = index"
+            [component]="index + 1 | tuiComponent"
+            [content]="index + 1 | tuiExample"
+            [heading]="example"
+            [id]="example | tuiKebab"
         />
     </ng-template>
 
diff --git a/projects/demo/src/modules/components/action-bar/index.ts b/projects/demo/src/modules/components/action-bar/index.ts
index d8d72f53e33b..2759645d6635 100644
--- a/projects/demo/src/modules/components/action-bar/index.ts
+++ b/projects/demo/src/modules/components/action-bar/index.ts
@@ -9,4 +9,6 @@ import {TuiDemo} from '@demo/utils';
     styleUrls: ['./index.less'],
     changeDetection,
 })
-export default class Page {}
+export default class Page {
+    protected readonly examples = ['Size M', 'Size S'];
+}
diff --git a/projects/kit/components/action-bar/action-bar.component.ts b/projects/kit/components/action-bar/action-bar.component.ts
index c6ab38738fc7..72e4cd8622f9 100644
--- a/projects/kit/components/action-bar/action-bar.component.ts
+++ b/projects/kit/components/action-bar/action-bar.component.ts
@@ -1,4 +1,11 @@
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
+import {tuiProvide} from '@taiga-ui/cdk';
+import {
+    TUI_BUTTON_OPTIONS,
+    type TuiButtonOptions,
+    tuiLinkOptionsProvider,
+    type TuiSizeS,
+} from '@taiga-ui/core';
 import {tuiFadeIn, tuiSlideInTop} from '@taiga-ui/core/animations';
 import {TuiExpandComponent} from '@taiga-ui/core/components/expand';
 import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';
@@ -11,16 +18,26 @@ import {tuiToAnimationOptions} from '@taiga-ui/core/utils/miscellaneous';
     templateUrl: './action-bar.template.html',
     styleUrls: ['./action-bar.style.less'],
     changeDetection: ChangeDetectionStrategy.OnPush,
+    providers: [
+        tuiProvide(TUI_BUTTON_OPTIONS, TuiActionBarComponent),
+        tuiLinkOptionsProvider({appearance: 'icon', pseudo: true}),
+    ],
     animations: [tuiFadeIn, tuiSlideInTop],
     host: {
         tuiTheme: 'dark',
+        '[attr.data-size]': 'size',
         '[@tuiFadeIn]': 'animation',
         '[@tuiSlideInTop]': 'animation',
     },
 })
-export class TuiActionBarComponent {
+export class TuiActionBarComponent implements TuiButtonOptions {
     protected readonly animation = tuiToAnimationOptions(inject(TUI_ANIMATIONS_SPEED));
 
     @Input()
     public expanded = false;
+
+    @Input()
+    public size: TuiSizeS = 'm';
+
+    public readonly appearance = 'glass';
 }
diff --git a/projects/kit/components/action-bar/action-bar.style.less b/projects/kit/components/action-bar/action-bar.style.less
index 10a7bb4ae76e..924c6a459086 100644
--- a/projects/kit/components/action-bar/action-bar.style.less
+++ b/projects/kit/components/action-bar/action-bar.style.less
@@ -2,37 +2,70 @@
 
 :host {
     position: fixed;
-    left: 1rem;
-    right: 1rem;
+    left: ~'max(calc(50% - 37rem), 1.5rem)';
     bottom: 1rem;
     display: flex;
+    inline-size: 100%;
+    max-inline-size: ~'min(calc(100vw - 3rem), 74rem)';
     box-sizing: border-box;
-    min-block-size: 4rem;
-    border-radius: var(--tui-radius-xl);
+    border-radius: 1rem;
     background: var(--tui-service-backdrop);
     color: var(--tui-text-primary);
     backdrop-filter: blur(2rem);
     flex-direction: column;
     justify-content: center;
-    padding: 0.625rem;
+    padding: 0.75rem;
+    text-indent: 0.75rem;
+    font: var(--tui-font-text-m);
+    white-space: nowrap;
+
+    &[data-size='s'] {
+        border-radius: var(--tui-radius-l);
+        font: var(--tui-font-text-s);
+        padding: 0.5rem;
+    }
+
+    :host-context(tui-root._mobile) & {
+        padding: 1rem;
+        border-radius: 1.25rem;
+        text-indent: 0;
+    }
 
     ::ng-deep tui-data-list[data-size] {
-        padding: 0.25rem 0 0.5rem;
+        padding: 0;
+        margin: -0.625rem -0.625rem 1rem;
+    }
+
+    ::ng-deep tui-items-with-more {
+        text-indent: 0.5rem;
+
+        :host-context(tui-root._mobile) & {
+            display: none;
+        }
     }
 }
 
 .t-content {
     display: flex;
-    justify-content: space-between;
     align-items: center;
-    padding-left: 0.625rem;
+    gap: 0.7rem 2.5rem;
+
+    :host-context(tui-root._mobile) & {
+        flex-wrap: wrap;
+    }
 }
 
 .t-actions {
     display: flex;
+    justify-content: flex-end;
     gap: 0.5rem;
+    margin-inline-start: auto;
 
     :host-context(tui-root._mobile) & {
-        gap: 0.375rem;
+        flex: 1;
+
+        ::ng-deep [tuiButton] {
+            flex: 1;
+        }
     }
 }
diff --git a/projects/kit/components/items-with-more/items-with-more.style.less b/projects/kit/components/items-with-more/items-with-more.style.less
index 2df16972d7cd..5a684c894629 100644
--- a/projects/kit/components/items-with-more/items-with-more.style.less
+++ b/projects/kit/components/items-with-more/items-with-more.style.less
@@ -1,6 +1,8 @@
 :host {
     position: relative;
     display: flex;
+    min-inline-size: 0;
+    flex: 1;
     align-items: center;
     white-space: nowrap;
 }

From 28b7f97d8b65c4100243ace9116c67d9d94317d1 Mon Sep 17 00:00:00 2001
From: taiga-family-bot <taiga-family-bot@users.noreply.github.com>
Date: Wed, 2 Oct 2024 09:47:05 +0000
Subject: [PATCH 2/4] chore: apply changes after linting [bot]

---
 .../components/action-bar/examples/1/index.ts        |  6 +++---
 .../components/action-bar/examples/2/index.ts        |  2 +-
 .../components/action-bar/action-bar.component.ts    | 12 +++++-------
 3 files changed, 9 insertions(+), 11 deletions(-)

diff --git a/projects/demo/src/modules/components/action-bar/examples/1/index.ts b/projects/demo/src/modules/components/action-bar/examples/1/index.ts
index 50fb60ec7b9c..98915c55707f 100644
--- a/projects/demo/src/modules/components/action-bar/examples/1/index.ts
+++ b/projects/demo/src/modules/components/action-bar/examples/1/index.ts
@@ -19,17 +19,17 @@ import {map} from 'rxjs';
 @Component({
     standalone: true,
     imports: [
-        NgIf,
         NgForOf,
+        NgIf,
         ReactiveFormsModule,
         TuiActionBar,
         TuiButton,
         TuiDataList,
+        TuiDropdown,
         TuiFilter,
         TuiIcon,
-        TuiLink,
         TuiItemsWithMore,
-        TuiDropdown,
+        TuiLink,
         TuiRepeatTimes,
     ],
     templateUrl: './index.html',
diff --git a/projects/demo/src/modules/components/action-bar/examples/2/index.ts b/projects/demo/src/modules/components/action-bar/examples/2/index.ts
index 1ed0ec1f3f25..577ab632fc9b 100644
--- a/projects/demo/src/modules/components/action-bar/examples/2/index.ts
+++ b/projects/demo/src/modules/components/action-bar/examples/2/index.ts
@@ -9,7 +9,7 @@ import {map} from 'rxjs';
 
 @Component({
     standalone: true,
-    imports: [TuiActionBar, TuiButton, NgIf],
+    imports: [NgIf, TuiActionBar, TuiButton],
     templateUrl: './index.html',
     encapsulation,
     changeDetection,
diff --git a/projects/kit/components/action-bar/action-bar.component.ts b/projects/kit/components/action-bar/action-bar.component.ts
index 72e4cd8622f9..495f433128d6 100644
--- a/projects/kit/components/action-bar/action-bar.component.ts
+++ b/projects/kit/components/action-bar/action-bar.component.ts
@@ -1,14 +1,12 @@
 import {ChangeDetectionStrategy, Component, inject, Input} from '@angular/core';
-import {tuiProvide} from '@taiga-ui/cdk';
-import {
-    TUI_BUTTON_OPTIONS,
-    type TuiButtonOptions,
-    tuiLinkOptionsProvider,
-    type TuiSizeS,
-} from '@taiga-ui/core';
+import {tuiProvide} from '@taiga-ui/cdk/utils/miscellaneous';
 import {tuiFadeIn, tuiSlideInTop} from '@taiga-ui/core/animations';
+import type {TuiButtonOptions} from '@taiga-ui/core/components/button';
+import {TUI_BUTTON_OPTIONS} from '@taiga-ui/core/components/button';
 import {TuiExpandComponent} from '@taiga-ui/core/components/expand';
+import {tuiLinkOptionsProvider} from '@taiga-ui/core/components/link';
 import {TUI_ANIMATIONS_SPEED} from '@taiga-ui/core/tokens';
+import type {TuiSizeS} from '@taiga-ui/core/types';
 import {tuiToAnimationOptions} from '@taiga-ui/core/utils/miscellaneous';
 
 @Component({

From 3d61de3fbe14f0fbcb230373992eb930b97b97c2 Mon Sep 17 00:00:00 2001
From: taiga-family-bot <taiga-family-bot@users.noreply.github.com>
Date: Wed, 2 Oct 2024 09:50:57 +0000
Subject: [PATCH 3/4] chore: icons have changed [bot]

---
 projects/demo/used-icons.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/projects/demo/used-icons.ts b/projects/demo/used-icons.ts
index c53ea95328d4..d6b3fd11ed1c 100644
--- a/projects/demo/used-icons.ts
+++ b/projects/demo/used-icons.ts
@@ -19,13 +19,13 @@ export const TUI_USED_ICONS = [
     '@tui.trash',
     '@tui.layout-grid',
     '@tui.x',
+    '@tui.star',
     '@tui.check',
     '@tui.user',
     '@tui.chevron-left',
     '@tui.mastercard',
     '@tui.box',
     '@tui.lock',
-    '@tui.star',
     '@tui.gift',
     '@tui.arrow-right',
     '@tui.users',

From a3721069dbb3faeffae1fa06b93498128037a02d Mon Sep 17 00:00:00 2001
From: waterplea <alexander@inkin.ru>
Date: Wed, 2 Oct 2024 14:08:38 +0400
Subject: [PATCH 4/4] chore: fix

---
 .../tests/kit/action-bar/action-bar.mobile.spec.ts  |  2 +-
 .../tests/kit/action-bar/action-bar.spec.ts         |  2 +-
 .../components/action-bar/examples/1/index.html     | 13 ++++++++++---
 3 files changed, 12 insertions(+), 5 deletions(-)

diff --git a/projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.spec.ts b/projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.spec.ts
index 0ec8abe194b8..7831652bfe51 100644
--- a/projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.spec.ts
+++ b/projects/demo-playwright/tests/kit/action-bar/action-bar.mobile.spec.ts
@@ -19,7 +19,7 @@ test.describe('ActionBar', () => {
 
     test('works', async ({page}) => {
         await tuiGoto(page, DemoRoute.ActionBar);
-        const example = page.locator('#base');
+        const example = page.locator('#size--m');
         const showActionBarButton = example.locator('label').first();
 
         await showActionBarButton.click();
diff --git a/projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts b/projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts
index 6dc5fec8bf28..c4b7bfc2e941 100644
--- a/projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts
+++ b/projects/demo-playwright/tests/kit/action-bar/action-bar.spec.ts
@@ -9,7 +9,7 @@ test.describe('ActionBar', () => {
 
     test('works', async ({page}) => {
         await tuiGoto(page, DemoRoute.ActionBar);
-        const example = page.locator('#base');
+        const example = page.locator('#size--m');
         const showActionBarButton = example.locator('label').first();
 
         await showActionBarButton.click();
diff --git a/projects/demo/src/modules/components/action-bar/examples/1/index.html b/projects/demo/src/modules/components/action-bar/examples/1/index.html
index 82ed474b8552..b24835ad8aa4 100644
--- a/projects/demo/src/modules/components/action-bar/examples/1/index.html
+++ b/projects/demo/src/modules/components/action-bar/examples/1/index.html
@@ -141,24 +141,31 @@
     </tui-items-with-more>
 
     <button
+        *ngIf="!isMobile()"
         iconStart="@tui.send"
         tuiButton
         type="button"
-        [disabled]="expanded"
     >
-        {{ isMobile() ? '' : 'Send' }}
+        Send
     </button>
     <button
         *ngIf="!isMobile()"
         iconStart="@tui.trash"
         tuiButton
         type="button"
-        [disabled]="expanded"
         (click)="close()"
     >
         Delete
     </button>
 
+    <button
+        *ngIf="isMobile()"
+        iconStart="@tui.send"
+        tuiIconButton
+        type="button"
+    >
+        Send
+    </button>
     <button
         *ngIf="isMobile()"
         iconStart="@tui.ellipsis"