diff --git a/packages/panel/src/components/Panel.svelte b/packages/panel/src/components/Panel.svelte index 38fa886dec..492e1ad618 100644 --- a/packages/panel/src/components/Panel.svelte +++ b/packages/panel/src/components/Panel.svelte @@ -120,24 +120,23 @@ - -
- {#if $$slots.actions} -
- {#if $$slots['actions-label']} - - {/if} -
- -
+ + {#if $$slots.actions} +
+ {#if $$slots['actions-label']} + + {/if} +
+
- {/if} - {#if $$slots['custom-attributes'] && isCustomAttr} - - {:else if $$slots.attributes}{/if} - {#if $$slots.aside}{/if} -
+
+ {/if} + {#if $$slots['custom-attributes'] && isCustomAttr} + + {:else if $$slots.attributes}{/if} + {#if $$slots.aside}{/if} +
{#if withoutActivity} diff --git a/packages/presentation/src/components/AttributeBarEditor.svelte b/packages/presentation/src/components/AttributeBarEditor.svelte index 569a43c2ee..69d4b5b819 100644 --- a/packages/presentation/src/components/AttributeBarEditor.svelte +++ b/packages/presentation/src/components/AttributeBarEditor.svelte @@ -103,6 +103,7 @@ {onChange} {focus} {object} + {size} />
{/if} diff --git a/packages/theme/styles/_layouts.scss b/packages/theme/styles/_layouts.scss index 730f6a8bf2..edb5d0dc1e 100644 --- a/packages/theme/styles/_layouts.scss +++ b/packages/theme/styles/_layouts.scss @@ -254,6 +254,7 @@ input.search { .flex-presenter, .inline-presenter { flex-wrap: nowrap; + min-width: 0; cursor: pointer; .icon { @@ -275,16 +276,19 @@ input.search { overflow: hidden; visibility: visible; - display: -webkit-box; - /* autoprefixer: ignore next */ - -webkit-box-orient: vertical; - -webkit-line-clamp: 2; - line-clamp: 2; user-select: none; + &:not(.nowrap) { + display: -webkit-box; + /* autoprefixer: ignore next */ + -webkit-box-orient: vertical; + -webkit-line-clamp: 2; + line-clamp: 2; + } &.nowrap { white-space: nowrap; text-overflow: ellipsis; + word-break: break-all; } } .action { @@ -735,6 +739,7 @@ a.no-line { } .overflow-label { white-space: nowrap; + word-break: break-all; text-overflow: ellipsis; overflow: hidden; min-width: 0; diff --git a/packages/theme/styles/panel.scss b/packages/theme/styles/panel.scss index d9038f2d77..69ea0720cd 100644 --- a/packages/theme/styles/panel.scss +++ b/packages/theme/styles/panel.scss @@ -220,8 +220,9 @@ top: 0; left: 100%; width: 320px; - height: 100%; min-width: 0; + max-width: 320px; + height: 100%; background-color: var(--board-card-bg-color); border-left: 1px solid var(--divider-color); border-bottom-right-radius: .45rem; diff --git a/packages/ui/src/components/Button.svelte b/packages/ui/src/components/Button.svelte index 8300ea9c15..e6cb2dbb6a 100644 --- a/packages/ui/src/components/Button.svelte +++ b/packages/ui/src/components/Button.svelte @@ -148,9 +148,9 @@ } } .large { - height: 2rem; + height: 2.25rem; &.only-icon { - width: 2rem; + width: 2.25rem; } } .x-large { diff --git a/packages/ui/src/components/calendar/DateRangePresenter.svelte b/packages/ui/src/components/calendar/DateRangePresenter.svelte index 8cd2be8d60..35af473aff 100644 --- a/packages/ui/src/components/calendar/DateRangePresenter.svelte +++ b/packages/ui/src/components/calendar/DateRangePresenter.svelte @@ -553,7 +553,7 @@ &.link { padding: 0 0.875rem; width: 100%; - height: 2rem; + height: 2.25rem; color: var(--caption-color); &:hover { background-color: var(--body-color); diff --git a/plugins/activity-resources/src/components/TxView.svelte b/plugins/activity-resources/src/components/TxView.svelte index e49c4b70d8..e2a14b3ffd 100644 --- a/plugins/activity-resources/src/components/TxView.svelte +++ b/plugins/activity-resources/src/components/TxView.svelte @@ -245,7 +245,7 @@ {#if !hasMessageType} - + {#if value.isObjectSet} {:else} @@ -268,7 +268,7 @@ {#if !hasMessageType} -
+
{#if value.isObjectSet} {:else} @@ -341,6 +341,7 @@ position: relative; display: flex; justify-content: space-between; + min-width: 0; .msgactivity-icon, .msgactivity-avatar { @@ -366,6 +367,7 @@ display: flex; flex-grow: 1; margin-right: 1rem; + min-width: 0; color: var(--content-color); .msgactivity-content__header { @@ -373,11 +375,13 @@ justify-content: space-between; align-items: center; flex-grow: 1; + min-width: 0; } .msgactivity-content__title { display: inline-flex; align-items: baseline; flex-grow: 1; + min-width: 0; } &.content { @@ -465,6 +469,7 @@ .activity-content { overflow: hidden; visibility: visible; + min-width: 0; max-height: max-content; opacity: 1; transition-property: max-height, opacity; diff --git a/plugins/contact-resources/src/components/AccountArrayEditor.svelte b/plugins/contact-resources/src/components/AccountArrayEditor.svelte index b0dbefbcf9..ac6c99ab45 100644 --- a/plugins/contact-resources/src/components/AccountArrayEditor.svelte +++ b/plugins/contact-resources/src/components/AccountArrayEditor.svelte @@ -17,7 +17,7 @@ import core, { Account, Ref } from '@hcengineering/core' import { IntlString } from '@hcengineering/platform' import { createQuery, getClient } from '@hcengineering/presentation' - import { ButtonKind } from '@hcengineering/ui' + import { ButtonKind, ButtonSize } from '@hcengineering/ui' import UserBoxList from './UserBoxList.svelte' export let label: IntlString @@ -25,6 +25,7 @@ export let onChange: (refs: Ref[]) => void export let readonly = false export let kind: ButtonKind = 'link' + export let size: ButtonSize = 'large' export let width: string | undefined = undefined export let excludeItems: Ref[] | undefined = undefined @@ -79,7 +80,7 @@ {readonly} {docQuery} on:update={onUpdate} - size={'medium'} + {size} justify={'left'} width={width ?? 'min-content'} {kind} diff --git a/plugins/task-resources/src/components/state/StateEditor.svelte b/plugins/task-resources/src/components/state/StateEditor.svelte index 59406d5611..574796e24b 100644 --- a/plugins/task-resources/src/components/state/StateEditor.svelte +++ b/plugins/task-resources/src/components/state/StateEditor.svelte @@ -59,7 +59,9 @@ diff --git a/plugins/task-resources/src/components/state/StatePresenter.svelte b/plugins/task-resources/src/components/state/StatePresenter.svelte index 18d5fef532..8d8fbc9ec2 100644 --- a/plugins/task-resources/src/components/state/StatePresenter.svelte +++ b/plugins/task-resources/src/components/state/StatePresenter.svelte @@ -18,24 +18,34 @@ import { getColorNumberByText, getPlatformColor } from '@hcengineering/ui' export let value: State | undefined + export let shouldShowAvatar = true + export let inline: boolean = false {#if value} -
-
- {value.name} +
+ {#if shouldShowAvatar} +
+ {/if} + {value.name}
{/if} diff --git a/plugins/tracker-resources/src/components/components/ComponentEditor.svelte b/plugins/tracker-resources/src/components/components/ComponentEditor.svelte index 78106b7ea9..db6a12e93f 100644 --- a/plugins/tracker-resources/src/components/components/ComponentEditor.svelte +++ b/plugins/tracker-resources/src/components/components/ComponentEditor.svelte @@ -50,6 +50,7 @@ {#if (value.component && value.component !== $activeComponent && groupBy !== 'component') || shouldShowPlaceholder}
-
+
{#if !inline && shouldShowAvatar} -
+
{/if} - + {value.label}
diff --git a/plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte b/plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte index 3d22a51062..642834db35 100644 --- a/plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte +++ b/plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte @@ -202,14 +202,20 @@ {#if keys.length > 0}
{#each keys as key (typeof key === 'string' ? key : key.key)} - + {/each} {/if} {#each mixins as mixin}
{#each getMixinKeys(mixin._id) as key (typeof key === 'string' ? key : key.key)} - + {/each} {/each}
diff --git a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte index 02f252cb4b..9a0bc30028 100644 --- a/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte +++ b/plugins/tracker-resources/src/components/issues/edit/EditIssue.svelte @@ -255,6 +255,7 @@