Remove inline in Inbox. Panel, presenters fixes. (#3665)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
2024-11-22 11:42:30 +03:00 · 2023-09-06 18:52:48 +03:00 · 2023-09-06 18:52:48 +03:00 · 47e39eae75
commit 47e39eae75
parent d7fa8c3800
26 changed files with 121 additions and 89 deletions
--- a/packages/presentation/src/components/AttributeBarEditor.svelte
+++ b/packages/presentation/src/components/AttributeBarEditor.svelte
@ -66,7 +66,7 @@
 {#if editor}
  {#if showHeader}
    <span
-      class="label"
+      class="labelOnPanel"
      use:tooltip={{
        component: Label,
        props: { label: attribute.label }
--- a/packages/presentation/src/components/NavLink.svelte
+++ b/packages/presentation/src/components/NavLink.svelte
@ -23,6 +23,7 @@
  export let colorInherit: boolean = false
  export let shrink: number = 1
  export let accent: boolean = false
+  export let noOverflow: boolean = false

  function clickHandler (e: MouseEvent) {
    if (disabled) return
@ -54,6 +55,7 @@
  <span
    class:cursor-pointer={!disabled}
    class:noUnderline
+    class:noOverflow
    class:inline
    class:colorInherit
    class:fs-bold={accent}
@ -66,6 +68,7 @@
  <a
    {href}
    class:noUnderline
+    class:noOverflow
    class:inline
    class:colorInherit
    class:fs-bold={accent}
@ -82,12 +85,14 @@
    display: flex;
    align-items: center;
    min-width: 0;
-    // overflow: hidden;
-    white-space: nowrap;
-    word-break: break-all;
-    text-overflow: ellipsis;
    font-weight: inherit;

+    &:not(.noOverflow) {
+      overflow: hidden;
+      white-space: nowrap;
+      word-break: break-all;
+      text-overflow: ellipsis;
+    }
    &:not(.colorInherit) {
      color: var(--theme-content-color);
    }
--- a/packages/theme/styles/panel.scss
+++ b/packages/theme/styles/panel.scss
@ -299,11 +299,11 @@
          height: 1px;
          background-color: var(--theme-divider-color);
        }
-        .label,
+        .labelOnPanel,
        .labelTop { color: var(--theme-dark-color); }
        .labelTop {
          align-self: start;
-          margin-top: 0.625rem;
+          margin-top: .4rem;
        }
        .textPadding { margin-left: .875rem; }
      }
--- a/plugins/contact-resources/src/components/OrganizationPresenter.svelte
+++ b/plugins/contact-resources/src/components/OrganizationPresenter.svelte
@ -24,21 +24,22 @@
  export let inline: boolean = false
  export let disabled: boolean = false
  export let accent: boolean = false
+  export let noUnderline: boolean = false
  export let maxWidth = ''
 </script>

 {#if value}
-  <DocNavLink {disabled} {inline} object={value} {accent} noUnderline={disabled}>
+  <DocNavLink {disabled} {inline} object={value} {accent} {noUnderline}>
    {#if inline}
      <span class="antiMention" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
        @{value.name}
      </span>
    {:else}
      <div class="flex-presenter" style:max-width={maxWidth} use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
-        {#if !inline}
-          <div class="icon circle"><Company size={'small'} /></div>
-        {/if}
-        <span class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
+        <div class="icon circle"><Company size={'small'} /></div>
+        <span class="overflow-label label" class:no-underline={noUnderline || disabled} class:fs-bold={accent}
+          >{value.name}</span
+        >
      </div>
    {/if}
  </DocNavLink>
--- a/plugins/contact-resources/src/components/PersonContent.svelte
+++ b/plugins/contact-resources/src/components/PersonContent.svelte
@ -36,6 +36,7 @@
  export let shouldShowName = true
  export let element: HTMLElement | undefined = undefined
  export let shouldShowPlaceholder = false
+  export let noUnderline: boolean = false
  export let defaultName: IntlString | undefined = undefined
  export let statusLabel: IntlString | undefined = undefined
  export let avatarSize: IconSize = 'x-small'
@ -68,7 +69,7 @@
 </script>

 {#if value}
-  <DocNavLink object={value} onClick={onEdit} {disabled} noUnderline={disabled} {inline} {colorInherit} {accent}>
+  <DocNavLink object={value} onClick={onEdit} {disabled} {noUnderline} {inline} {colorInherit} {accent} noOverflow>
    {#if inline}
      <span class="antiMention" use:tooltip={disabled ? undefined : showTooltip}>
        @{getName(client.getHierarchy(), value)}
@ -90,7 +91,7 @@
          </span>
        {/if}
        {#if shouldShowName}
-          <span class="eContentPresenterLabel" class:colorInherit class:fs-bold={accent}
+          <span class="eContentPresenterLabel overflow-label" class:colorInherit class:fs-bold={accent}
            >{getName(client.getHierarchy(), value)}</span
          >
        {/if}
@ -132,6 +133,7 @@
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
+    min-width: 0;

    .eContentPresenterIcon {
      color: var(--theme-dark-color);
@ -141,13 +143,13 @@
      text-align: left;
      color: var(--theme-caption-color);

-      overflow: hidden;
-      display: -webkit-box;
-      /* autoprefixer: ignore next */
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-      line-clamp: 2;
-      user-select: none;
+      // overflow: hidden;
+      // display: -webkit-box;
+      // /* autoprefixer: ignore next */
+      // -webkit-box-orient: vertical;
+      // -webkit-line-clamp: 2;
+      // line-clamp: 2;
+      // user-select: none;

      &.colorInherit {
        color: inherit;
--- a/plugins/contact-resources/src/components/PersonPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonPresenter.svelte
@ -29,6 +29,7 @@
  export let shouldShowAvatar = true
  export let shouldShowName = true
  export let shouldShowPlaceholder = false
+  export let noUnderline = false
  export let defaultName: IntlString | undefined = ui.string.NotSelected
  export let statusLabel: IntlString | undefined = undefined
  export let tooltipLabels: PersonLabelTooltip | undefined = undefined
@ -88,6 +89,7 @@
    {shouldShowAvatar}
    {shouldShowName}
    {shouldShowPlaceholder}
+    {noUnderline}
    {enlargedText}
    {statusLabel}
    {colorInherit}
--- a/plugins/document-resources/src/components/DocumentPresenter.svelte
+++ b/plugins/document-resources/src/components/DocumentPresenter.svelte
@ -25,20 +25,25 @@
  export let inline: boolean = false
  export let disabled: boolean = false
  export let accent: boolean = false
+  export let noUnderline: boolean = false
+  export let maxWidth = ''
 </script>

 {#if value}
-  <DocNavLink {disabled} object={value} {inline} {accent} noUnderline={disabled} component={document.component.EditDoc}>
+  <DocNavLink {disabled} object={value} {inline} {accent} {noUnderline} component={document.component.EditDoc}>
    {#if inline}
      <span class="antiMention" use:tooltip={{ label: document.string.Document }}>
        @{value.name}-{value.version}
      </span>
    {:else}
-      <div class="icon">
-        <Icon icon={document.icon.Document} size={'small'} />
+      <div class="flex-presenter" style:max-width={maxWidth} use:tooltip={{ label: document.string.Document }}>
+        <div class="icon">
+          <Icon icon={document.icon.Document} size={'small'} />
+        </div>
+        <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
+          {value.name}-{value.version}
+        </span>
      </div>
-      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}-{value.version}</span
-      >
    {/if}
  </DocNavLink>
 {/if}
--- a/plugins/document-resources/src/components/EditDoc.svelte
+++ b/plugins/document-resources/src/components/EditDoc.svelte
@ -535,7 +535,7 @@

      <div class="doc-divider" />
      <div class="popupPanel-body__aside-grid">
-        <span class="label labelTop">
+        <span class="labelTop">
          <Label label={document.string.Labels} />
        </span>
        <div class="flex">
@ -545,7 +545,7 @@
          />
        </div>
        <div class="divider" />
-        <span class="label">
+        <span class="labelOnPanel">
          <Label label={document.string.LastRevision} />
        </span>
        <span>{documentObject?.latest}</span>
--- a/plugins/lead-resources/src/components/LeadPresenter.svelte
+++ b/plugins/lead-resources/src/components/LeadPresenter.svelte
@ -23,16 +23,19 @@
  export let inline: boolean = false
  export let disabled: boolean = false
  export let accent: boolean = false
+  export let noUnderline: boolean = false
 </script>

 {#if value}
-  <DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
+  <DocNavLink object={value} {inline} {disabled} {noUnderline} {accent}>
    {#if inline}
      <span class="antiMention" use:tooltip={{ label: lead.string.Lead }}>@LEAD-{value.number}</span>
    {:else}
      <div class="flex-presenter">
        <div class="icon"><Icon icon={lead.icon.Lead} size={'small'} /></div>
-        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>LEAD-{value.number}</span>
+        <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}
+          >LEAD-{value.number}</span
+        >
      </div>
    {/if}
  </DocNavLink>
--- a/plugins/notification-resources/src/components/NotificationView.svelte
+++ b/plugins/notification-resources/src/components/NotificationView.svelte
@ -96,7 +96,7 @@
    >
      <div class="flex-row-center flex-no-shrink mr-8">
        {#if presenter}
-          <svelte:component this={presenter} value={doc} inline accent disabled inbox />
+          <svelte:component this={presenter} value={doc} accent disabled inbox />
        {/if}
        {#if newTxes > 0 && !selected}
          <div class="counter float">{newTxes}</div>
--- a/plugins/notification-resources/src/components/TxView.svelte
+++ b/plugins/notification-resources/src/components/TxView.svelte
@ -161,9 +161,9 @@
                  <span class="lower"><Label label={m.label} /></span>
                  {#each value.added as cvalue}
                    {#if value.isObjectAdded}
-                      <ObjectPresenter value={cvalue} inline />
+                      <ObjectPresenter value={cvalue} />
                    {:else}
-                      <svelte:component this={m.presenter} value={cvalue} inline />
+                      <svelte:component this={m.presenter} value={cvalue} />
                    {/if}
                  {/each}
                {:else if value.removed.length}
@ -172,9 +172,9 @@
                  <span class="lower"><Label label={m.label} /></span>
                  {#each value.removed as cvalue}
                    {#if value.isObjectRemoved}
-                      <ObjectPresenter value={cvalue} inline />
+                      <ObjectPresenter value={cvalue} />
                    {:else}
-                      <svelte:component this={m.presenter} value={cvalue} inline />
+                      <svelte:component this={m.presenter} value={cvalue} />
                    {/if}
                  {/each}
                {:else if value.set === null || value.set === undefined || value.set === ''}
@ -188,9 +188,9 @@
                  {#if !hasMessageType}
                    <span class="strong">
                      {#if value.isObjectSet}
-                        <ObjectPresenter value={value.set} inline accent />
+                        <ObjectPresenter value={value.set} accent />
                      {:else}
-                        <svelte:component this={m.presenter} value={value.set} inline accent />
+                        <svelte:component this={m.presenter} value={value.set} accent />
                      {/if}
                    </span>
                  {/if}
@ -211,9 +211,9 @@
                  {#if !hasMessageType}
                    <div class="strong">
                      {#if value.isObjectSet}
-                        <ObjectPresenter value={value.set} inline accent />
+                        <ObjectPresenter value={value.set} accent />
                      {:else}
-                        <svelte:component this={m.presenter} value={value.set} inline accent />
+                        <svelte:component this={m.presenter} value={value.set} accent />
                      {/if}
                    </div>
                  {/if}
@ -222,9 +222,9 @@
            {/each}
          {:else if viewlet && viewlet.display === 'inline' && viewlet.component}
            {#if typeof viewlet.component === 'string'}
-              <Component is={viewlet.component} {props} inline />
+              <Component is={viewlet.component} {props} />
            {:else}
-              <svelte:component this={viewlet.component} {...props} inline />
+              <svelte:component this={viewlet.component} {...props} />
            {/if}
          {/if}
        </div>
--- a/plugins/recruit-resources/src/components/ApplicationPresenter.svelte
+++ b/plugins/recruit-resources/src/components/ApplicationPresenter.svelte
@ -24,6 +24,7 @@
  export let value: Applicant
  export let inline: boolean = false
  export let disabled: boolean = false
+  export let noUnderline: boolean = false
  export let accent: boolean = false

  const client = getClient()
@ -31,7 +32,7 @@
 </script>

 {#if value && shortLabel}
-  <DocNavLink object={value} {inline} {disabled} noUnderline={disabled} {accent}>
+  <DocNavLink object={value} {inline} {disabled} {noUnderline} {accent}>
    {#if inline}
      <span class="antiMention" use:tooltip={{ label: recruitPlg.string.Application }}>
        @{#if shortLabel}{shortLabel}-{/if}{value.number}
@ -41,7 +42,7 @@
        <div class="icon">
          <Icon icon={recruit.icon.Application} size={'small'} />
        </div>
-        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
+        <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
          {#if shortLabel}{shortLabel}-{/if}{value.number}
        </span>
      </div>
--- a/plugins/recruit-resources/src/components/VacancyPresenter.svelte
+++ b/plugins/recruit-resources/src/components/VacancyPresenter.svelte
@ -26,6 +26,7 @@
  export let inline: boolean = false
  export let disabled: boolean = false
  export let accent: boolean = false
+  export let noUnderline: boolean = false

  const dispatch = createEventDispatcher()
  $: accentColor = getPlatformAvatarColorForTextDef(value.name, $themeStore.dark)
@ -37,14 +38,7 @@
 </script>

 {#if value}
-  <DocNavLink
-    {disabled}
-    object={value}
-    {inline}
-    {accent}
-    noUnderline={disabled}
-    component={recruit.component.EditVacancy}
-  >
+  <DocNavLink {disabled} object={value} {inline} {accent} {noUnderline} component={recruit.component.EditVacancy}>
    {#if inline}
      <span class="antiMention" use:tooltip={{ label: recruit.string.Vacancy }}>
        @{value.name}
@ -52,7 +46,9 @@
    {:else}
      <div class="flex-presenter" use:tooltip={{ label: getEmbeddedLabel(value.name) }}>
        <div class="icon"><Icon icon={recruit.icon.Vacancy} size={'small'} /></div>
-        <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>{value.name}</span>
+        <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}
+          >{value.name}</span
+        >
      </div>
    {/if}
  </DocNavLink>
--- a/plugins/recruit-resources/src/components/review/ReviewPresenter.svelte
+++ b/plugins/recruit-resources/src/components/review/ReviewPresenter.svelte
@ -24,6 +24,7 @@
  export let inline: boolean = false
  export let disabled: boolean = false
  export let accent: boolean = false
+  export let noUnderline: boolean = false

  const client = getClient()

@ -31,12 +32,12 @@
 </script>

 {#if value && label}
-  <DocNavLink object={value} {inline} {disabled} {accent} noUnderline={disabled}>
+  <DocNavLink object={value} {inline} {disabled} {accent} {noUnderline}>
    <div class="flex-presenter" class:inline-presenter={inline}>
      <div class="icon">
        <Icon icon={recruit.icon.Review} size={'small'} />
      </div>
-      <span class="label nowrap" class:no-underline={disabled} class:fs-bold={accent}>
+      <span class="label nowrap" class:no-underline={noUnderline || disabled} class:fs-bold={accent}>
        {label}-{value.number}
      </span>
    </div>
--- a/plugins/task-resources/src/components/state/StatePresenter.svelte
+++ b/plugins/task-resources/src/components/state/StatePresenter.svelte
@ -31,6 +31,7 @@
  export let oneLine: boolean = false
  export let shouldShowName: boolean = true
  export let shouldShowTooltip: boolean = false
+  export let noUnderline: boolean = false

  const dispatch = createEventDispatcher()

@ -57,7 +58,9 @@
      />
    {/if}
    {#if shouldShowName}
-      <span class="overflow-label label" class:nowrap={oneLine} class:no-underline={disabled}>{value.name}</span>
+      <span class="overflow-label label" class:nowrap={oneLine} class:no-underline={noUnderline || disabled}
+        >{value.name}</span
+      >
    {/if}
  </div>
 {/if}
--- a/plugins/tracker-resources/src/components/CreateIssue.svelte
+++ b/plugins/tracker-resources/src/components/CreateIssue.svelte
@ -566,7 +566,7 @@
      searchField={'title'}
      allowDeselect={true}
      showNavigate={false}
-      docProps={{ disabled: true }}
+      docProps={{ disabled: true, noUnderline: true }}
      focusIndex={20000}
    />
  </svelte:fragment>
--- a/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
+++ b/plugins/tracker-resources/src/components/components/ComponentPresenter.svelte
@ -50,9 +50,9 @@
  {#if inline}
    <span class="antiMention" use:tooltip={{ label: tracker.string.Component }}>@{label}</span>
  {:else}
-    <span class="flex-presenter" class:list={kind === 'list'}>
+    <span class="flex-presenter" class:list={kind === 'list'} use:tooltip={{ label: tracker.string.Component }}>
      {#if shouldShowAvatar}
-        <div class="icon" use:tooltip={{ label: tracker.string.Component }}>
+        <div class="icon">
          <Icon icon={tracker.icon.Component} size={'small'} />
        </div>
      {/if}
--- a/plugins/tracker-resources/src/components/issues/RelationEditor.svelte
+++ b/plugins/tracker-resources/src/components/issues/RelationEditor.svelte
@ -21,7 +21,7 @@
  $: classes = Array.from(valueGroup.keys())
 </script>

-<div class="flex-column flex-grow">
+<div class="flex-column flex-grow clear-mins">
  {#each classes as classCategory}
    {@const vals = valueGroup.get(classCategory)}
    {#if vals}
--- a/plugins/tracker-resources/src/components/issues/RelationEditorPart.svelte
+++ b/plugins/tracker-resources/src/components/issues/RelationEditorPart.svelte
@ -87,7 +87,7 @@
        <Icon {icon} size={'small'} />
        <div class="flex-grow">
          <button on:click|stopPropagation={() => handleRedirect(issue)}>
-            <span class="overflow-label ml-1-5 caption-color">{getIssueId(issue.$lookup.space, issue)}</span>
+            <span class="overflow-label ml-1-5 content-color">{getIssueId(issue.$lookup.space, issue)}</span>
          </button>
        </div>
        <button class="btn-close" on:click|stopPropagation={() => handleClick(issue)}>
@ -96,15 +96,11 @@
      </div>
    {/if}
  {:else}
-    <div class="tag-container">
-      <div class="flex-grow">
-        <div class="overflow-label max-w-30">
-          <Component
-            is={view.component.ObjectPresenter}
-            props={{ objectId: doc._id, _class: doc._class, value: doc, inline: true }}
-          />
-        </div>
-      </div>
+    <div class="tag-container between">
+      <Component
+        is={view.component.ObjectPresenter}
+        props={{ objectId: doc._id, _class: doc._class, value: doc, noUnderline: true, props: { avatarSize: 'card' } }}
+      />
      <button class="btn-close" on:click|stopPropagation={() => handleClick(doc)}>
        <Icon icon={IconClose} size={'x-small'} />
      </button>
@ -118,14 +114,20 @@
    display: flex;
    align-items: center;
    // flex-shrink: 0;
-    padding-left: 0.5rem;
+    padding-left: 0.75rem;
    height: 2rem;
    min-width: 0;
    min-height: 0;
+    font-size: 0.8125rem;
    border-radius: 0.25rem;
    // width: fit-content;
    border: 1px solid transparent;
+
+    &.between {
+      justify-content: space-between;
+    }
    &:hover {
+      background-color: var(--theme-button-hovered);
      border-color: var(--theme-divider-color);
    }

--- a/plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte
+++ b/plugins/tracker-resources/src/components/issues/edit/ControlPanel.svelte
@ -95,7 +95,7 @@

 <div class="popupPanel-body__aside-grid">
  {#if issue.template?.template}
-    <span class="label">
+    <span class="labelOnPanel">
      <Label label={tracker.string.IssueTemplate} />
    </span>
    <ObjectBox
@ -114,7 +114,7 @@
    />
  {/if}

-  <span class="label">
+  <span class="labelOnPanel">
    <Label label={tracker.string.Status} />
  </span>

@ -139,12 +139,12 @@
    <RelationEditor value={issue} type="relations" />
  {/if}

-  <span class="label">
+  <span class="labelOnPanel">
    <Label label={tracker.string.Priority} />
  </span>
  <PriorityEditor value={issue} size={'medium'} shouldShowLabel />

-  <span class="label">
+  <span class="labelOnPanel">
    <Label label={core.string.CreatedBy} />
  </span>
  <EmployeeBox
@ -158,7 +158,7 @@
    readonly
  />

-  <span class="label">
+  <span class="labelOnPanel">
    <Label label={tracker.string.Assignee} />
  </span>
  <AssigneeEditor object={issue} size={'medium'} avatarSize={'card'} width="100%" />
@ -170,12 +170,12 @@

  <div class="divider" />

-  <span class="label">
+  <span class="labelOnPanel">
    <Label label={tracker.string.Component} />
  </span>
  <ComponentEditor value={issue} space={issue.space} size={'medium'} />

-  <span class="label">
+  <span class="labelOnPanel">
    <Label label={tracker.string.Milestone} />
  </span>
  <MilestoneEditor value={issue} space={issue.space} size={'medium'} />
@ -183,7 +183,7 @@
  {#if issue.dueDate !== null}
    <div class="divider" />

-    <span class="label">
+    <span class="labelOnPanel">
      <Label label={tracker.string.DueDate} />
    </span>
    <DueDateEditor value={issue} width={'100%'} />
--- a/plugins/tracker-resources/src/components/milestones/MilestonePresenter.svelte
+++ b/plugins/tracker-resources/src/components/milestones/MilestonePresenter.svelte
@ -31,6 +31,7 @@
  export let disabled = false
  export let inline = false
  export let accent: boolean = false
+  export let noUnderline: boolean = false
  export let onClick: (() => void) | undefined = undefined

  const dispatch = createEventDispatcher()
@ -46,17 +47,22 @@
 </script>

 {#if value}
-  <DocNavLink object={value} {disabled} {inline} {accent} noUnderline={disabled} {onClick}>
+  <DocNavLink object={value} {disabled} {inline} {accent} {noUnderline} {onClick}>
    {#if inline}
      <span class="antiMention" use:tooltip={{ label: tracker.string.Milestone }}>@{value.label}</span>
    {:else}
-      <div class="flex-presenter">
+      <div class="flex-presenter" use:tooltip={{ label: tracker.string.Milestone }}>
        {#if shouldShowAvatar}
          <div class="icon">
            <Icon icon={tracker.icon.Milestone} size="small" />
          </div>
        {/if}
-        <span title={value.label} class="overflow-label label" class:no-underline={disabled} class:fs-bold={accent}>
+        <span
+          title={value.label}
+          class="overflow-label label"
+          class:no-underline={noUnderline || disabled}
+          class:fs-bold={accent}
+        >
          {value.label}
        </span>
      </div>
--- a/plugins/tracker-resources/src/components/templates/IssueTemplatePresenter.svelte
+++ b/plugins/tracker-resources/src/components/templates/IssueTemplatePresenter.svelte
@ -65,7 +65,9 @@
      cursor: pointer;
    }

-    &.noUnderline {
+    &.noUnderline,
+    &.noUnderline:hover {
+      text-decoration: none;
      color: var(--theme-caption-color);
    }

--- a/plugins/tracker-resources/src/components/templates/TemplateControlPanel.svelte
+++ b/plugins/tracker-resources/src/components/templates/TemplateControlPanel.svelte
@ -65,12 +65,12 @@
 </script>

 <div class="popupPanel-body__aside-grid">
-  <span class="label">
+  <span class="labelOnPanel">
    <Label label={tracker.string.Priority} />
  </span>
  <PriorityEditor value={issue} size={'medium'} shouldShowLabel />

-  <span class="label">
+  <span class="labelOnPanel">
    <Label label={tracker.string.Assignee} />
  </span>
  <AssigneeEditor object={issue} size={'medium'} width="100%" />
@ -99,13 +99,13 @@

  <div class="divider" />

-  <span class="label">
+  <span class="labelOnPanel">
    <Label label={tracker.string.Component} />
  </span>
  <ComponentEditor value={issue} size={'medium'} />

  {#if issue.milestone}
-    <span class="label">
+    <span class="labelOnPanel">
      <Label label={tracker.string.Milestone} />
    </span>
    <MilestoneEditor value={issue} size={'medium'} />
--- a/plugins/view-resources/src/components/DocNavLink.svelte
+++ b/plugins/view-resources/src/components/DocNavLink.svelte
@ -29,6 +29,7 @@
  export let props: Record<string, any> = {}
  export let shrink: number = 1
  export let accent: boolean = false
+  export let noOverflow: boolean = false

  const client = getClient()
  const hierarchy = client.getHierarchy()
@ -50,4 +51,6 @@
  $: if (object !== undefined) getHref(object)
 </script>

-<NavLink {disabled} {onClick} {noUnderline} {inline} {shrink} {href} {colorInherit} {accent}><slot /></NavLink>
+<NavLink {disabled} {onClick} {noUnderline} {inline} {shrink} {href} {colorInherit} {accent} {noOverflow}
+  ><slot /></NavLink
+>
--- a/plugins/view-resources/src/components/ObjectBox.svelte
+++ b/plugins/view-resources/src/components/ObjectBox.svelte
@ -142,7 +142,7 @@
              objectId={selected._id}
              _class={selected._class}
              value={selected}
-              props={{ ...docProps, disabled: true, noUnderline: true, size: 'x-small' }}
+              props={{ ...docProps, disabled: true, noUnderline: true, size: 'x-small', shouldShowAvatar: false }}
            />
          {:else}
            <Label {label} />
--- a/plugins/view-resources/src/components/ObjectPresenter.svelte
+++ b/plugins/view-resources/src/components/ObjectPresenter.svelte
@ -70,11 +70,11 @@
  <svelte:component
    this={presenter.presenter}
    value={doc}
-    {...props}
    {inline}
    {accent}
    {shouldShowAvatar}
    {noUnderline}
+    {...props}
    on:accent-color
  />
 {/if}