Fix popups (#2384)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>

packages/presentation/src/components/Card.svelte

@@ -18,7 +18,7 @@
   import { Button, IconClose, Label, MiniToggle } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import presentation from '..'
-  import { deviceOptionsStore as deviceInfo } from '@hcengineering/ui'
+  import { deviceOptionsStore as deviceInfo, resizeObserver } from '@hcengineering/ui'
 
   export let label: IntlString
   export let labelProps: any | undefined = undefined
@@ -33,7 +33,14 @@
   let okProcessing = false
 </script>
 
-<form id={label} class="antiCard {$deviceInfo.isMobile ? 'mobile' : 'dialog'}" on:submit|preventDefault={() => {}}>
+<form
+  id={label}
+  class="antiCard {$deviceInfo.isMobile ? 'mobile' : 'dialog'}"
+  on:submit|preventDefault={() => {}}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
   <div class="antiCard-header">
     <div class="antiCard-header__title-wrap">
       {#if $$slots.header}

packages/presentation/src/components/ObjectPopup.svelte

@@ -26,9 +26,10 @@
     IconCheck,
     ListView,
     showPopup,
-    tooltip
+    tooltip,
+    resizeObserver
   } from '@hcengineering/ui'
-  import { afterUpdate, createEventDispatcher } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
   import presentation from '..'
   import { ObjectCreate } from '../types'
   import { createQuery, getClient } from '../utils'
@@ -158,8 +159,6 @@
     return obj
   }
 
-  afterUpdate(() => dispatch('changeContent'))
-
   let selectedDiv: HTMLElement | undefined
   let scrollDiv: HTMLElement | undefined
   let cHeight = 0
@@ -198,6 +197,9 @@
   class:plainContainer={!shadows}
   class:width-40={width === 'large'}
   on:keydown={onKeydown}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
 >
   <div class="header flex-between">
     <EditBox kind={'search-style'} focusIndex={1} focus bind:value={search} {placeholder} />

packages/presentation/src/components/SpacesMultiPopup.svelte

@@ -16,10 +16,8 @@
   import type { IntlString } from '@hcengineering/platform'
   import { translate } from '@hcengineering/platform'
   import { createEventDispatcher, onMount } from 'svelte'
-
   import core, { Class, getCurrentAccount, Ref, Space } from '@hcengineering/core'
-  import { tooltip, CheckBox } from '@hcengineering/ui'
-
+  import { tooltip, CheckBox, resizeObserver } from '@hcengineering/ui'
   import { createQuery } from '../utils'
   import presentation from '..'
   import SpaceInfo from './SpaceInfo.svelte'
@@ -91,7 +89,7 @@
   })
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="header">
     <input bind:this={input} type="text" bind:value={searchQuery} placeholder={phTraslate} on:change />
   </div>

packages/presentation/src/components/UsersPopup.svelte

@@ -13,7 +13,6 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher, afterUpdate } from 'svelte'
   import { Contact, getFirstName, Person } from '@hcengineering/contact'
   import type { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
   import type { Asset, IntlString } from '@hcengineering/platform'
@@ -51,10 +50,6 @@
           }
         }
       : undefined
-
-  const dispatch = createEventDispatcher()
-
-  afterUpdate(() => dispatch('changeContent'))
 </script>
 
 <ObjectPopup
@@ -73,7 +68,7 @@
   create={_create}
   on:update
   on:close
-  on:changeContent={() => dispatch('changeContent')}
+  on:changeContent
 >
   <svelte:fragment slot="item" let:item={person}>
     <div class="flex flex-grow overflow-label">

packages/text-editor/src/components/StyledTextBox.svelte

@@ -1,7 +1,16 @@
 <script lang="ts">
   import { IntlString } from '@hcengineering/platform'
   import presentation, { MessageViewer } from '@hcengineering/presentation'
-  import { ActionIcon, IconCheck, IconClose, IconEdit, IconSize, Label, ShowMore } from '@hcengineering/ui'
+  import {
+    ActionIcon,
+    IconCheck,
+    IconClose,
+    IconEdit,
+    IconSize,
+    Label,
+    ShowMore,
+    resizeObserver
+  } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import textEditorPlugin from '../plugin'
   import StyledTextEditor from './StyledTextEditor.svelte'
@@ -78,6 +87,9 @@
       textEditor?.focus()
     }
   }}
+  use:resizeObserver={() => {
+    dispatch('changeSize')
+  }}
 >
   {#if label}
     <div class="label"><Label {label} /></div>

packages/ui/src/components/ColorPopup.svelte

@@ -18,6 +18,7 @@
   import { createEventDispatcher, onMount } from 'svelte'
   import { getPlatformColor } from '../colors'
   import ListView from './ListView.svelte'
+  import { resizeObserver } from '..'
 
   export let placeholder: IntlString | undefined = undefined
   export let placeholderParam: any | undefined = undefined
@@ -73,7 +74,13 @@
   })
 </script>
 
-<div class="selectPopup" on:keydown={onKeydown}>
+<div
+  class="selectPopup"
+  on:keydown={onKeydown}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
   {#if searchable}
     <div class="header">
       <input bind:this={input} type="text" bind:value={search} placeholder={phTraslate} on:input={() => {}} on:change />

packages/ui/src/components/DropdownLabelsPopup.svelte

@@ -20,6 +20,7 @@
   import plugin from '../plugin'
   import CheckBox from './CheckBox.svelte'
   import ListView from './ListView.svelte'
+  import { resizeObserver } from '..'
 
   export let placeholder: IntlString = plugin.string.SearchDots
   export let items: DropdownTextItem[]
@@ -72,7 +73,13 @@
   }
 </script>
 
-<div class="selectPopup" on:keydown={onKeydown}>
+<div
+  class="selectPopup"
+  on:keydown={onKeydown}
+  use:resizeObserver={() => {
+    dispatch('changeContent')
+  }}
+>
   <div class="header">
     <input
       bind:this={searchInput}

packages/ui/src/components/DropdownLabelsPopupIntl.svelte

@@ -17,6 +17,7 @@
   import type { DropdownIntlItem } from '../types'
   import CheckBox from './CheckBox.svelte'
   import Label from './Label.svelte'
+  import { resizeObserver } from '..'
 
   export let items: DropdownIntlItem[]
   export let selected: DropdownIntlItem['id'] | undefined = undefined
@@ -35,7 +36,7 @@
   }
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="scroll">
     <div class="box">
       {#each items as item, i}

packages/ui/src/components/DropdownPopup.svelte

@@ -16,11 +16,11 @@
   import type { Asset, IntlString } from '@hcengineering/platform'
   import { translate } from '@hcengineering/platform'
   import { createEventDispatcher, onMount } from 'svelte'
-
   import type { AnySvelteComponent, ListItem } from '../types'
   import plugin from '../plugin'
   import Icon from './Icon.svelte'
   import ListView from './ListView.svelte'
+  import { resizeObserver } from '..'
 
   export let icon: Asset | AnySvelteComponent
   export let placeholder: IntlString = plugin.string.SearchDots
@@ -77,7 +77,7 @@
   }
 </script>
 
-<div class="selectPopup" on:keydown={onKeydown}>
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
   <div class="header">
     <input
       bind:this={searchInput}

packages/ui/src/components/DropdownRecordPopup.svelte

@@ -18,6 +18,7 @@
   import CheckBox from './CheckBox.svelte'
   import Label from './Label.svelte'
   import ListView from './ListView.svelte'
+  import { resizeObserver } from '..'
 
   export let items: Record<any, IntlString>
   export let selected: any | undefined = undefined
@@ -58,7 +59,7 @@
   }
 </script>
 
-<div class="selectPopup" on:keydown={onKeydown}>
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')} on:keydown={onKeydown}>
   <div class="scroll">
     <div class="box">
       <ListView bind:this={list} count={objects.length} bind:selection>

packages/ui/src/components/ExpandCollapse.svelte

@@ -32,7 +32,7 @@
 </script>
 
 <div class="root" style="height: {$tweenedHeight}px">
-  <div bind:offsetHeight={height} class="clear-mins">
+  <div bind:offsetHeight={height} class="flex-no-shrink clear-mins">
     <slot />
   </div>
 </div>
@@ -41,5 +41,6 @@
   .root {
     overflow: hidden;
     min-height: 0;
+    flex-shrink: 0;
   }
 </style>

packages/ui/src/components/ListView.svelte

@@ -13,7 +13,8 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { afterUpdate, createEventDispatcher } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
+  import { resizeObserver } from '..'
 
   export let selection: number = 0
   export let count: number
@@ -53,12 +54,16 @@
       r?.scrollIntoView({ behavior: 'auto', block: 'nearest' })
     }
   }
-
-  afterUpdate(() => dispatch('changeContent'))
 </script>
 
 {#if count}
-  <div class="list-container flex-col flex-grow" style:overflow={'auto'}>
+  <div
+    class="list-container flex-col flex-grow"
+    style:overflow={'auto'}
+    use:resizeObserver={() => {
+      dispatch('changeContent')
+    }}
+  >
     {#each Array(count) as _, row}
       <slot name="category" item={row} />
       <div
@@ -76,7 +81,7 @@
 
 <style lang="scss">
   .list-container {
-    border-radius: 0.25rem;
+    // border-radius: 0.25rem;
     user-select: none;
 
     .selection {

packages/ui/src/components/Menu.svelte

@@ -13,7 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { afterUpdate, createEventDispatcher, onDestroy, onMount } from 'svelte'
+  import { createEventDispatcher, onDestroy, onMount } from 'svelte'
   import { generateId, Ref, Doc } from '@hcengineering/core'
   import ui from '../plugin'
   import { closePopup, showPopup } from '../popups'
@@ -68,9 +68,6 @@
     }
   }
 
-  afterUpdate(() => {
-    dispatch('changeContent')
-  })
   onMount(() => {
     if (btns[0]) {
       btns[0].focus()
@@ -142,7 +139,9 @@
               bind:this={btns[i]}
               class="ap-menuItem flex-row-center withIcon w-full"
               class:hover={btns[i] === activeElement}
-              on:mouseover={(evt) => focusTarget(action, btns[i])}
+              on:mousemove={() => {
+                if (btns[i] !== activeElement) focusTarget(action, btns[i])
+              }}
               on:click|preventDefault|stopPropagation={(evt) => {
                 if (!action.inline) dispatch('close')
                 action.action(ctx, evt)
@@ -158,7 +157,9 @@
             bind:this={btns[i]}
             class="ap-menuItem antiPopup-submenu withIconHover"
             class:hover={btns[i] === activeElement}
-            on:mouseover={() => focusTarget(action, btns[i])}
+            on:mousemove={() => {
+              if (btns[i] !== activeElement) focusTarget(action, btns[i])
+            }}
             on:click={() => focusTarget(action, btns[i])}
           >
             {#if action.icon}
@@ -172,7 +173,9 @@
             bind:this={btns[i]}
             class="ap-menuItem flex-row-center withIcon"
             class:hover={btns[i] === activeElement}
-            on:mouseover={() => focusTarget(action, btns[i], action.isSubmenuRightClicking)}
+            on:mousemove={() => {
+              if (btns[i] !== activeElement) focusTarget(action, btns[i], action.isSubmenuRightClicking)
+            }}
             on:click={(evt) => {
               if (!action.inline) dispatch('close')
               action.action(ctx, evt)

packages/ui/src/components/PopupInstance.svelte

@@ -14,7 +14,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { afterUpdate, onMount } from 'svelte'
+  import { onMount } from 'svelte'
   import { fitPopupElement } from '../popups'
   import type { AnyComponent, AnySvelteComponent, PopupAlignment, PopupOptions } from '../types'
   import { deviceOptionsStore as deviceInfo } from '..'
@@ -44,7 +44,8 @@
       height: '',
       maxWidth: '',
       maxHeight: '',
-      minWidth: ''
+      minWidth: '',
+      minHeight: ''
     },
     showOverlay: false,
     direction: 'bottom'
@@ -101,8 +102,6 @@
   onMount(() => fitPopup())
   $: if ($deviceInfo.docWidth <= 900 && !docSize) docSize = true
   $: if ($deviceInfo.docWidth > 900 && docSize) docSize = false
-
-  afterUpdate(() => fitPopup())
 </script>
 
 <svelte:window on:resize={fitPopup} on:keydown={handleKeydown} />
@@ -121,6 +120,7 @@
   style:max-width={options.props.maxWidth}
   style:max-height={options.props.maxHeight}
   style:min-width={options.props.minWidth}
+  style:min-height={options.props.minHeight}
   style:transform={options.props.transform}
 >
   <svelte:component

packages/ui/src/components/Scroller.svelte

@@ -299,13 +299,13 @@
 <svelte:window on:resize={_resize} />
 
 <div class="scroller-container {invertScroll ? 'invert' : 'normal'}">
-  <div bind:this={divHScroll} class="horizontalBox">
+  <div bind:this={divHScroll} class="horizontalBox flex-shrink">
     <div
       bind:this={divScroll}
       use:resizeObserver={(element) => {
         divHeight = element.clientHeight
       }}
-      class="scroll relative"
+      class="scroll relative flex-shrink"
       class:overflowXauto={horizontal}
       class:overflowXhidden={!horizontal}
       on:scroll={() => {
@@ -375,6 +375,7 @@
     position: relative;
     display: flex;
     flex-direction: column;
+    flex-shrink: 1;
     height: 100%;
     min-width: 0;
     min-height: 0;

packages/ui/src/components/SelectPopup.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import type { Asset, IntlString } from '@hcengineering/platform'
-  import { afterUpdate, createEventDispatcher } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
   import { createFocusManager } from '../focus'
   import EditBox from './EditBox.svelte'
   import FocusHandler from './FocusHandler.svelte'
@@ -85,8 +85,6 @@
   $: filteredObjects = value.filter((el) => (el.label ?? el.text ?? '').toLowerCase().includes(search.toLowerCase()))
 
   $: huge = size === 'medium' || size === 'large'
-
-  afterUpdate(() => dispatch('changeContent'))
 </script>
 
 <FocusHandler {manager} />

packages/ui/src/popups.ts

@@ -156,7 +156,7 @@ export function fitPopupPositionedElement (
   newProps.maxWidth = newProps.width = ''
   if (alignment?.kind === 'submenu') {
     const dirH =
-      docWidth - rect.right - rectPopup.width - 12 > 0 ? 'right' : rect.left > docWidth - rect.left ? 'left' : 'right'
+      docWidth - rect.right - rectPopup.width - 12 > 0 ? 'right' : rect.left > docWidth - rect.left ? 'left' : 'inside'
     const dirV =
       docHeight - rect.top - rectPopup.height - 20 > 0
         ? 'bottom'
@@ -164,6 +164,7 @@ export function fitPopupPositionedElement (
           ? 'top'
           : 'bottom'
     if (dirH === 'right') newProps.left = `${rect.right - 4}px`
+    else if (dirH === 'inside') newProps.right = '1rem'
     else newProps.right = `${docWidth - rect.left - 4}px`
     if (dirV === 'bottom') newProps.top = `${rect.top - 4}px`
     else newProps.bottom = `${docHeight - rect.bottom - 4}px`

plugins/attachment-resources/src/components/AttachmentStyledBox.svelte

@@ -201,7 +201,7 @@
     {showButtons}
     {buttonSize}
     {maxHeight}
-    on:changeContent
+    on:changeSize
   />
   {#if attachments.size}
     <div class="flex-row-center list scroll-divider-color mt-1">

plugins/contact-resources/src/components/CreateContact.svelte

@@ -1,12 +1,10 @@
 <script lang="ts">
   import { Asset } from '@hcengineering/platform'
-  import { afterUpdate, createEventDispatcher } from 'svelte'
   import { getClient } from '@hcengineering/presentation'
   import { Menu, Action, showPopup, closePopup } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import contact from '../plugin'
 
-  const dispatch = createEventDispatcher()
   const client = getClient()
 
   const actions: Action[] = []
@@ -29,10 +27,6 @@
         })
       }
     })
-
-  afterUpdate(() => {
-    dispatch('changeContent')
-  })
 </script>
 
-<Menu {actions} on:changeContent={() => dispatch('changeContent')} />
+<Menu {actions} on:changeContent />

plugins/tags-resources/src/components/TagsCategoryPopup.svelte

@@ -18,7 +18,7 @@
   import { translate } from '@hcengineering/platform'
   import presentation, { createQuery } from '@hcengineering/presentation'
   import { TagCategory, TagElement } from '@hcengineering/tags'
-  import { Button, CheckBox, getPlatformColor, Icon, IconClose, Label } from '@hcengineering/ui'
+  import { Button, CheckBox, getPlatformColor, Icon, IconClose, Label, resizeObserver } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import tags from '../plugin'
 
@@ -96,7 +96,7 @@
   )
 </script>
 
-<div class="selectPopup maxHeight">
+<div class="selectPopup maxHeight" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="header no-border">
     <div class="flex-between flex-grow pr-2">
       <div class="flex-grow">

plugins/tags-resources/src/components/TagsFilter.svelte

@@ -16,7 +16,7 @@
   import { Class, Doc, FindResult, Ref } from '@hcengineering/core'
   import { translate } from '@hcengineering/platform'
   import presentation, { getClient } from '@hcengineering/presentation'
-  import { Button, CheckBox, getPlatformColor, Loading } from '@hcengineering/ui'
+  import { Button, CheckBox, getPlatformColor, Loading, resizeObserver } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import view from '@hcengineering/view-resources/src/plugin'
   import { createEventDispatcher, onMount } from 'svelte'
@@ -102,7 +102,7 @@
   getValues(search)
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="header">
     <input
       bind:this={searchInput}

plugins/tags-resources/src/components/TagsPopup.svelte

@@ -18,7 +18,17 @@
   import { translate } from '@hcengineering/platform'
   import presentation, { createQuery, getClient } from '@hcengineering/presentation'
   import { TagCategory, TagElement } from '@hcengineering/tags'
-  import { Button, CheckBox, getPlatformColor, Icon, IconAdd, IconClose, Label, showPopup } from '@hcengineering/ui'
+  import {
+    Button,
+    CheckBox,
+    getPlatformColor,
+    Icon,
+    IconAdd,
+    IconClose,
+    Label,
+    showPopup,
+    resizeObserver
+  } from '@hcengineering/ui'
   import { createEventDispatcher, onMount } from 'svelte'
   import tags from '../plugin'
   import CreateTagElement from './CreateTagElement.svelte'
@@ -99,7 +109,7 @@
   }
 </script>
 
-<div class="selectPopup maxHeight">
+<div class="selectPopup maxHeight" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="header no-border">
     <div class="flex-between flex-grow pr-2">
       <div class="flex-grow">

plugins/task-resources/src/components/CreateFilterPopup.svelte

@@ -14,7 +14,7 @@
 -->
 <script lang="ts">
   import { Timestamp } from '@hcengineering/core'
-  import { closeTooltip, Label } from '@hcengineering/ui'
+  import { closeTooltip, Label, resizeObserver } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import task from '../plugin'
   import { TimestampPresenter } from '@hcengineering/view-resources'
@@ -42,7 +42,7 @@
   ]
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="scroll">
     <div class="box">
       <div

plugins/task-resources/src/components/state/DoneStatesPopup.svelte

@@ -17,7 +17,7 @@
   import { Class, Doc, Ref, SortingOrder } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import { DoneState, SpaceWithStates } from '@hcengineering/task'
-  import { getPlatformColor, Label } from '@hcengineering/ui'
+  import { getPlatformColor, Label, resizeObserver } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import task from '../../plugin'
   import Won from '../icons/Won.svelte'
@@ -46,7 +46,7 @@
   }
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="scroll">
     <div class="box">
       {#each states as state}

plugins/task-resources/src/components/state/StatesPopup.svelte

@@ -17,7 +17,7 @@
   import { Ref, SortingOrder } from '@hcengineering/core'
   import { createQuery } from '@hcengineering/presentation'
   import task, { SpaceWithStates, State } from '@hcengineering/task'
-  import { getPlatformColor } from '@hcengineering/ui'
+  import { getPlatformColor, resizeObserver } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
 
   export let space: Ref<SpaceWithStates>
@@ -38,7 +38,7 @@
   )
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="scroll">
     <div class="box">
       {#each states as state}

plugins/tracker-resources/src/components/CreateIssue.svelte

@@ -62,7 +62,7 @@
   } from '@hcengineering/ui'
   import view from '@hcengineering/view'
   import { ObjectBox } from '@hcengineering/view-resources'
-  import { createEventDispatcher, afterUpdate } from 'svelte'
+  import { createEventDispatcher } from 'svelte'
   import { activeProject, activeSprint, updateIssueRelation } from '../issues'
   import tracker from '../plugin'
   import AssigneeEditor from './issues/AssigneeEditor.svelte'
@@ -638,8 +638,6 @@
       )
     }
   }
-
-  afterUpdate(() => dispatch('changeContent'))
 </script>
 
 <Card
@@ -650,6 +648,7 @@
   on:close={() => dispatch('close')}
   createMore={false}
   onCancel={showConfirmationDialog}
+  on:changeContent
 >
   <svelte:fragment slot="header">
     <div class="flex-row-center">
@@ -707,7 +706,7 @@
       maxHeight={'20vh'}
       bind:content={object.description}
       placeholder={tracker.string.IssueDescriptionPlaceholder}
-      on:changeContent
+      on:changeSize={() => dispatch('changeContent')}
     />
   {/key}
   <IssueTemplateChilds
@@ -716,7 +715,6 @@
     project={object.project}
     isScrollable
     maxHeight={'20vh'}
-    on:changeContent
   />
   <svelte:fragment slot="pool">
     <div class="flex flex-wrap" style:gap={'0.2vw'}>

plugins/tracker-resources/src/components/RelationsPopup.svelte

@@ -5,14 +5,11 @@
   import { createQuery, getClient, ObjectSearchPopup, ObjectSearchResult } from '@hcengineering/presentation'
   import { Issue } from '@hcengineering/tracker'
   import { Action, closePopup, Menu, showPopup } from '@hcengineering/ui'
-  import { afterUpdate, createEventDispatcher } from 'svelte'
   import { updateIssueRelation } from '../issues'
   import tracker from '../plugin'
 
   export let value: Issue
 
-  const dispatch = createEventDispatcher()
-
   const client = getClient()
   const query = createQuery()
   $: relations = {
@@ -126,10 +123,8 @@
     },
     ...(hasRelation ? removeRelationAction : [])
   ]
-
-  afterUpdate(() => dispatch('changeContent'))
 </script>
 
 {#if actions}
-  <Menu {actions} on:changeContent={() => dispatch('changeContent')} />
+  <Menu {actions} on:changeContent />
 {/if}

plugins/view-resources/src/components/ActionsPopup.svelte

@@ -23,7 +23,7 @@
   import view from '../plugin'
   import { focusStore, selectionStore } from '../selection'
   import ActionContext from './ActionContext.svelte'
-  import { ListView } from '@hcengineering/ui'
+  import { ListView, resizeObserver } from '@hcengineering/ui'
   import ObjectPresenter from './ObjectPresenter.svelte'
   import { tick } from 'svelte'
 
@@ -179,7 +179,12 @@
   }}
 />
 
-<div class="selectPopup width-40" style:width="15rem" on:keydown={onKeydown}>
+<div
+  class="selectPopup width-40"
+  style:width="15rem"
+  on:keydown={onKeydown}
+  use:resizeObserver={() => dispatch('changeContent')}
+>
   <div class="mt-2 ml-2 flex-between">
     {#if $selectionStore.length > 0}
       <div class="item-box">

plugins/view-resources/src/components/BooleanEditorPopup.svelte

@@ -15,7 +15,7 @@
 -->
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
-  import { CheckBox } from '@hcengineering/ui'
+  import { CheckBox, resizeObserver } from '@hcengineering/ui'
   import BooleanPresenter from './BooleanPresenter.svelte'
 
   export let value: boolean
@@ -24,7 +24,7 @@
   const dispatch = createEventDispatcher()
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="menu-item" on:click={() => dispatch('close', 1)}>
     <BooleanPresenter value={true} />
     {#if value === true}

plugins/view-resources/src/components/EditBoxPopup.svelte

@@ -16,7 +16,7 @@
 <script lang="ts">
   import type { IntlString } from '@hcengineering/platform'
   import { createEventDispatcher } from 'svelte'
-  import { EditBox } from '@hcengineering/ui'
+  import { EditBox, resizeObserver } from '@hcengineering/ui'
   import type { EditStyle } from '@hcengineering/ui'
 
   export let value: string | number | undefined
@@ -31,7 +31,7 @@
   }
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="header no-border">
     <EditBox bind:value {placeholder} {format} {kind} focus on:keypress={_onkeypress} />
   </div>

plugins/view-resources/src/components/Menu.svelte

@@ -13,7 +13,6 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { createEventDispatcher, afterUpdate } from 'svelte'
   import type { Class, Doc, Ref } from '@hcengineering/core'
   import type { Asset } from '@hcengineering/platform'
   import { getClient } from '@hcengineering/presentation'
@@ -27,7 +26,6 @@
   export let mode: ViewContextType | undefined = undefined
 
   const client = getClient()
-  const dispatch = createEventDispatcher()
 
   let loaded = 0
 
@@ -56,10 +54,8 @@
       }))
     loaded = 1
   })
-
-  afterUpdate(() => dispatch('changeContent'))
 </script>
 
 {#if loaded}
-  <Menu {actions} on:close on:changeContent={() => dispatch('changeContent')} />
+  <Menu {actions} on:close on:changeContent />
 {/if}

plugins/view-resources/src/components/ObjectBoxPopup.svelte

@@ -17,7 +17,6 @@
   import type { Class, Doc, DocumentQuery, FindOptions, Ref } from '@hcengineering/core'
   import type { IntlString } from '@hcengineering/platform'
   import presentation, { ObjectCreate, ObjectPopup } from '@hcengineering/presentation'
-  import { afterUpdate, createEventDispatcher } from 'svelte'
   import ObjectPresenter from './ObjectPresenter.svelte'
 
   export let _class: Ref<Class<Doc>>
@@ -35,10 +34,6 @@
   export let create: ObjectCreate | undefined = undefined
   export let searchField: string = 'name'
   export let docProps: Record<string, any> = {}
-
-  const dispatch = createEventDispatcher()
-
-  afterUpdate(() => dispatch('changeContent'))
 </script>
 
 <ObjectPopup
@@ -58,7 +53,7 @@
   {create}
   on:update
   on:close
-  on:changeContent={() => dispatch('changeContent')}
+  on:changeContent
 >
   <svelte:fragment slot="item" let:item={doc}>
     <div class="flex flex-grow overflow-label">

plugins/view-resources/src/components/ValueSelector.svelte

@@ -2,7 +2,7 @@
   import { Class, Doc, DocumentQuery, FindOptions, Hierarchy, Ref } from '@hcengineering/core'
   import { Asset, IntlString } from '@hcengineering/platform'
   import { getClient, ObjectPopup, updateAttribute } from '@hcengineering/presentation'
-  import { Label, SelectPopup } from '@hcengineering/ui'
+  import { Label, SelectPopup, resizeObserver } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import view from '../plugin'
   import ObjectPresenter from './ObjectPresenter.svelte'
@@ -123,6 +123,7 @@
       searchable
       {width}
       {size}
+      on:changeContent
     />
   {:else if _class !== undefined}
     <ObjectPopup
@@ -136,6 +137,7 @@
       placeholder={placeholder ?? view.string.Filter}
       {width}
       {size}
+      on:changeContent
     >
       <svelte:fragment slot="item" let:item>
         <div class="flex flex-grow overflow-label" class:mt-2={huge} class:mb-2={huge}>
@@ -150,7 +152,7 @@
     </ObjectPopup>
   {/if}
 {:else}
-  <div class="selectPopup">
+  <div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
     <div class="flex-center w-60 h-18">
       <Label label={view.string.DontMatchCriteria} />
     </div>

plugins/view-resources/src/components/filter/FilterTypePopup.svelte

@@ -15,7 +15,7 @@
 <script lang="ts">
   import core, { AnyAttribute, ArrOf, AttachedDoc, Class, Collection, Doc, Ref, RefTo, Type } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import { closePopup, closeTooltip, Icon, Label, showPopup, Submenu } from '@hcengineering/ui'
+  import { closePopup, closeTooltip, Icon, Label, showPopup, Submenu, resizeObserver } from '@hcengineering/ui'
   import { Filter, KeyFilter } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import { FilterQuery } from '../../filter'
@@ -192,7 +192,7 @@
   }
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="scroll">
     <div class="box">
       {#each getTypes(_class) as type, i}

plugins/view-resources/src/components/filter/ObjectFilter.svelte

@@ -18,7 +18,7 @@
   import presentation, { getClient } from '@hcengineering/presentation'
   import type { State } from '@hcengineering/task'
   import task from '@hcengineering/task'
-  import ui, { Button, CheckBox, Label, Loading } from '@hcengineering/ui'
+  import ui, { Button, CheckBox, Label, Loading, resizeObserver } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { createEventDispatcher, onMount } from 'svelte'
   import view from '../../plugin'
@@ -134,7 +134,7 @@
   getValues(search)
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   {#if clazz.sortingKey}
     <div class="header">
       <input

plugins/view-resources/src/components/filter/TimestampFilter.svelte

@@ -13,8 +13,7 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { closeTooltip } from '@hcengineering/ui'
-
+  import { closeTooltip, resizeObserver } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { createEventDispatcher } from 'svelte'
   import view from '../../plugin'
@@ -54,7 +53,7 @@
   ]
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="scroll">
     <div class="box">
       {#each values as value, i}

plugins/view-resources/src/components/filter/ValueFilter.svelte

@@ -16,7 +16,7 @@
   import { Class, Doc, FindResult, getObjectValue, Ref, SortingOrder } from '@hcengineering/core'
   import { translate } from '@hcengineering/platform'
   import presentation, { getClient } from '@hcengineering/presentation'
-  import ui, { Button, CheckBox, Label, Loading } from '@hcengineering/ui'
+  import ui, { Button, CheckBox, Label, Loading, resizeObserver } from '@hcengineering/ui'
   import { Filter } from '@hcengineering/view'
   import { onMount } from 'svelte'
   import { getPresenter } from '../../utils'
@@ -116,7 +116,7 @@
   getValues(search)
 </script>
 
-<div class="selectPopup">
+<div class="selectPopup" use:resizeObserver={() => dispatch('changeContent')}>
   <div class="header">
     <input
       bind:this={searchInput}

plugins/workbench-resources/src/components/Applications.svelte

@@ -39,7 +39,7 @@
   let shown: boolean = false
 </script>
 
-<div class="flex-row-center clear-mins apps-{direction} relative">
+<div class="flex-{direction === 'horizontal' ? 'row-center' : 'col'} clear-mins apps-{direction} relative">
   {#if loaded}
     <Scroller
       invertScroll