From b2edbadf054fc1f52ca118c983baa0da2f798b2a Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 11 Jul 2023 13:27:49 +0300
Subject: [PATCH] TSK-336: mobile UI adaptation (#3492)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/ReferenceInput.svelte      |  10 +-
 .../src/components/StyledTextEditor.svelte    |  15 +--
 packages/theme/styles/_layouts.scss           |   2 +-
 packages/theme/styles/button.scss             |   9 +-
 packages/ui/src/components/Button.svelte      |  19 ++-
 .../src/components/DropdownLabelsIntl.svelte  |   5 +-
 .../components/DropdownLabelsPopupIntl.svelte |   2 +-
 .../ui/src/components/ModeSelector.svelte     |   1 +
 packages/ui/src/components/Panel.svelte       |  16 ++-
 packages/ui/src/components/TabList.svelte     | 111 +++++++++++-------
 .../ui/src/components/internal/Root.svelte    |   3 +-
 packages/ui/src/types.ts                      |   3 +
 packages/ui/src/utils.ts                      |  10 +-
 .../src/components/AssignedTasks.svelte       |   2 +-
 .../components/issues/edit/EditIssue.svelte   |   8 +-
 .../src/components/ViewOptionsButton.svelte   |   1 +
 .../components/ViewletSettingButton.svelte    |   1 +
 .../src/components/list/ListItem.svelte       |  38 ++++--
 18 files changed, 167 insertions(+), 89 deletions(-)

diff --git a/packages/text-editor/src/components/ReferenceInput.svelte b/packages/text-editor/src/components/ReferenceInput.svelte
index c745bfefb6..dfacb1d929 100644
--- a/packages/text-editor/src/components/ReferenceInput.svelte
+++ b/packages/text-editor/src/components/ReferenceInput.svelte
@@ -25,7 +25,9 @@
     handler,
     registerFocus,
     showPopup,
-    tooltip
+    tooltip,
+    deviceOptionsStore as deviceInfo,
+    checkAdaptiveMatching
   } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import { Completion } from '../Completion'
@@ -73,6 +75,8 @@
   let isEmpty = true
 
   $: setContent(content)
+  $: devSize = $deviceInfo.size
+  $: shrinkButtons = checkAdaptiveMatching(devSize, 'sm')
 
   function setContent (content: string) {
     textEditor?.setContent(content)
@@ -379,7 +383,7 @@
     {/if}
   </div>
   <div class="flex-between clear-mins" style:margin={'.75rem .75rem 0'}>
-    <div class="buttons-group large-gap">
+    <div class="buttons-group {shrinkButtons ? 'medium-gap' : 'large-gap'}">
       {#each actions as a}
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <div
@@ -395,7 +399,7 @@
       {/each}
     </div>
     {#if extraActions && extraActions.length > 0}
-      <div class="buttons-group large-gap">
+      <div class="buttons-group {shrinkButtons ? 'medium-gap' : 'large-gap'}">
         {#each extraActions as a}
           <!-- svelte-ignore a11y-click-events-have-key-events -->
           <div
diff --git a/packages/text-editor/src/components/StyledTextEditor.svelte b/packages/text-editor/src/components/StyledTextEditor.svelte
index 4cb12c1db2..cb970e447d 100644
--- a/packages/text-editor/src/components/StyledTextEditor.svelte
+++ b/packages/text-editor/src/components/StyledTextEditor.svelte
@@ -23,7 +23,9 @@
     IconSize,
     Scroller,
     SelectPopup,
-    showPopup
+    showPopup,
+    deviceOptionsStore as deviceInfo,
+    checkAdaptiveMatching
   } from '@hcengineering/ui'
   import { Level } from '@tiptap/extension-heading'
   import { createEventDispatcher } from 'svelte'
@@ -445,14 +447,9 @@
       }
     )
   }
-  $: buttonsGap =
-    buttonSize === 'large' || buttonSize === 'x-large' || buttonSize === 'full'
-      ? 'large-gap'
-      : buttonSize === 'medium'
-        ? 'medium-gap'
-        : buttonSize === 'small'
-          ? 'small-gap'
-          : 'xsmall-gap'
+
+  $: devSize = $deviceInfo.size
+  $: buttonsGap = checkAdaptiveMatching(devSize, 'sm') ? 'small-gap' : 'large-gap'
   $: buttonsHeight =
     buttonSize === 'large' || buttonSize === 'x-large' || buttonSize === 'full'
       ? 'h-6 max-h-6'
diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss
index 6bb9e656cb..b14d703e69 100644
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@@ -263,7 +263,7 @@ input.search {
 }
 .justify-between { justify-content: space-between; }
 .justify-start { justify-content: flex-start; }
-.justify-end { justify-content: flex-end; }
+.justify-end { justify-content: flex-end !important; }
 .justify-center { justify-content: center; }
 .justify-stretch { justify-content: stretch; }
 .items-baseline { align-items: baseline; }
diff --git a/packages/theme/styles/button.scss b/packages/theme/styles/button.scss
index 88e5ad8120..f7dbe1e261 100644
--- a/packages/theme/styles/button.scss
+++ b/packages/theme/styles/button.scss
@@ -41,8 +41,8 @@
     &.only-icon { width: 2.75rem; }
   }
 
-  &.iconL:not(.iconR) { padding: 0 1rem 0 .75rem; }
-  &.iconR:not(.iconL) { padding: 0 .75rem 0 1rem; }
+  &.iconL:not(.iconR, .only-icon) { padding: 0 1rem 0 .75rem; }
+  &.iconR:not(.iconL, .only-icon) { padding: 0 .75rem 0 1rem; }
   .btn-icon {
     color: var(--theme-content-color);
     transition: color .15s;
@@ -88,7 +88,10 @@
   &.bs-dashed { border-style: dashed; }
   &.jf-left { justify-content: flex-start; }
   &.jf-center { justify-content: center; }
-  &.only-icon { padding: 0; }
+  &.only-icon {
+    flex-shrink: 0 !important;
+    padding: 0;
+  }
 
   &.regular {
     background-color: var(--theme-button-default);
diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte
index e38ca680d2..db79707560 100644
--- a/packages/ui/src/components/Button.svelte
+++ b/packages/ui/src/components/Button.svelte
@@ -17,7 +17,16 @@
   import { onMount, ComponentType } from 'svelte'
   import { registerFocus } from '../focus'
   import { tooltip } from '../tooltips'
-  import type { AnySvelteComponent, ButtonKind, ButtonShape, ButtonSize, LabelAndProps, IconProps } from '../types'
+  import type {
+    AnySvelteComponent,
+    ButtonKind,
+    ButtonShape,
+    ButtonSize,
+    LabelAndProps,
+    IconProps,
+    WidthType
+  } from '../types'
+  import { checkAdaptiveMatching, deviceOptionsStore as deviceInfo } from '..'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
   import Spinner from './Spinner.svelte'
@@ -51,6 +60,7 @@
   export let shrink: number = 0
   export let accent: boolean = false
   export let noFocus: boolean = false
+  export let adaptiveShrink: WidthType | null = null
 
   $: iconSize =
     iconProps && iconProps.size !== undefined ? iconProps.size : size && size === 'inline' ? 'inline' : 'small'
@@ -62,6 +72,9 @@
     (icon !== undefined || iconRight !== undefined || $$slots.icon || $$slots.iconRight)
   $: primary = ['accented', 'brand', 'positive', 'negative'].some((p) => p === kind)
 
+  $: devSize = $deviceInfo.size
+  $: adaptive = adaptiveShrink !== null ? checkAdaptiveMatching(devSize, adaptiveShrink) : false
+
   onMount(() => {
     if (focus && input) {
       input.focus()
@@ -102,7 +115,7 @@
   use:tooltip={showTooltip}
   bind:this={input}
   class="antiButton {kind} {size} jf-{justify} sh-{shape ?? 'no-shape'} bs-{borderStyle}"
-  class:only-icon={iconOnly}
+  class:only-icon={iconOnly || adaptive}
   class:no-focus={noFocus}
   class:accent
   class:highlight
@@ -138,7 +151,7 @@
       <Spinner size={iconSize === 'inline' ? 'inline' : 'small'} />
     </div>
   {/if}
-  {#if label}
+  {#if label && !adaptive}
     <span class="overflow-label label disabled pointer-events-none" class:ml-2={loading}>
       <Label {label} params={labelParams} />
     </span>
diff --git a/packages/ui/src/components/DropdownLabelsIntl.svelte b/packages/ui/src/components/DropdownLabelsIntl.svelte
index 24a6b7ff40..3165488310 100644
--- a/packages/ui/src/components/DropdownLabelsIntl.svelte
+++ b/packages/ui/src/components/DropdownLabelsIntl.svelte
@@ -27,10 +27,11 @@
 
   export let icon: Asset | AnySvelteComponent | undefined = undefined
   export let label: IntlString = ui.string.DropdownDefaultLabel
+  export let params: Record<string, any> = {}
   export let items: DropdownIntlItem[]
   export let selected: DropdownIntlItem['id'] | undefined = undefined
   export let disabled: boolean = false
-  export let kind: ButtonKind = 'no-border'
+  export let kind: ButtonKind = 'regular'
   export let size: ButtonSize = 'small'
   export let justify: 'left' | 'center' = 'center'
   export let width: string | undefined = undefined
@@ -86,7 +87,7 @@
     on:click={openPopup}
   >
     <span slot="content" class="overflow-label disabled flex-grow text-left mr-2">
-      <Label label={selectedItem ? selectedItem.label : label} />
+      <Label label={selectedItem ? selectedItem.label : label} {params} />
     </span>
     <svelte:fragment slot="iconRight">
       <DropdownIcon size={'small'} fill={'var(--theme-dark-color)'} />
diff --git a/packages/ui/src/components/DropdownLabelsPopupIntl.svelte b/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
index 84d69f0257..7fa57832bf 100644
--- a/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
+++ b/packages/ui/src/components/DropdownLabelsPopupIntl.svelte
@@ -50,7 +50,7 @@
             dispatch('close', item.id)
           }}
         >
-          <div class="flex-grow caption-color nowrap"><Label label={item.label} /></div>
+          <div class="flex-grow caption-color nowrap"><Label label={item.label} params={item.params} /></div>
           <div class="check">
             {#if item.id === selected}<IconCheck size={'small'} />{/if}
           </div>
diff --git a/packages/ui/src/components/ModeSelector.svelte b/packages/ui/src/components/ModeSelector.svelte
index bcf10dc4cf..5ef71abdfe 100644
--- a/packages/ui/src/components/ModeSelector.svelte
+++ b/packages/ui/src/components/ModeSelector.svelte
@@ -19,6 +19,7 @@
     items={modeList}
     selected={props.mode}
     kind={'separated'}
+    adaptiveShrink={'sm'}
     on:select={(result) => {
       if (result.detail !== undefined && result.detail.action) result.detail.action()
     }}
diff --git a/packages/ui/src/components/Panel.svelte b/packages/ui/src/components/Panel.svelte
index 166ad3c033..1bf3393cba 100644
--- a/packages/ui/src/components/Panel.svelte
+++ b/packages/ui/src/components/Panel.svelte
@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { afterUpdate, createEventDispatcher, onMount } from 'svelte'
-  import { deviceOptionsStore as deviceInfo } from '../../'
+  import { deviceOptionsStore as deviceInfo, checkAdaptiveMatching } from '../../'
   import { resizeObserver } from '../resize'
   import Button from './Button.svelte'
   import Scroller from './Scroller.svelte'
@@ -41,7 +41,10 @@
   let asideFloat: boolean = false
   let asideShown: boolean = true
   let fullSize: boolean = false
-  $: twoRows = $deviceInfo.minWidth
+
+  $: devSize = $deviceInfo.size
+  $: twoRows = checkAdaptiveMatching(devSize, 'xs')
+  $: moveUtils = checkAdaptiveMatching(devSize, 'sm')
 
   let oldWidth = ''
   let hideTimer: number | undefined
@@ -109,7 +112,9 @@
         {#if !twoRows && !withoutTitle}<slot name="title" />{/if}
       </div>
       <div class="buttons-group xsmall-gap">
-        <slot name="utils" />
+        {#if !moveUtils}
+          <slot name="utils" />
+        {/if}
         {#if isFullSize || useMaxWidth !== undefined || ($$slots.aside && isAside)}
           <div class="buttons-divider" />
         {/if}
@@ -193,6 +198,11 @@
     {/if}
     {#if $$slots.aside && isAside && asideShown}
       <div class="popupPanel-body__aside" class:float={asideFloat} class:shown={asideShown}>
+        {#if moveUtils}
+          <div class="buttons-group justify-end xsmall-gap" style:margin={'.5rem 2rem 0'}>
+            <slot name="utils" />
+          </div>
+        {/if}
         <slot name="aside" />
       </div>
     {/if}
diff --git a/packages/ui/src/components/TabList.svelte b/packages/ui/src/components/TabList.svelte
index f830feb1b0..2841a7d919 100644
--- a/packages/ui/src/components/TabList.svelte
+++ b/packages/ui/src/components/TabList.svelte
@@ -15,9 +15,11 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import { tooltip } from '../tooltips'
-  import type { TabItem, IconSize } from '../types'
+  import type { TabItem, IconSize, WidthType, DropdownIntlItem } from '../types'
   import Icon from './Icon.svelte'
   import Label from './Label.svelte'
+  import DropdownLabelsIntl from './DropdownLabelsIntl.svelte'
+  import { checkAdaptiveMatching, deviceOptionsStore as deviceInfo } from '..'
 
   export let selected: string | string[] = ''
   export let multiselect: boolean = false
@@ -25,6 +27,7 @@
   export let kind: 'normal' | 'regular' | 'plain' | 'separated' | 'separated-free' = 'normal'
   export let onlyIcons: boolean = false
   export let size: 'small' | 'medium' = 'medium'
+  export let adaptiveShrink: WidthType | null = null
 
   const dispatch = createEventDispatcher()
 
@@ -41,52 +44,72 @@
 
   let iconSize: IconSize
   $: iconSize = onlyIcons ? (size === 'small' ? 'small' : 'medium') : size === 'small' ? 'x-small' : 'small'
+
+  $: devSize = $deviceInfo.size
+  $: adaptive = adaptiveShrink !== null ? checkAdaptiveMatching(devSize, adaptiveShrink) : false
+
+  let ddItems: DropdownIntlItem[]
+  $: ddItems = items.map((it) => ({ id: it.id, label: it.labelIntl, params: it.labelParams } as DropdownIntlItem))
 </script>
 
 {#if items.length > 0}
-  <div class="tablist-container {kind} {size}">
-    {#each items as item, i}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <div
-        bind:this={tabs[i]}
-        class={kind === 'normal' || kind === 'regular' ? 'button' : 'plain'}
-        class:separated={kind === 'separated' || kind === 'separated-free'}
-        class:free={kind === 'separated-free'}
-        class:onlyIcons
-        class:selected={getSelected(item.id, selected)}
-        data-view={item.tooltip}
-        data-id={`tab-${item.id}`}
-        use:tooltip={{ label: item.tooltip ?? undefined, element: tabs[i] ?? undefined }}
-        on:click={() => {
-          if (multiselect) {
-            if (Array.isArray(selected)) {
-              if (selected.includes(item.id)) selected = selected.filter((it) => it !== item.id)
-              else selected.push(item.id)
-            }
-          } else selected = item.id
-          dispatch('select', item)
-          items = items
-        }}
-      >
-        {#if item.icon}
-          <div class="icon">
-            <Icon icon={item.icon} size={iconSize} fill={item.color ?? 'currentColor'} />
-          </div>
-        {:else if item.color}
-          <div class="color" style:background-color={item.color} />
-        {/if}
-        {#if item.label || item.labelIntl}
-          <span class="overflow-label" class:ml-1-5={item.icon || item.color}>
-            {#if item.label}
-              {item.label}
-            {:else if item.labelIntl}
-              <Label label={item.labelIntl} params={item.labelParams} />
-            {/if}
-          </span>
-        {/if}
-      </div>
-    {/each}
-  </div>
+  {#if adaptive}
+    <DropdownLabelsIntl
+      items={ddItems}
+      {size}
+      selected={Array.isArray(selected) ? selected[0] : selected}
+      on:selected={(e) => {
+        const item = items.filter((it) => it.id === e.detail)[0]
+        if (Array.isArray(selected)) selected[0] = item.id
+        else selected = item.id
+        dispatch('select', item)
+      }}
+    />
+  {:else}
+    <div class="tablist-container {kind} {size}">
+      {#each items as item, i}
+        <!-- svelte-ignore a11y-click-events-have-key-events -->
+        <div
+          bind:this={tabs[i]}
+          class={kind === 'normal' || kind === 'regular' ? 'button' : 'plain'}
+          class:separated={kind === 'separated' || kind === 'separated-free'}
+          class:free={kind === 'separated-free'}
+          class:onlyIcons
+          class:selected={getSelected(item.id, selected)}
+          data-view={item.tooltip}
+          data-id={`tab-${item.id}`}
+          use:tooltip={{ label: item.tooltip ?? undefined, element: tabs[i] ?? undefined }}
+          on:click={() => {
+            if (multiselect) {
+              if (Array.isArray(selected)) {
+                if (selected.includes(item.id)) selected = selected.filter((it) => it !== item.id)
+                else selected.push(item.id)
+              }
+            } else selected = item.id
+            dispatch('select', item)
+            items = items
+          }}
+        >
+          {#if item.icon}
+            <div class="icon">
+              <Icon icon={item.icon} size={iconSize} fill={item.color ?? 'currentColor'} />
+            </div>
+          {:else if item.color}
+            <div class="color" style:background-color={item.color} />
+          {/if}
+          {#if item.label || item.labelIntl}
+            <span class="overflow-label" class:ml-1-5={item.icon || item.color}>
+              {#if item.label}
+                {item.label}
+              {:else if item.labelIntl}
+                <Label label={item.labelIntl} params={item.labelParams} />
+              {/if}
+            </span>
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
 {/if}
 
 <style lang="scss">
diff --git a/packages/ui/src/components/internal/Root.svelte b/packages/ui/src/components/internal/Root.svelte
index 5255e9eb74..6c6d855223 100644
--- a/packages/ui/src/components/internal/Root.svelte
+++ b/packages/ui/src/components/internal/Root.svelte
@@ -2,6 +2,7 @@
   import platform, { addEventListener, getMetadata, OK, PlatformEvent, Status } from '@hcengineering/platform'
   import { onDestroy } from 'svelte'
   import type { AnyComponent, WidthType } from '../../types'
+  import { deviceSizes, deviceWidths } from '../../types'
   // import { applicationShortcutKey } from '../../utils'
   import { getCurrentLocation, location, navigate, locationStorageKeyId } from '../../location'
 
@@ -104,8 +105,6 @@
   let remove: any = null
   const sizes: Record<WidthType, boolean> = { xs: false, sm: false, md: false, lg: false, xl: false, xxl: false }
   const css: Record<WidthType, string> = { xs: '', sm: '', md: '', lg: '', xl: '', xxl: '' }
-  const deviceSizes: WidthType[] = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
-  const deviceWidths = [480, 680, 760, 1024, 1208, -1]
   deviceSizes.forEach((ds, i) => {
     if (i === 0) css[ds] = `(max-width: ${deviceWidths[i]}px)`
     else if (i === deviceSizes.length - 1) css[ds] = `(min-width: ${deviceWidths[i - 1]}.01px)`
diff --git a/packages/ui/src/types.ts b/packages/ui/src/types.ts
index ee8e4f6d2f..f64da1405e 100644
--- a/packages/ui/src/types.ts
+++ b/packages/ui/src/types.ts
@@ -266,6 +266,7 @@ export interface DropdownTextItem {
 export interface DropdownIntlItem {
   id: string | number
   label: IntlString
+  params?: Record<string, any>
 }
 
 export interface PopupOptions {
@@ -304,6 +305,8 @@ export const issueSP: FadeOptions = { multipler: { top: 2.75, bottom: 0 } }
 export const emojiSP: FadeOptions = { multipler: { top: 1.5, bottom: 0 } }
 
 export type WidthType = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl'
+export const deviceSizes: WidthType[] = ['xs', 'sm', 'md', 'lg', 'xl', 'xxl']
+export const deviceWidths = [480, 680, 760, 1024, 1208, -1]
 
 export interface DeviceOptions {
   docWidth: number
diff --git a/packages/ui/src/utils.ts b/packages/ui/src/utils.ts
index eb058641a0..5c8b997520 100644
--- a/packages/ui/src/utils.ts
+++ b/packages/ui/src/utils.ts
@@ -19,7 +19,7 @@ import { IntlString, setMetadata } from '@hcengineering/platform'
 import autolinker from 'autolinker'
 import { writable } from 'svelte/store'
 import { Notification, NotificationPosition, NotificationSeverity, notificationsStore } from '.'
-import { AnyComponent, AnySvelteComponent } from './types'
+import { AnyComponent, AnySvelteComponent, WidthType, deviceSizes } from './types'
 
 /**
  * @public
@@ -65,6 +65,14 @@ export function isSafari (): boolean {
   return navigator.userAgent.toLowerCase().includes('safari/')
 }
 
+/**
+ * @public
+ */
+export function checkAdaptiveMatching (size: WidthType | null, limit: WidthType): boolean {
+  const range = new Set(deviceSizes.slice(0, deviceSizes.findIndex((ds) => ds === limit) + 1))
+  return size !== null ? range.has(size) : false
+}
+
 export function floorFractionDigits (n: number | string, amount: number): number {
   return Number(Number(n).toFixed(amount))
 }
diff --git a/plugins/task-resources/src/components/AssignedTasks.svelte b/plugins/task-resources/src/components/AssignedTasks.svelte
index a6e1a9cbd2..82173a899f 100644
--- a/plugins/task-resources/src/components/AssignedTasks.svelte
+++ b/plugins/task-resources/src/components/AssignedTasks.svelte
@@ -163,7 +163,7 @@
 </script>
 
 <div
-  class="ac-header full divide"
+  class="ac-header full divide caption-height"
   class:header-with-mode-selector={modeSelectorProps !== undefined}
   class:header-without-label={!labelTasks}
 >
diff --git a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
index b29db12bdd..9fe3296130 100644
--- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte
@@ -155,6 +155,7 @@
     isAside={true}
     isSub={false}
     withoutActivity={false}
+    withoutTitle
     {embedded}
     bind:innerWidth
     on:open
@@ -252,15 +253,12 @@
       />
       <Button
         kind={'ghost'}
+        icon={IconMixin}
         selected={showAllMixins}
         on:click={() => {
           showAllMixins = !showAllMixins
         }}
-      >
-        <svelte:fragment slot="icon">
-          <IconMixin size={'small'} />
-        </svelte:fragment>
-      </Button>
+      />
     </svelte:fragment>
 
     <svelte:fragment slot="custom-attributes">
diff --git a/plugins/view-resources/src/components/ViewOptionsButton.svelte b/plugins/view-resources/src/components/ViewOptionsButton.svelte
index 4b48b591ba..296b16739b 100644
--- a/plugins/view-resources/src/components/ViewOptionsButton.svelte
+++ b/plugins/view-resources/src/components/ViewOptionsButton.svelte
@@ -56,6 +56,7 @@
     icon={view.icon.ViewButton}
     label={view.string.View}
     {kind}
+    adaptiveShrink={'sm'}
     showTooltip={{ label: view.string.CustomizeView, direction: 'bottom' }}
     bind:input={btn}
     on:click={clickHandler}
diff --git a/plugins/view-resources/src/components/ViewletSettingButton.svelte b/plugins/view-resources/src/components/ViewletSettingButton.svelte
index 7055064680..3d859af7a8 100644
--- a/plugins/view-resources/src/components/ViewletSettingButton.svelte
+++ b/plugins/view-resources/src/components/ViewletSettingButton.svelte
@@ -38,6 +38,7 @@
       label={view.string.Show}
       {kind}
       shrink={1}
+      adaptiveShrink={'sm'}
       showTooltip={{ label: view.string.CustomizeView, direction: 'bottom' }}
       bind:input={btn}
       on:click={clickHandler}
diff --git a/plugins/view-resources/src/components/list/ListItem.svelte b/plugins/view-resources/src/components/list/ListItem.svelte
index a1ea67f503..cff3028592 100644
--- a/plugins/view-resources/src/components/list/ListItem.svelte
+++ b/plugins/view-resources/src/components/list/ListItem.svelte
@@ -16,7 +16,7 @@
   import { AnyAttribute, Doc, getObjectValue } from '@hcengineering/core'
   import notification from '@hcengineering/notification'
   import { getClient, updateAttribute } from '@hcengineering/presentation'
-  import { CheckBox, Component, IconCircles, tooltip } from '@hcengineering/ui'
+  import { CheckBox, Component, IconCircles, tooltip, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
   import { AttributeModel } from '@hcengineering/view'
   import { createEventDispatcher, onMount } from 'svelte'
   import view from '../../plugin'
@@ -63,6 +63,8 @@
     return (value: any) => onChange(value, docObject, attribute.key, attr)
   }
 
+  $: mobile = $deviceInfo.isMobile
+
   onMount(() => {
     dispatch('on-mount')
   })
@@ -116,16 +118,18 @@
     {@const displayProps = attributeModel.displayProps}
     {#if !groupByKey || displayProps?.excludeByKey !== groupByKey}
       {#if displayProps?.grow}
-        {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
-          <ListPresenter
-            {docObject}
-            attributeModel={attrModel}
-            {props}
-            {compactMode}
-            value={getObjectValue(attrModel.key, docObject)}
-            onChange={getOnChange(docObject, attrModel)}
-          />
-        {/each}
+        {#if !(compactMode && mobile)}
+          {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
+            <ListPresenter
+              {docObject}
+              attributeModel={attrModel}
+              {props}
+              {compactMode}
+              value={getObjectValue(attrModel.key, docObject)}
+              onChange={getOnChange(docObject, attrModel)}
+            />
+          {/each}
+        {/if}
         <GrowPresenter />
         {#if !compactMode}
           <div class="compression-bar">
@@ -176,6 +180,18 @@
         <IconCircles />
       </div>
       <div class="scroll-box gap-2">
+        {#if mobile}
+          {#each model.filter((p) => p.displayProps?.suffix === true) as attrModel}
+            <ListPresenter
+              {docObject}
+              attributeModel={attrModel}
+              {props}
+              {compactMode}
+              value={getObjectValue(attrModel.key, docObject)}
+              onChange={getOnChange(docObject, attrModel)}
+            />
+          {/each}
+        {/if}
         <div class="compression-bar">
           {#each model.filter((m) => m.displayProps?.compression) as attributeModel, j}
             {@const displayProps = attributeModel.displayProps}