From 7fb96fc03d28d51d58141ee68fe3b28975586de7 Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Fri, 3 Oct 2025 11:41:02 +0700
Subject: [PATCH 1/4] Decrease padding and add type tooltip

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../card-resources/src/components/ColoredCardIcon.svelte  | 5 +++--
 plugins/card-resources/src/components/EditCardNew.svelte  | 8 ++++----
 .../src/components/FeedCardPresenter.svelte               | 2 --
 3 files changed, 7 insertions(+), 8 deletions(-)

diff --git a/plugins/card-resources/src/components/ColoredCardIcon.svelte b/plugins/card-resources/src/components/ColoredCardIcon.svelte
index 5db0f8d2772..3c8707f462d 100644
--- a/plugins/card-resources/src/components/ColoredCardIcon.svelte
+++ b/plugins/card-resources/src/components/ColoredCardIcon.svelte
@@ -15,7 +15,7 @@
 <script lang="ts">
   import cardPlugin, { Card, MasterTag } from '@hcengineering/card'
   import { getClient } from '@hcengineering/presentation'
-  import { Component, getPlatformColorDef, themeStore } from '@hcengineering/ui'
+  import { Component, getPlatformColorDef, themeStore, tooltip } from '@hcengineering/ui'
   import communication from '@hcengineering/communication'
 
   import NotifyMarker from './NotifyMarker.svelte'
@@ -32,6 +32,7 @@
   $: clazz = hierarchy.getClass(card._class) as MasterTag
   $: color = clazz.background ?? 0
   $: platformColor = getPlatformColorDef(color, $themeStore.dark)
+  $: typeName = clazz.label
 
   function getIconStyle (platformColor: any): string {
     return `
@@ -43,7 +44,7 @@
   }
 </script>
 
-<div class="card-icon" style={getIconStyle(platformColor)}>
+<div class="card-icon" style={getIconStyle(platformColor)} use:tooltip={{ label: typeName }}>
   <Component is={cardPlugin.component.CardIcon} props={{ value: card, size }} />
 
   {#if count > 0}
diff --git a/plugins/card-resources/src/components/EditCardNew.svelte b/plugins/card-resources/src/components/EditCardNew.svelte
index 49dc2eb5160..96529bf308c 100644
--- a/plugins/card-resources/src/components/EditCardNew.svelte
+++ b/plugins/card-resources/src/components/EditCardNew.svelte
@@ -109,7 +109,7 @@
   let element: HTMLElement
   let titleEl: HTMLElement | null = null
   let extraEl: HTMLElement | null = null
-  let showParents: boolean = !$deviceInfo.isMobile
+  let expandedParents: boolean = !$deviceInfo.isMobile
   let dropdownTags: boolean = false
 
   const shrinkElement = (el: 'title' | 'extra'): void => {
@@ -135,8 +135,8 @@
     } else if (headerWidth >= DROPDOWN_POINT && !extraEl.classList.contains('flex-shrink-15')) {
       shrinkElement('extra')
     }
-    if (headerWidth < NO_PARENTS_POINT && showParents) showParents = false
-    else if (headerWidth >= NO_PARENTS_POINT && !showParents) showParents = !$deviceInfo.isMobile
+    if (headerWidth < NO_PARENTS_POINT && expandedParents) expandedParents = false
+    else if (headerWidth >= NO_PARENTS_POINT && !expandedParents) expandedParents = !$deviceInfo.isMobile
   }
 
   afterUpdate(() => {
@@ -172,7 +172,7 @@
     </svelte:fragment>
 
     <svelte:fragment slot="title">
-      {#if showParents}
+      {#if expandedParents}
         <ParentNamesPresenter value={doc} maxWidth={'12rem'} />
       {/if}
       <div class="title flex-row-center">
diff --git a/plugins/card-resources/src/components/FeedCardPresenter.svelte b/plugins/card-resources/src/components/FeedCardPresenter.svelte
index 05dcd7ec3e3..1a7412ccaa0 100644
--- a/plugins/card-resources/src/components/FeedCardPresenter.svelte
+++ b/plugins/card-resources/src/components/FeedCardPresenter.svelte
@@ -214,14 +214,12 @@
 
     &__message {
       display: flex;
-      min-height: 1.375rem;
       color: var(--global-secondary-TextColor);
     }
 
     &__parent {
       display: flex;
       align-items: center;
-      margin-top: 0.5rem;
 
       &.wrap {
         flex-wrap: wrap;

From 36779c30acf9b1440c5bfcf3272975eb76df26c3 Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Fri, 3 Oct 2025 11:45:39 +0700
Subject: [PATCH 2/4] Clean up

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../card-resources/src/components/ColoredCardIcon.svelte  | 3 +--
 plugins/card-resources/src/components/EditCardNew.svelte  | 8 ++++----
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/plugins/card-resources/src/components/ColoredCardIcon.svelte b/plugins/card-resources/src/components/ColoredCardIcon.svelte
index 3c8707f462d..a2f8cc3d83f 100644
--- a/plugins/card-resources/src/components/ColoredCardIcon.svelte
+++ b/plugins/card-resources/src/components/ColoredCardIcon.svelte
@@ -32,7 +32,6 @@
   $: clazz = hierarchy.getClass(card._class) as MasterTag
   $: color = clazz.background ?? 0
   $: platformColor = getPlatformColorDef(color, $themeStore.dark)
-  $: typeName = clazz.label
 
   function getIconStyle (platformColor: any): string {
     return `
@@ -44,7 +43,7 @@
   }
 </script>
 
-<div class="card-icon" style={getIconStyle(platformColor)} use:tooltip={{ label: typeName }}>
+<div class="card-icon" style={getIconStyle(platformColor)} use:tooltip={{ label: clazz.label }}>
   <Component is={cardPlugin.component.CardIcon} props={{ value: card, size }} />
 
   {#if count > 0}
diff --git a/plugins/card-resources/src/components/EditCardNew.svelte b/plugins/card-resources/src/components/EditCardNew.svelte
index 96529bf308c..49dc2eb5160 100644
--- a/plugins/card-resources/src/components/EditCardNew.svelte
+++ b/plugins/card-resources/src/components/EditCardNew.svelte
@@ -109,7 +109,7 @@
   let element: HTMLElement
   let titleEl: HTMLElement | null = null
   let extraEl: HTMLElement | null = null
-  let expandedParents: boolean = !$deviceInfo.isMobile
+  let showParents: boolean = !$deviceInfo.isMobile
   let dropdownTags: boolean = false
 
   const shrinkElement = (el: 'title' | 'extra'): void => {
@@ -135,8 +135,8 @@
     } else if (headerWidth >= DROPDOWN_POINT && !extraEl.classList.contains('flex-shrink-15')) {
       shrinkElement('extra')
     }
-    if (headerWidth < NO_PARENTS_POINT && expandedParents) expandedParents = false
-    else if (headerWidth >= NO_PARENTS_POINT && !expandedParents) expandedParents = !$deviceInfo.isMobile
+    if (headerWidth < NO_PARENTS_POINT && showParents) showParents = false
+    else if (headerWidth >= NO_PARENTS_POINT && !showParents) showParents = !$deviceInfo.isMobile
   }
 
   afterUpdate(() => {
@@ -172,7 +172,7 @@
     </svelte:fragment>
 
     <svelte:fragment slot="title">
-      {#if expandedParents}
+      {#if showParents}
         <ParentNamesPresenter value={doc} maxWidth={'12rem'} />
       {/if}
       <div class="title flex-row-center">

From ae7d39a8c2c2cad5874f79291d22e1739906513d Mon Sep 17 00:00:00 2001
From: Artem Savchenko <armisav@gmail.com>
Date: Fri, 3 Oct 2025 14:08:04 +0700
Subject: [PATCH 3/4] Add card parent in sidebar

Signed-off-by: Artem Savchenko <armisav@gmail.com>
---
 .../src/components/CardWidget.svelte          |  2 +
 .../src/components/EditCardNew.svelte         | 10 ++---
 .../components/ParentNamesPresenter.svelte    | 38 ++++++++++++++-----
 3 files changed, 35 insertions(+), 15 deletions(-)

diff --git a/plugins/card-resources/src/components/CardWidget.svelte b/plugins/card-resources/src/components/CardWidget.svelte
index e047c7c592d..4e494a244bf 100644
--- a/plugins/card-resources/src/components/CardWidget.svelte
+++ b/plugins/card-resources/src/components/CardWidget.svelte
@@ -26,6 +26,7 @@
   import EditCardNewContent from './EditCardNewContent.svelte'
   import { showMenu } from '@hcengineering/view-resources'
   import TagsEditor from './TagsEditor.svelte'
+  import ParentNamesPresenter from './ParentNamesPresenter.svelte'
 
   export let widget: Widget | undefined
   export let tab: WidgetTab | undefined
@@ -107,6 +108,7 @@
             dispatch('close')
           }}
         />
+        <ParentNamesPresenter value={doc} compact={true} />
       </svelte:fragment>
 
       <svelte:fragment slot="actions">
diff --git a/plugins/card-resources/src/components/EditCardNew.svelte b/plugins/card-resources/src/components/EditCardNew.svelte
index 49dc2eb5160..8f2e8861dfa 100644
--- a/plugins/card-resources/src/components/EditCardNew.svelte
+++ b/plugins/card-resources/src/components/EditCardNew.svelte
@@ -109,7 +109,7 @@
   let element: HTMLElement
   let titleEl: HTMLElement | null = null
   let extraEl: HTMLElement | null = null
-  let showParents: boolean = !$deviceInfo.isMobile
+  let expandedParents: boolean = !$deviceInfo.isMobile
   let dropdownTags: boolean = false
 
   const shrinkElement = (el: 'title' | 'extra'): void => {
@@ -135,8 +135,8 @@
     } else if (headerWidth >= DROPDOWN_POINT && !extraEl.classList.contains('flex-shrink-15')) {
       shrinkElement('extra')
     }
-    if (headerWidth < NO_PARENTS_POINT && showParents) showParents = false
-    else if (headerWidth >= NO_PARENTS_POINT && !showParents) showParents = !$deviceInfo.isMobile
+    if (headerWidth < NO_PARENTS_POINT && expandedParents) expandedParents = false
+    else if (headerWidth >= NO_PARENTS_POINT && !expandedParents) expandedParents = !$deviceInfo.isMobile
   }
 
   afterUpdate(() => {
@@ -172,9 +172,7 @@
     </svelte:fragment>
 
     <svelte:fragment slot="title">
-      {#if showParents}
-        <ParentNamesPresenter value={doc} maxWidth={'12rem'} />
-      {/if}
+      <ParentNamesPresenter value={doc} maxWidth={'12rem'} compact={!expandedParents} />
       <div class="title flex-row-center">
         {#if !_readonly}
           <EditBox
diff --git a/plugins/card-resources/src/components/ParentNamesPresenter.svelte b/plugins/card-resources/src/components/ParentNamesPresenter.svelte
index 1cbce0a085c..557bc99094e 100644
--- a/plugins/card-resources/src/components/ParentNamesPresenter.svelte
+++ b/plugins/card-resources/src/components/ParentNamesPresenter.svelte
@@ -22,10 +22,11 @@
   export let value: Card | undefined
 
   export let maxWidth = ''
+  export let compact = false
 
   const MIN_WIDTH = 2 // rem
 
-  function getHref (parentInfo: ParentInfo) {
+  function getHref (parentInfo: ParentInfo): string {
     const loc = getCurrentLocation()
     loc.path[2] = cardId
     loc.path[3] = parentInfo._id
@@ -35,26 +36,39 @@
   }
 </script>
 
-{#if value && Array.isArray(value.parentInfo) && (value.parentInfo.length > 0 || $$slots.default)}
+{#if value != null && Array.isArray(value.parentInfo) && (value.parentInfo.length > 0 || $$slots.default)}
   <div
     class="cards-container cropped-text-presenters"
+    class:compact
     style:max-width={maxWidth}
     style:--cards-container-card-min-width={`${MIN_WIDTH}rem`}
     style:--cards-container-parents={value.parentInfo.length}
   >
-    {#each value.parentInfo as parentInfo}
-      <!-- svelte-ignore a11y-click-events-have-key-events -->
-      <!-- svelte-ignore a11y-no-static-element-interactions -->
+    {#if !compact}
+      {#each value.parentInfo as parentInfo}
+        <NavLink
+          href={getHref(parentInfo)}
+          title={parentInfo.title}
+          shrink={parentInfo.title.length > 100 ? 2 : 1}
+          colorInherit
+        >
+          {parentInfo.title}
+        </NavLink>
+        <span class="separator">›</span>
+      {/each}
+    {:else}
+      {@const parentInfo = value.parentInfo[0]}
+      {@const shortTitle = parentInfo.title.charAt(0) + '...'}
       <NavLink
         href={getHref(parentInfo)}
         title={parentInfo.title}
         shrink={parentInfo.title.length > 100 ? 2 : 1}
         colorInherit
       >
-        {parentInfo.title}
+        {shortTitle}
       </NavLink>
-      <span class="separator">›</span>
-    {/each}
+      <span class="separator compact">›</span>
+    {/if}
     <slot />
   </div>
 {:else if $$slots.default}
@@ -66,17 +80,23 @@
     display: inline-flex;
     flex-shrink: 1;
     margin-left: 0;
-    min-width: 0;
     min-width: calc(
       (var(--cards-container-card-min-width, 2rem) + 1.26rem) * var(--cards-container-parents, 1) +
         var(--cards-container-card-min-width, 2rem)
     );
     color: var(--theme-darker-color);
 
+    &.compact {
+      min-width: 1rem;
+    }
+
     .separator {
       flex-shrink: 0;
       padding: 0 0.5rem;
       color: var(--theme-content-color);
+      &.compact {
+        padding: 0 0.5rem 0 0;
+      }
     }
     :global(a:hover) {
       color: var(--theme-caption-color);

From 6039af18ec13beccbe47e3c8b44b6ccb464d9270 Mon Sep 17 00:00:00 2001
From: Artyom Savchenko <armisav@gmail.com>
Date: Fri, 3 Oct 2025 14:42:02 +0700
Subject: [PATCH 4/4] Handle empty title

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
Signed-off-by: Artyom Savchenko <armisav@gmail.com>
---
 .../card-resources/src/components/ParentNamesPresenter.svelte   | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/plugins/card-resources/src/components/ParentNamesPresenter.svelte b/plugins/card-resources/src/components/ParentNamesPresenter.svelte
index 557bc99094e..0ec37dcbcde 100644
--- a/plugins/card-resources/src/components/ParentNamesPresenter.svelte
+++ b/plugins/card-resources/src/components/ParentNamesPresenter.svelte
@@ -58,7 +58,7 @@
       {/each}
     {:else}
       {@const parentInfo = value.parentInfo[0]}
-      {@const shortTitle = parentInfo.title.charAt(0) + '...'}
+      {@const shortTitle = (parentInfo.title?.charAt(0) ?? '') + '...'}
       <NavLink
         href={getHref(parentInfo)}
         title={parentInfo.title}