Update EstimationPopup layout (#2513)

2025-04-13 19:58:09 +00:00 · 2023-01-17 04:07:05 +03:00 · 2023-01-17 04:07:05 +03:00 · 835a37c6f0
commit 835a37c6f0
parent ecc3f55d23
20 changed files with 301 additions and 227 deletions
--- a/packages/theme/styles/_layouts.scss
+++ b/packages/theme/styles/_layouts.scss
@ -381,11 +381,6 @@ input.search {
 }

 /* Margins & Paddings */
-.step-lr25 + .step-lr25 { margin-left: .25rem; }
-.step-lr75 + .step-lr75 { margin-left: .75rem; }
-.step-tb75 + .step-tb75 { margin-top: .75rem; }
-.step-tb-6 + .step-tb-6 { margin-top: 1.5rem; }
-
 .ml-0-5 { margin-left: .125rem; }
 .ml-1 { margin-left: .25rem; }
 .ml-1-5 { margin-left: .375rem; }
@ -476,6 +471,28 @@ input.search {
 .p-6 { padding: 1.5rem; }
 .p-10 { padding: 2.5rem; }

+.p-text { padding: .125rem .25rem; }
+.p-text-2 { padding: .25rem .5rem; }
+
+.step-lr25 + .step-lr25 { margin-left: .25rem; }
+.step-lr75 + .step-lr75 { margin-left: .75rem; }
+.step-tb75 + .step-tb75 { margin-top: .75rem; }
+.step-tb-6 + .step-tb-6 { margin-top: 1.5rem; }
+
+.step-tb-2-accent + .step-tb-2-accent {
+  position: relative;
+  margin-top: .5rem;
+  &::before {
+    content: '';
+    position: absolute;
+    top: -.25rem;
+    left: 0;
+    width: 100%;
+    height: 1px;
+    background-color: var(--popup-bg-hover);
+  }
+}
+
 /* --------- */
 .no-word-wrap { word-wrap: none; }
 .relative { position: relative; }
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@ -275,6 +275,9 @@
  min-height: 1px;
  height: 1px;
  background-color: var(--divider-color);
+
+  &.dark { background-color: var(--body-accent); }
+  &.noMargin { margin: 0; }
 }

 .antiSection {
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@ -173,10 +173,10 @@
    .antiCard-pool {
      flex-direction: row;
      align-items: center;
-      margin: 0 .75rem .75rem;
+      margin: 0 .5rem .25rem;
      font-size: .75rem;

-      & > *:not(:last-child) { margin-right: .375rem; }
+      & > * { margin: 0 .25rem .5rem; }
    }
    .antiCard-footer {
      direction: ltr;
--- a/packages/ui/src/components/Chevron.svelte
+++ b/packages/ui/src/components/Chevron.svelte
@ -0,0 +1,85 @@
+<!--
+// Copyright © 2022 Hardcore Engineering Inc.
+//
+// Licensed under the Eclipse Public License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License. You may
+// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+//
+// See the License for the specific language governing permissions and
+// limitations under the License.
+-->
+<script lang="ts">
+  import IconDownOutline from './icons/DownOutline.svelte'
+
+  export let size: 'small' | 'medium' = 'medium'
+  export let fill = 'var(--dark-color)'
+  export let expanded: boolean = false
+  export let direction: 'left' | 'right' = 'right'
+  export let outline: boolean = false
+  export let marginRight: string | undefined = undefined
+  export let marginLeft: string | undefined = undefined
+  export let margin: string | undefined = undefined
+</script>
+
+<div
+  class="chevron {size} {direction}"
+  class:outline
+  class:expanded
+  style:margin-right={marginRight}
+  style:margin-left={marginLeft}
+  style:margin
+>
+  {#if outline}
+    <IconDownOutline {size} {fill} />
+  {:else}
+    <svg {fill} viewBox="0 0 6 6" xmlns="http://www.w3.org/2000/svg">
+      <path d="M0,0L6,3L0,6Z" />
+    </svg>
+  {/if}
+</div>
+
+<style lang="scss">
+  .chevron {
+    flex-shrink: 0;
+    transition: transform 0.15s var(--timing-main);
+
+    &.outline {
+      transform-origin: center;
+      &.right {
+        transform: rotate(-90deg);
+      }
+      &.left {
+        transform: rotate(90deg);
+      }
+      &.expanded {
+        transform: rotate(0deg);
+      }
+    }
+    &:not(.outline) {
+      transform-origin: 35% center;
+      transform: rotate(0deg);
+
+      &.small {
+        width: 0.325rem;
+        height: 0.325rem;
+      }
+      &.medium {
+        width: 0.375rem;
+        height: 0.375rem;
+      }
+      &.right {
+        transform: rotate(0deg);
+      }
+      &.left {
+        transform: rotate(180deg);
+      }
+      &.expanded {
+        transform: rotate(90deg);
+      }
+    }
+  }
+</style>
--- a/packages/ui/src/components/ExpandCollapse.svelte
+++ b/packages/ui/src/components/ExpandCollapse.svelte
@ -18,7 +18,7 @@
  import { tweened } from 'svelte/motion'

  export let isExpanded = false
-  export let duration = 200
+  export let duration = 150
  export let easing: (t: number) => number = quintOut

  const dispatch = createEventDispatcher()
--- a/packages/ui/src/components/Expandable.svelte
+++ b/packages/ui/src/components/Expandable.svelte
@ -17,51 +17,62 @@
  import ExpandCollapse from './ExpandCollapse.svelte'
  import Icon from './Icon.svelte'
  import Label from './Label.svelte'
+  import Chevron from './Chevron.svelte'

  export let icon: Asset | undefined = undefined
  export let label: IntlString | undefined = undefined
  export let expanded: boolean = false
+  export let bordered: boolean = false
  export let expandable = true
+  export let contentColor = false
 </script>

-<!-- svelte-ignore a11y-mouse-events-have-key-events -->
-<!-- svelte-ignore a11y-click-events-have-key-events -->
-<div class="flex-grow flex" class:expanded class:expandable>
-  <div
-    class="fs-title flex-row-center mr-4"
-    on:click|stopPropagation={() => {
-      expanded = !expanded
-    }}
-  >
-    <div class="chevron" class:expanded>▶</div>
-    <div class="an-element__icon">
+<div class="flex-col">
+  <div class="expandable-header flex-between" class:expanded class:bordered>
+    <!-- svelte-ignore a11y-click-events-have-key-events -->
+    <div
+      class="flex-row-center mr-4"
+      class:cursor-pointer={expandable}
+      on:click|stopPropagation={() => {
+        if (expandable) expanded = !expanded
+      }}
+    >
+      <Chevron {expanded} marginRight={'.5rem'} />
      {#if icon}
-        <Icon {icon} size={'small'} />
+        <div class="min-w-4 mr-2">
+          <Icon {icon} size={'small'} />
+        </div>
      {/if}
+      <span class="fs-title overflow-label" class:content-color={contentColor}>
+        {#if label}<Label {label} />{/if}<slot name="title" />
+      </span>
    </div>
-    <span class="an-element__label title">
-      {#if label}<Label {label} />{/if}
-      <slot name="title" />
-    </span>
+    {#if $$slots.tools}
+      <div class="buttons-group small-gap">
+        <slot name="tools" />
+      </div>
+    {/if}
  </div>
-  <slot name="tools" />
-</div>
-<ExpandCollapse isExpanded={expanded}>
-  <div class="antiComponent p-2">
+  <ExpandCollapse isExpanded={expanded}>
    <slot />
-  </div>
-</ExpandCollapse>
+  </ExpandCollapse>
+</div>

 <style lang="scss">
-  .expandable {
-    .chevron {
-      content: '▶';
-      margin-right: 0.5rem;
-      font-size: 0.75rem;
-      color: var(--dark-color);
-      &.expanded {
-        transform: rotateZ(90deg);
-      }
+  .expandable-header {
+    transition: margin-bottom 0.15s var(--timing-main);
+
+    &:not(.expanded) {
+      margin-bottom: 0;
+    }
+    &.expanded {
+      margin-bottom: 0.75rem;
+    }
+    &.bordered {
+      padding: 0.25rem 0.5rem;
+      background-color: var(--body-accent);
+      border: 1px solid var(--divider-color);
+      border-radius: 0.25rem;
    }
  }
 </style>
--- a/packages/ui/src/components/ListView.svelte
+++ b/packages/ui/src/components/ListView.svelte
@ -18,6 +18,7 @@

  export let selection: number = 0
  export let count: number
+  export let addClass: string | undefined = undefined

  const refs: HTMLElement[] = []

@ -66,8 +67,9 @@
  >
    {#each Array(count) as _, row}
      <slot name="category" item={row} />
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
      <div
-        class="list-item"
+        class="list-item{addClass ? ` ${addClass}` : ''}"
        class:selection={row === selection}
        on:mouseover={() => onRow(row)}
        on:focus={() => {}}
--- a/packages/ui/src/components/icons/DownOutline.svelte
+++ b/packages/ui/src/components/icons/DownOutline.svelte
@ -1,6 +1,6 @@
 <script lang="ts">
  export let size: 'x-small' | 'small' | 'medium' | 'large' | 'full'
-  const fill: string = 'currentColor'
+  export let fill: string = 'currentColor'
 </script>

 <svg class="svg-{size}" {fill} viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@ -99,6 +99,7 @@ export { default as ErrorPresenter } from './components/ErrorPresenter.svelte'
 export { default as Scroller } from './components/Scroller.svelte'
 export { default as ScrollerBar } from './components/ScrollerBar.svelte'
 export { default as TabList } from './components/TabList.svelte'
+export { default as Chevron } from './components/Chevron.svelte'

 export { default as IconAdd } from './components/icons/Add.svelte'
 export { default as IconBack } from './components/icons/Back.svelte'
--- a/plugins/bitrix-resources/src/components/EntityMapping.svelte
+++ b/plugins/bitrix-resources/src/components/EntityMapping.svelte
@ -75,9 +75,7 @@
 <div class="antiComponent max-w-240 flex-grow p-1">
  <Expandable icon={ofClass?.icon} label={getEmbeddedLabel(typeTitle?.label ?? '')}>
    <svelte:fragment slot="tools">
-      <div class="flex flex-reverse flex-grow">
-        <Button icon={IconDelete} on:click={() => client.remove(mapping)} size={'small'} />
-      </div>
+      <Button icon={IconDelete} on:click={() => client.remove(mapping)} size={'small'} />
    </svelte:fragment>
    <Expandable label={getEmbeddedLabel('Options')}>
      <div class="flex-col">
--- a/plugins/bitrix-resources/src/components/FieldMappingSynchronizer.svelte
+++ b/plugins/bitrix-resources/src/components/FieldMappingSynchronizer.svelte
@ -323,44 +323,43 @@

 <Expandable label={getEmbeddedLabel(mapping.type)}>
  <svelte:fragment slot="tools">
-    <div class="flex-row-center">
-      <SpaceSelect
-        _class={core.class.Space}
-        label={core.string.Space}
-        bind:value={space}
-        on:change={(evt) => {
-          space = evt.detail
+    <SpaceSelect
+      _class={core.class.Space}
+      label={core.string.Space}
+      bind:value={space}
+      on:change={(evt) => {
+        space = evt.detail
+      }}
+      autoSelect
+      spaceQuery={{ _id: { $in: [contact.space.Contacts] } }}
+    />
+    <DropdownLabels
+      label={getEmbeddedLabel('Direction')}
+      items={[
+        { id: 'ASC', label: 'Ascending' },
+        { id: 'DSC', label: 'Descending' }
+      ]}
+      bind:selected={direction}
+    />
+    <div class="fs-title">
+      <NumberEditor
+        kind={'button'}
+        value={limit}
+        focus={false}
+        placeholder={getEmbeddedLabel('Limit')}
+        onChange={(val) => {
+          if (val) {
+            limit = val
+          }
        }}
-        autoSelect
-        spaceQuery={{ _id: { $in: [contact.space.Contacts] } }}
      />
-      <DropdownLabels
-        label={getEmbeddedLabel('Direction')}
-        items={[
-          { id: 'ASC', label: 'Ascending' },
-          { id: 'DSC', label: 'Descending' }
-        ]}
-        bind:selected={direction}
-      />
-      <div class="fs-title flex-row-center">
-        <NumberEditor
-          kind={'button'}
-          value={limit}
-          focus={false}
-          placeholder={getEmbeddedLabel('Limit')}
-          onChange={(val) => {
-            if (val) {
-              limit = val
-            }
-          }}
-        />
-      </div>
-      <div class="ml-2 flex-row-center">
-        <div class="p-1">
-          {state}
-        </div>
-        <Button size={'large'} label={getEmbeddedLabel('Synchronize')} {loading} on:click={doSync} />
+    </div>
+    <div class="buttons-divider" />
+    <div class="flex-row-center">
+      <div class="p-1">
+        {state}
      </div>
+      <Button size={'large'} label={getEmbeddedLabel('Synchronize')} {loading} on:click={doSync} />
    </div>
  </svelte:fragment>
  <div class="flex-row flex-grow bottom-divider p-2">
--- a/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/SubIssues.svelte
@ -16,10 +16,8 @@
  import { Ref, SortingOrder, WithLookup } from '@hcengineering/core'
  import { createQuery, getClient } from '@hcengineering/presentation'
  import { calcRank, Issue, IssueStatus, Team } from '@hcengineering/tracker'
-  import { Button, Spinner, ExpandCollapse, closeTooltip, IconAdd } from '@hcengineering/ui'
+  import { Button, Spinner, ExpandCollapse, closeTooltip, IconAdd, Chevron, Label } from '@hcengineering/ui'
  import tracker from '../../../plugin'
-  import Collapsed from '../../icons/Collapsed.svelte'
-  import Expanded from '../../icons/Expanded.svelte'
  import CreateSubIssue from './CreateSubIssue.svelte'
  import SubIssueList from './SubIssueList.svelte'

@ -62,16 +60,18 @@
  {#if hasSubIssues}
    <Button
      width="min-content"
-      icon={isCollapsed ? Collapsed : Expanded}
      size="small"
      kind="transparent"
-      label={tracker.string.SubIssuesList}
-      labelParams={{ subIssues: issue.subIssues }}
      on:click={() => {
        isCollapsed = !isCollapsed
        isCreating = false
      }}
-    />
+    >
+      <svelte:fragment slot="content">
+        <Chevron size={'small'} expanded={!isCollapsed} outline fill={'var(--caption-color)'} marginRight={'.375rem'} />
+        <Label label={tracker.string.SubIssuesList} params={{ subIssues: issue.subIssues }} />
+      </svelte:fragment>
+    </Button>
  {/if}

  <Button
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationPopup.svelte
@ -120,9 +120,6 @@
    <IssuePresenter value={object} disableClick />
  </svelte:fragment>

-  <div class="header no-border flex-col p-1">
-    <div class="flex-row-center flex-between" />
-  </div>
  {#if currentTeam && issueStatuses}
    <SubIssuesEstimations
      issue={object}
@ -143,13 +140,17 @@
      icon={IconAdd}
      size={'small'}
      on:click={(event) => {
-        showPopup(TimeSpendReportPopup, {
-          issueId: object._id,
-          issueClass: object._class,
-          space: object.space,
-          assignee: object.assignee,
-          defaultTimeReportDay
-        })
+        showPopup(
+          TimeSpendReportPopup,
+          {
+            issueId: object._id,
+            issueClass: object._class,
+            space: object.space,
+            assignee: object.assignee,
+            defaultTimeReportDay
+          },
+          'top'
+        )
      }}
      label={tracker.string.TimeSpendReportAdd}
    />
--- a/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/EstimationSubIssueList.svelte
@ -17,7 +17,7 @@
  import { Doc, Ref } from '@hcengineering/core'
  import { UserBox } from '@hcengineering/presentation'
  import { Issue, Team } from '@hcengineering/tracker'
-  import { getEventPositionElement, ListView, showPopup } from '@hcengineering/ui'
+  import { getEventPositionElement, ListView, showPopup, deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
  import { ContextMenu, FixedColumn, ListSelectionProvider, SelectDirection } from '@hcengineering/view-resources'
  import { getIssueId } from '../../../issues'
  import tracker from '../../../plugin'
@ -28,18 +28,19 @@
  export let teams: Map<Ref<Team>, Team>

  function showContextMenu (ev: MouseEvent, object: Issue) {
-    showPopup(ContextMenu, { object }, getEventPositionElement(ev))
+    showPopup(ContextMenu, { object }, $deviceInfo.isMobile ? 'top' : getEventPositionElement(ev))
  }

  const listProvider = new ListSelectionProvider((offset: 1 | -1 | 0, of?: Doc, dir?: SelectDirection) => {})
+  $: twoRows = $deviceInfo.twoRows
 </script>

-<ListView count={issues.length}>
+<ListView count={issues.length} addClass={'step-tb-2-accent'}>
  <svelte:fragment slot="item" let:item>
    {@const issue = issues[item]}
    {@const currentTeam = teams.get(issue.space)}
    <div
-      class="flex-between row"
+      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
      on:contextmenu|preventDefault={(ev) => showContextMenu(ev, issue)}
      on:mouseover={() => {
        listProvider.updateFocus(issue)
@ -48,55 +49,32 @@
        listProvider.updateFocus(issue)
      }}
    >
-      <div class="flex-row-center clear-mins gap-2 p-2 flex-grow">
-        <span class="issuePresenter">
-          <FixedColumn key={'estimation_issue'} justify={'left'}>
-            {#if currentTeam}
-              {getIssueId(currentTeam, issue)}
-            {/if}
-          </FixedColumn>
-        </span>
-        <span class="text name" title={issue.title}>
+      <div class="flex-row-center clear-mins gap-2 flex-grow mr-4" class:p-text={twoRows}>
+        <FixedColumn key={'estimation_issue'} justify={'left'} addClass={'fs-bold'}>
+          {#if currentTeam}
+            {getIssueId(currentTeam, issue)}
+          {/if}
+        </FixedColumn>
+        <span class="overflow-label fs-bold caption-color" title={issue.title}>
          {issue.title}
        </span>
      </div>

-      <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
-        <UserBox
-          width={'100%'}
-          label={tracker.string.Assignee}
-          _class={contact.class.Employee}
-          value={issue.assignee}
-          readonly
-          showNavigate={false}
-        />
-      </FixedColumn>
-      <FixedColumn key={'estimation'} justify={'left'}>
-        <EstimationEditor value={issue} kind={'list'} />
-      </FixedColumn>
+      <div class="flex-row-center clear-mins gap-2 self-end" class:p-text={twoRows}>
+        <FixedColumn key={'estimation_issue_assignee'} justify={'right'}>
+          <UserBox
+            width={'100%'}
+            label={tracker.string.Assignee}
+            _class={contact.class.Employee}
+            value={issue.assignee}
+            readonly
+            showNavigate={false}
+          />
+        </FixedColumn>
+        <FixedColumn key={'estimation'} justify={'left'}>
+          <EstimationEditor value={issue} kind={'list'} />
+        </FixedColumn>
+      </div>
    </div>
  </svelte:fragment>
 </ListView>
-
-<style lang="scss">
-  .row {
-    .text {
-      font-weight: 500;
-      color: var(--caption-color);
-    }
-
-    .issuePresenter {
-      flex-shrink: 0;
-      min-width: 0;
-      min-height: 0;
-      font-weight: 500;
-      color: var(--content-color);
-    }
-
-    .name {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-</style>
--- a/plugins/tracker-resources/src/components/issues/timereport/SubIssuesEstimations.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/SubIssuesEstimations.svelte
@ -16,7 +16,7 @@
  import { Ref, SortingOrder, WithLookup } from '@hcengineering/core'
  import { createQuery } from '@hcengineering/presentation'
  import { Issue, IssueStatus, Team } from '@hcengineering/tracker'
-  import { Scroller, Spinner } from '@hcengineering/ui'
+  import { Spinner } from '@hcengineering/ui'
  import Expandable from '@hcengineering/ui/src/components/Expandable.svelte'
  import tracker from '../../../plugin'
  import EstimationSubIssueList from './EstimationSubIssueList.svelte'
@ -38,15 +38,9 @@

 {#if subIssues && issueStatuses}
  {#if hasSubIssues}
-    <Expandable label={tracker.string.ChildEstimation}>
-      <svelte:fragment slot="title">
-        : {total}
-      </svelte:fragment>
-      <div class="h-50">
-        <Scroller>
-          <EstimationSubIssueList issues={subIssues} {teams} />
-        </Scroller>
-      </div>
+    <Expandable label={tracker.string.ChildEstimation} contentColor bordered>
+      <svelte:fragment slot="title">: <span class="caption-color">{total}</span></svelte:fragment>
+      <EstimationSubIssueList issues={subIssues} {teams} />
    </Expandable>
  {/if}
 {:else}
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeReportDayDropdown.svelte
@ -15,11 +15,13 @@
 <script lang="ts">
  import { TimeReportDayType } from '@hcengineering/tracker'
  import { DropdownIntlItem, DropdownLabelsIntl } from '@hcengineering/ui'
+  import type { ButtonKind } from '@hcengineering/ui'
  import tracker from '../../../plugin'
  import TimeReportDayIcon from './TimeReportDayIcon.svelte'

  export let label = tracker.string.TimeReportDayTypeLabel
  export let selected: TimeReportDayType | undefined
+  export let kind: ButtonKind = 'link-bordered'

  const workDaysDropdownItems: DropdownIntlItem[] = [
    {
@ -34,7 +36,7 @@
 </script>

 <DropdownLabelsIntl
-  kind="link-bordered"
+  {kind}
  icon={TimeReportDayIcon}
  shouldUpdateUndefined={false}
  {label}
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportPopup.svelte
@ -18,7 +18,7 @@
  import type { IntlString } from '@hcengineering/platform'
  import presentation, { Card, getClient, UserBox } from '@hcengineering/presentation'
  import { Issue, TimeReportDayType, TimeSpendReport } from '@hcengineering/tracker'
-  import { DatePresenter, EditBox } from '@hcengineering/ui'
+  import { DatePresenter, EditBox, Button } from '@hcengineering/ui'
  import tracker from '../../../plugin'
  import { getTimeReportDate, getTimeReportDayType } from '../../../utils'
  import TimeReportDayDropdown from './TimeReportDayDropdown.svelte'
@ -85,23 +85,31 @@
 >
  <div class="flex-row-center gap-2">
    <EditBox focus bind:value={data.value} {placeholder} format={'number'} maxDigitsAfterPoint={3} kind={'editbox'} />
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.125)}><span slot="content">1/8</span></Button>
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.25)}><span slot="content">1/4</span></Button>
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.5)}><span slot="content">1/2</span></Button>
+    <Button kind={'link-bordered'} on:click={() => (data.value = 0.75)}><span slot="content">3/4</span></Button>
+    <div class="buttons-divider" />
+    <Button kind={'link-bordered'} on:click={() => (data.value = 1)}><span slot="content">1</span></Button>
+  </div>
+  <EditBox bind:value={data.description} placeholder={tracker.string.TimeSpendReportDescription} kind={'editbox'} />
+  <svelte:fragment slot="pool">
    <UserBox
      _class={contact.class.Employee}
      label={contact.string.Employee}
-      kind={'link-bordered'}
+      kind={'no-border'}
      bind:value={data.employee}
      showNavigate={false}
    />
    <TimeReportDayDropdown
+      kind={'no-border'}
      bind:selected={selectedTimeReportDay}
      on:selected={({ detail }) => (data.date = getTimeReportDate(detail))}
    />
    <DatePresenter
-      kind={'link'}
      bind:value={data.date}
      editable
      on:change={({ detail }) => (selectedTimeReportDay = getTimeReportDayType(detail))}
    />
-  </div>
-  <EditBox bind:value={data.description} placeholder={tracker.string.TimeSpendReportDescription} kind={'editbox'} />
+  </svelte:fragment>
 </Card>
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReports.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReports.svelte
@ -16,7 +16,7 @@
  import { DocumentQuery, Ref, SortingOrder } from '@hcengineering/core'
  import { createQuery } from '@hcengineering/presentation'
  import { Issue, Team, TimeSpendReport } from '@hcengineering/tracker'
-  import { Expandable, floorFractionDigits, Label, Scroller, Spinner } from '@hcengineering/ui'
+  import { Expandable, floorFractionDigits, Label, Spinner } from '@hcengineering/ui'
  import tracker from '../../../plugin'
  import TimePresenter from './TimePresenter.svelte'
  import TimeSpendReportsList from './TimeSpendReportsList.svelte'
@ -42,21 +42,19 @@
 </script>

 {#if reports}
-  <Expandable expanded={true}>
+  <Expandable expanded={true} contentColor bordered>
    <svelte:fragment slot="title">
      <span class="overflow-label flex-nowrap">
-        <Label label={tracker.string.ReportedTime} />: <TimePresenter value={reportedTime} {workDayLength} />
-        <Label label={tracker.string.TimeSpendReports} />: <TimePresenter value={total} {workDayLength} />
+        <Label label={tracker.string.ReportedTime} />:
+        <span class="caption-color"><TimePresenter value={reportedTime} {workDayLength} /></span>.
+        <Label label={tracker.string.TimeSpendReports} />:
+        <span class="caption-color"><TimePresenter value={total} {workDayLength} /></span>
      </span>
    </svelte:fragment>
-    <div class="h-50">
-      <Scroller>
-        <TimeSpendReportsList {reports} {teams} />
-      </Scroller>
-    </div>
+    <TimeSpendReportsList {reports} {teams} />
  </Expandable>
 {:else}
-  <div class="flex-center pt-3">
+  <div class="flex-center">
    <Spinner />
  </div>
 {/if}
--- a/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
+++ b/plugins/tracker-resources/src/components/issues/timereport/TimeSpendReportsList.svelte
@ -18,6 +18,7 @@
  import UserBox from '@hcengineering/presentation/src/components/UserBox.svelte'
  import { Team, TimeReportDayType, TimeSpendReport } from '@hcengineering/tracker'
  import { eventToHTMLElement, getEventPositionElement, ListView, showPopup } from '@hcengineering/ui'
+  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
  import DatePresenter from '@hcengineering/ui/src/components/calendar/DatePresenter.svelte'
  import { ContextMenu, FixedColumn, ListSelectionProvider, SelectDirection } from '@hcengineering/view-resources'
  import { getIssueId } from '../../../issues'
@ -51,18 +52,19 @@
        assignee: value.employee,
        defaultTimeReportDay
      },
-      eventToHTMLElement(event)
+      $deviceInfo.isMobile ? 'top' : eventToHTMLElement(event)
    )
  }
+  $: twoRows = $deviceInfo.twoRows
 </script>

 <!-- svelte-ignore a11y-click-events-have-key-events -->
-<ListView count={reports.length}>
+<ListView count={reports.length} addClass={'step-tb-2-accent'}>
  <svelte:fragment slot="item" let:item>
    {@const report = reports[item]}
    {@const currentTeam = teams.get(toTeamId(report.space))}
    <div
-      class="flex-between row"
+      class="{twoRows ? 'flex-col' : 'flex-between'} p-text-2"
      on:contextmenu|preventDefault={(ev) => showContextMenu(ev, report)}
      on:mouseover={() => {
        listProvider.updateFocus(report)
@ -72,62 +74,36 @@
      }}
      on:click={(evt) => editSpendReport(evt, report, currentTeam?.defaultTimeReportDay)}
    >
-      <div class="flex-row-center clear-mins gap-2 p-2 flex-grow">
-        <span class="issuePresenter">
-          <FixedColumn key={'tmiespend_issue'} justify={'left'}>
-            {#if currentTeam && report.$lookup?.attachedTo}
-              {getIssueId(currentTeam, report.$lookup?.attachedTo)}
-            {/if}
-          </FixedColumn>
-        </span>
+      <div class="flex-row-center clear-mins gap-2 flex-grow mr-4" class:p-text={twoRows}>
+        <FixedColumn key={'tmiespend_issue'} justify={'left'} addClass={'fs-bold'}>
+          {#if currentTeam && report.$lookup?.attachedTo}
+            {getIssueId(currentTeam, report.$lookup?.attachedTo)}
+          {/if}
+        </FixedColumn>
        {#if report.$lookup?.attachedTo?.title}
-          <span class="text name" title={report.$lookup?.attachedTo?.title}>
+          <span class="overflow-label fs-bold caption-color" title={report.$lookup?.attachedTo?.title}>
            {report.$lookup?.attachedTo?.title}
          </span>
        {/if}
      </div>
-      <FixedColumn key={'timespend_assignee'} justify={'left'}>
-        <UserBox
-          width={'100%'}
-          label={tracker.string.Assignee}
-          _class={contact.class.Employee}
-          value={report.employee}
-          readonly
-          showNavigate={false}
-        />
-      </FixedColumn>
-
-      <FixedColumn key={'timespend_reported'} justify={'center'}>
-        <div class="p-1">
+      <div class="flex-row-center clear-mins gap-2 self-end" class:p-text={twoRows}>
+        <FixedColumn key={'timespend_assignee'} justify={'left'}>
+          <UserBox
+            width={'100%'}
+            label={tracker.string.Assignee}
+            _class={contact.class.Employee}
+            value={report.employee}
+            readonly
+            showNavigate={false}
+          />
+        </FixedColumn>
+        <FixedColumn key={'timespend_reported'} justify={'center'}>
          <TimePresenter value={report.value} workDayLength={currentTeam?.workDayLength} />
-        </div>
-      </FixedColumn>
-      <FixedColumn key={'timespend_date'} justify={'left'}>
-        <DatePresenter value={report.date} />
-      </FixedColumn>
-    </div>
-  </svelte:fragment>
+        </FixedColumn>
+        <FixedColumn key={'timespend_date'} justify={'left'}>
+          <DatePresenter value={report.date} />
+        </FixedColumn>
+      </div>
+    </div></svelte:fragment
+  >
 </ListView>
-
-<style lang="scss">
-  .row {
-    .text {
-      font-weight: 500;
-      color: var(--caption-color);
-    }
-
-    .issuePresenter {
-      flex-shrink: 0;
-      min-width: 0;
-      min-height: 0;
-      font-weight: 500;
-      color: var(--content-color);
-    }
-
-    .name {
-      white-space: nowrap;
-      text-overflow: ellipsis;
-      overflow: hidden;
-    }
-  }
-</style>
--- a/plugins/view-resources/src/components/FixedColumn.svelte
+++ b/plugins/view-resources/src/components/FixedColumn.svelte
@ -20,6 +20,7 @@

  export let key: string
  export let justify: string = ''
+  export let addClass: string | undefined = undefined
  let prevKey = key
  let element: HTMLDivElement | undefined

@ -48,7 +49,7 @@

 <div
  bind:this={element}
-  class="flex-no-shrink"
+  class="flex-no-shrink{addClass ? ` ${addClass}` : ''}"
  style="{justify !== '' ? `text-align: ${justify}; ` : ''} min-width: {$fixedWidthStore[key] ?? 0}px;"
  use:resizeObserver={resize}
 >