From 107c73593f2f2279cf2dfa923e10877c20e1abc8 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Tue, 6 Dec 2022 06:55:30 +0300
Subject: [PATCH] Fix Card layout (#2420)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 packages/presentation/src/components/Card.svelte         | 8 ++++++--
 packages/theme/styles/dialogs.scss                       | 1 +
 packages/ui/src/components/Scroller.svelte               | 2 +-
 packages/ui/src/popups.ts                                | 1 +
 .../tracker-resources/src/components/CreateIssue.svelte  | 9 +--------
 .../components/templates/IssueTemplateChildList.svelte   | 4 +++-
 .../src/components/templates/IssueTemplateChilds.svelte  | 2 +-
 7 files changed, 14 insertions(+), 13 deletions(-)

diff --git a/packages/presentation/src/components/Card.svelte b/packages/presentation/src/components/Card.svelte
index 67e2e2577e..471344f3db 100644
--- a/packages/presentation/src/components/Card.svelte
+++ b/packages/presentation/src/components/Card.svelte
@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
-  import { Button, IconClose, Label, MiniToggle } from '@hcengineering/ui'
+  import { Button, IconClose, Label, MiniToggle, Scroller } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
   import { deviceOptionsStore as deviceInfo, resizeObserver } from '@hcengineering/ui'
@@ -71,7 +71,11 @@
       />
     </div>
   </div>
-  <div class="antiCard-content"><slot /></div>
+  <Scroller autoscroll>
+    <div class="antiCard-content">
+      <slot />
+    </div>
+  </Scroller>
   {#if $$slots.header || $$slots.pool}
     <div class="antiCard-pool">
       <slot name="pool" />
diff --git a/packages/theme/styles/dialogs.scss b/packages/theme/styles/dialogs.scss
index 91d1e9143b..e6ce90718e 100644
--- a/packages/theme/styles/dialogs.scss
+++ b/packages/theme/styles/dialogs.scss
@@ -70,6 +70,7 @@
     display: flex;
     flex-direction: column;
     flex-grow: 1;
+    flex-shrink: 1;
     margin: 0 1rem;
     height: fit-content;
     min-height: 0;
diff --git a/packages/ui/src/components/Scroller.svelte b/packages/ui/src/components/Scroller.svelte
index 1572179160..a39db563fe 100644
--- a/packages/ui/src/components/Scroller.svelte
+++ b/packages/ui/src/components/Scroller.svelte
@@ -310,7 +310,7 @@
 <svelte:window on:resize={_resize} />
 
 <div class="scroller-container {invertScroll ? 'invert' : 'normal'}">
-  <div bind:this={divHScroll} class="horizontalBox flex-shrink">
+  <div bind:this={divHScroll} class="horizontalBox flex-col flex-shrink">
     <div
       bind:this={divScroll}
       use:resizeObserver={(element) => {
diff --git a/packages/ui/src/popups.ts b/packages/ui/src/popups.ts
index 709e99a8ec..b9d01d3196 100644
--- a/packages/ui/src/popups.ts
+++ b/packages/ui/src/popups.ts
@@ -243,6 +243,7 @@ export function fitPopupElement (
     } else if (element === 'top') {
       newProps.top = '15vh'
       newProps.left = '50%'
+      newProps.maxHeight = '75vh'
       newProps.transform = 'translateX(-50%)'
       show = true
     } else if (element === 'float') {
diff --git a/plugins/tracker-resources/src/components/CreateIssue.svelte b/plugins/tracker-resources/src/components/CreateIssue.svelte
index e6a435a4f3..9257604c4f 100644
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@@ -713,18 +713,11 @@
     space={_space}
     alwaysEdit
     showButtons={false}
-    maxHeight={'20vh'}
     bind:content={object.description}
     placeholder={tracker.string.IssueDescriptionPlaceholder}
     on:changeSize={() => dispatch('changeContent')}
   />
-  <IssueTemplateChilds
-    bind:children={subIssues}
-    sprint={object.sprint}
-    project={object.project}
-    isScrollable
-    maxHeight={'20vh'}
-  />
+  <IssueTemplateChilds bind:children={subIssues} sprint={object.sprint} project={object.project} isScrollable />
   <svelte:fragment slot="pool">
     <div class="flex flex-wrap" style:gap={'0.2vw'}>
       {#if issueStatuses}
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
index b8e29535e3..4bea46987b 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChildList.svelte
@@ -108,6 +108,7 @@
 />
 
 {#each issues as issue, index (issue.id)}
+  <!-- svelte-ignore a11y-click-events-have-key-events -->
   <div
     class="flex-between row"
     class:is-dragging={index === draggingIndex}
@@ -139,6 +140,7 @@
           issue.priority = evt.detail
         }}
       />
+      <!-- svelte-ignore a11y-click-events-have-key-events -->
       <span class="issuePresenter" on:click={(evt) => openIssue(evt, issue)}>
         <FixedColumn
           width={propsWidth.issue}
@@ -156,7 +158,7 @@
     <div class="flex-center flex-no-shrink">
       <EstimationEditor
         kind={'link'}
-        size={'small'}
+        size={'large'}
         bind:value={issue}
         on:change={(evt) => {
           dispatch('update-issue', { id: issue.id, estimation: evt.detail })
diff --git a/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte b/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
index 7a1d8b5ec1..826d53dc4e 100644
--- a/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplateChilds.svelte
@@ -86,7 +86,7 @@
 </div>
 {#if hasSubIssues}
   <ExpandCollapse isExpanded={!isCollapsed} duration={400} on:changeContent>
-    <div class="list" class:collapsed={isCollapsed}>
+    <div class="flex-col flex-no-shrink list clear-mins" class:collapsed={isCollapsed}>
       <IssueTemplateChildList
         {project}
         {sprint}