From 0de6804083a08f6aade74ce16fcb17d8c3a56f27 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 4 May 2023 05:43:51 +0300
Subject: [PATCH] TSK-1382. Fixed layout for mobile devices (#3132)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 models/tracker/src/index.ts                      |  8 ++++++--
 .../src/components/list/ListItem.svelte          | 16 +++++++++++-----
 2 files changed, 17 insertions(+), 7 deletions(-)

diff --git a/models/tracker/src/index.ts b/models/tracker/src/index.ts
index 5b12390a85..935338604e 100644
--- a/models/tracker/src/index.ts
+++ b/models/tracker/src/index.ts
@@ -585,11 +585,15 @@ export function createModel (builder: Builder): void {
             }
           }
         },
-        { key: '', presenter: view.component.DividerPresenter, props: { type: 'divider' } },
+        {
+          key: '',
+          presenter: view.component.DividerPresenter,
+          props: { type: 'divider', listProps: { optional: true } }
+        },
         {
           key: '',
           presenter: tracker.component.EstimationEditor,
-          props: { kind: 'list', size: 'small', listProps: { key: 'estimation', fixed: 'left' } }
+          props: { kind: 'list', size: 'small', listProps: { key: 'estimation', fixed: 'left', optional: true } }
         },
         { key: '', presenter: view.component.DividerPresenter, props: { type: 'divider' } },
         {
diff --git a/plugins/view-resources/src/components/list/ListItem.svelte b/plugins/view-resources/src/components/list/ListItem.svelte
index 42b30d64a3..b870c5af28 100644
--- a/plugins/view-resources/src/components/list/ListItem.svelte
+++ b/plugins/view-resources/src/components/list/ListItem.svelte
@@ -90,6 +90,7 @@
 <div
   bind:this={elem}
   class="listGrid antiList__row row gap-2 flex-grow"
+  class:compactMode
   class:checking={checked}
   class:mListGridSelected={selected}
   class:last
@@ -183,7 +184,8 @@
       <IconCircles />
     </div>
     <div class="hidden-panel" tabindex="-1">
-      <div class="header">
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
+      <div class="header" on:click={(ev) => ev.currentTarget.blur()}>
         <IconCircles />
         <div class="space" />
         <IconCircles />
@@ -232,9 +234,12 @@
     width: 100%;
     height: 2.75rem;
     min-height: 2.75rem;
-    color: var(--caption-color);
+    color: var(--theme-caption-color);
     background-color: var(--theme-list-row-color);
 
+    &.compactMode {
+      padding: 0 1.125rem 0 0.25rem;
+    }
     &.mListGridSelected {
       background-color: var(--highlight-hover);
     }
@@ -288,7 +293,7 @@
       overflow: hidden;
       right: 0;
       width: 80%;
-      background-color: var(--accent-bg-color);
+      background-color: var(--theme-comp-header-color);
       opacity: 0;
       pointer-events: none;
       z-index: 2;
@@ -307,7 +312,8 @@
         opacity: 0.25;
       }
       .scroll-box {
-        overflow: auto visible;
+        overflow-x: auto;
+        overflow-y: visible;
         display: flex;
         align-items: center;
         margin: 0.125rem 0.25rem 0;
@@ -323,7 +329,7 @@
       flex-direction: column;
       justify-content: center;
       padding: 0 0.125rem;
-      right: 2.5rem;
+      right: 0.125rem;
       width: 0.75rem;
       border: 1px solid transparent;
       border-radius: 0.25rem;