From 50ea19703ca315101e11970c4e46fd4ca578f242 Mon Sep 17 00:00:00 2001
From: Kristina <kristin.fefelova@gmail.com>
Date: Wed, 18 Jun 2025 22:28:47 +0400
Subject: [PATCH] Add card ui fixes (#9301)

---
 communication                                 |  2 +-
 .../src/components/CardTagColored.svelte      | 29 +++++++-
 .../src/components/CardTagsColored.svelte}    |  8 +--
 .../src/components/CardWidget.svelte          | 71 +++++++++++++++++--
 .../src/components/EditCardNew.svelte         | 26 +++++--
 .../components/EditCardTableOfContents.svelte |  7 +-
 .../src/components/MasterTagSelector.svelte   | 32 ++-------
 .../src/components/TagsEditor.svelte          | 51 +++----------
 .../sections/AttachmentsSection.svelte        |  2 +-
 .../sections/ChildrenSection.svelte           |  2 +-
 .../components/sections/ContentSection.svelte |  2 +-
 .../sections/PropertiesSection.svelte         |  2 +-
 .../sections/RelationsSection.svelte          |  2 +-
 plugins/card-resources/src/index.ts           |  4 +-
 plugins/card/src/index.ts                     |  3 +-
 .../src/components/DateSeparator.svelte       |  6 +-
 .../message/MessagePresenter.svelte           |  4 +-
 .../components/message/MessageReplies.svelte  |  5 +-
 .../components/ProcessesCardSection.svelte    |  2 +-
 .../src/components/toc/TableOfContents.svelte | 10 ++-
 20 files changed, 162 insertions(+), 108 deletions(-)
 rename plugins/{communication-resources/src/components/message/Tags.svelte => card-resources/src/components/CardTagsColored.svelte} (81%)

diff --git a/communication b/communication
index d7bbbc7723..6f4b14aff7 160000
--- a/communication
+++ b/communication
@@ -1 +1 @@
-Subproject commit d7bbbc7723598a41361dcffd4080e0a954c1fd2c
+Subproject commit 6f4b14aff7ab544d9f97a1987a640faac5642581
diff --git a/plugins/card-resources/src/components/CardTagColored.svelte b/plugins/card-resources/src/components/CardTagColored.svelte
index 93ff6ee4f0..f616271244 100644
--- a/plugins/card-resources/src/components/CardTagColored.svelte
+++ b/plugins/card-resources/src/components/CardTagColored.svelte
@@ -13,11 +13,23 @@
 
 <script lang="ts">
   import { getEmbeddedLabel, IntlString } from '@hcengineering/platform'
-  import { getPlatformColorDef, themeStore, tooltip, ColorDefinition, Label } from '@hcengineering/ui'
+  import {
+    getPlatformColorDef,
+    themeStore,
+    tooltip,
+    ColorDefinition,
+    Label,
+    IconClose,
+    ButtonIcon
+  } from '@hcengineering/ui'
+  import { createEventDispatcher } from 'svelte'
 
   export let labelIntl: IntlString | undefined = undefined
   export let label: string | undefined = undefined
   export let color: number | undefined = undefined
+  export let removable: boolean = false
+
+  const dispatch = createEventDispatcher()
 
   function getColorDefinition (color: number | undefined): ColorDefinition {
     return getPlatformColorDef(color ?? 0, $themeStore.dark)
@@ -35,6 +47,7 @@
 <!-- svelte-ignore a11y-no-static-element-interactions -->
 <div
   class="tag"
+  class:removable
   style={`${getTagStyle(getColorDefinition(color))}`}
   on:click
   on:keydown
@@ -49,6 +62,10 @@
       {label}
     {/if}
   </span>
+
+  {#if removable}
+    <ButtonIcon icon={IconClose} size="min" iconSize="x-small" kind="tertiary" on:click={() => dispatch('remove')} />
+  {/if}
 </div>
 
 <style lang="scss">
@@ -60,9 +77,15 @@
     min-width: 2rem;
     max-width: 10rem;
     min-height: 1.5rem;
-    font-size: 0.75rem;
-    //overflow: hidden;
+    font-size: 0.688rem;
+    font-weight: 500;
     border-radius: 1rem;
     white-space: nowrap;
+    gap: 0.25rem;
+
+    &.removable {
+      min-width: 3.25rem;
+      padding-right: 0.25rem;
+    }
   }
 </style>
diff --git a/plugins/communication-resources/src/components/message/Tags.svelte b/plugins/card-resources/src/components/CardTagsColored.svelte
similarity index 81%
rename from plugins/communication-resources/src/components/message/Tags.svelte
rename to plugins/card-resources/src/components/CardTagsColored.svelte
index 229aec9f13..187966ed1b 100644
--- a/plugins/communication-resources/src/components/message/Tags.svelte
+++ b/plugins/card-resources/src/components/CardTagsColored.svelte
@@ -14,8 +14,8 @@
 <script lang="ts">
   import { Class, ClassifierKind, Doc, Mixin, Ref } from '@hcengineering/core'
   import { getClient } from '@hcengineering/presentation'
-  import { Component, Icon, Label, themeStore, tooltip } from '@hcengineering/ui'
-  import cardPlugin, { Card, MasterTag, Tag } from '@hcengineering/card'
+  import { Card, MasterTag, Tag } from '@hcengineering/card'
+  import CardTagColored from './CardTagColored.svelte'
 
   export let value: Card
 
@@ -37,11 +37,11 @@
 </script>
 
 <div class="tags-container">
-  <Component is={cardPlugin.component.CardTagColored} props={{ labelIntl: type.label, color: type.background }} />
+  <CardTagColored labelIntl={type.label} color={type.background} />
   {#if tags.length > 0}
     <div class="divider" />
     {#each tags as tag}
-      <Component is={cardPlugin.component.CardTagColored} props={{ labelIntl: tag.label, color: tag.background }} />
+      <CardTagColored labelIntl={tag.label} color={tag.background} />
     {/each}
   {/if}
 </div>
diff --git a/plugins/card-resources/src/components/CardWidget.svelte b/plugins/card-resources/src/components/CardWidget.svelte
index f68489b40e..084190028f 100644
--- a/plugins/card-resources/src/components/CardWidget.svelte
+++ b/plugins/card-resources/src/components/CardWidget.svelte
@@ -15,16 +15,17 @@
 <script lang="ts">
   import { closeWidget } from '@hcengineering/workbench-resources'
   import { Widget, WidgetTab } from '@hcengineering/workbench'
-  import { createQuery, createNotificationContextsQuery } from '@hcengineering/presentation'
+  import { createQuery, createNotificationContextsQuery, getClient } from '@hcengineering/presentation'
   import { NotificationContext } from '@hcengineering/communication-types'
   import { createEventDispatcher } from 'svelte'
   import { Card } from '@hcengineering/card'
   import { Ref } from '@hcengineering/core'
-  import { Button, Header, IconClose } from '@hcengineering/ui'
+  import { Button, EditBox, Header, IconClose, IconMoreH } from '@hcengineering/ui'
 
   import card from '../plugin'
-  import CardPresenter from './CardPresenter.svelte'
   import EditCardNewContent from './EditCardNewContent.svelte'
+  import { showMenu } from '@hcengineering/view-resources'
+  import TagsEditor from './TagsEditor.svelte'
 
   export let widget: Widget | undefined
   export let tab: WidgetTab | undefined
@@ -39,6 +40,9 @@
   let context: NotificationContext | undefined = undefined
   let isContextLoaded = false
 
+  let title: string = ''
+  let isTitleEditing = false
+
   $: if (widget === undefined || tab === undefined) {
     closeWidget(card.ids.CardWidget as Ref<Widget>)
   }
@@ -52,6 +56,9 @@
           closeWidget(card.ids.CardWidget as Ref<Widget>)
         } else {
           doc = res[0]
+          if (!isTitleEditing) {
+            title = doc.title
+          }
         }
       },
       { limit: 1 }
@@ -62,10 +69,31 @@
       context = res.getResult()[0]
       isContextLoaded = true
     })
+
+  async function saveTitle (ev: Event): Promise<void> {
+    ev.preventDefault()
+    isTitleEditing = false
+    const client = getClient()
+    const trimmedTitle = title.trim()
+    const canSave = trimmedTitle.length > 0
+
+    if (doc === undefined || !canSave) {
+      title = doc?.title ?? title
+      return
+    }
+
+    if (trimmedTitle !== doc.title) {
+      await client.update(doc, { title: trimmedTitle })
+    } else {
+      title = doc.title
+    }
+  }
+
+  let clientWidth = 0
 </script>
 
 {#if widget && tab?.id}
-  <div class="card-widget" style:width style:height>
+  <div class="card-widget" style:height bind:clientWidth>
     <Header type={'type-panel'} noPrint adaptive="disabled">
       <svelte:fragment slot="beforeTitle">
         <Button
@@ -80,7 +108,34 @@
           }}
         />
       </svelte:fragment>
-      <CardPresenter value={doc} noUnderline />
+
+      <svelte:fragment slot="actions">
+        <Button
+          icon={IconMoreH}
+          iconProps={{ size: 'medium' }}
+          kind="icon"
+          dataId="btnMoreActions"
+          on:click={(e) => {
+            showMenu(e, { object: doc })
+          }}
+        />
+      </svelte:fragment>
+      <div class="title flex-row-center">
+        <EditBox
+          focusIndex={1}
+          bind:value={title}
+          placeholder={card.string.Card}
+          on:blur={saveTitle}
+          on:value={() => {
+            isTitleEditing = true
+          }}
+        />
+      </div>
+      <svelte:fragment slot="extra">
+        {#if doc}
+          <TagsEditor {doc} dropdownTags={clientWidth < 512} id={'cardSidebar-tags'} />
+        {/if}
+      </svelte:fragment>
     </Header>
     {#if doc}
       <EditCardNewContent _id={doc._id} {doc} {context} {isContextLoaded} />
@@ -96,4 +151,10 @@
     min-width: 0;
     min-height: 0;
   }
+
+  .title {
+    font-size: 1rem;
+    flex: 1;
+    min-width: 2rem;
+  }
 </style>
diff --git a/plugins/card-resources/src/components/EditCardNew.svelte b/plugins/card-resources/src/components/EditCardNew.svelte
index c2c2168974..e9bcf867df 100644
--- a/plugins/card-resources/src/components/EditCardNew.svelte
+++ b/plugins/card-resources/src/components/EditCardNew.svelte
@@ -60,18 +60,22 @@
   let isContextLoaded = false
 
   let title: string = ''
+  let isTitleEditing = false
   let prevId: Ref<Card> = _id
 
   $: if (prevId !== _id) {
     prevId = _id
     context = undefined
     isContextLoaded = false
+    isTitleEditing = false
   }
 
   $: query.query(card.class.Card, { _id }, async (result) => {
     if (result.length > 0) {
       ;[doc] = result
-      title = doc.title
+      if (!isTitleEditing) {
+        title = doc.title
+      }
     } else {
       const loc = getCurrentLocation()
       loc.path.length = 3
@@ -86,17 +90,17 @@
 
   async function saveTitle (ev: Event): Promise<void> {
     ev.preventDefault()
+    isTitleEditing = false
     const client = getClient()
+    const trimmedTitle = title.trim()
+    const canSave = trimmedTitle.length > 0
 
-    const canSave = title.trim().length > 0
     if (doc === undefined || !canSave) {
       return
     }
 
-    const nameTrimmed = title.trim()
-
-    if (nameTrimmed.length > 0 && nameTrimmed !== doc.title) {
-      await client.update(doc, { title: nameTrimmed })
+    if (trimmedTitle !== doc.title) {
+      await client.update(doc, { title: trimmedTitle })
     }
   }
 
@@ -164,7 +168,15 @@
         <ParentsNavigator element={doc} maxWidth={'10rem'} />
       {/if}
       <div class="title flex-row-center">
-        <EditBox focusIndex={1} bind:value={title} placeholder={card.string.Card} on:blur={saveTitle} />
+        <EditBox
+          focusIndex={1}
+          bind:value={title}
+          placeholder={card.string.Card}
+          on:blur={saveTitle}
+          on:value={() => {
+            isTitleEditing = true
+          }}
+        />
       </div>
     </svelte:fragment>
 
diff --git a/plugins/card-resources/src/components/EditCardTableOfContents.svelte b/plugins/card-resources/src/components/EditCardTableOfContents.svelte
index bc527dabdf..d54e7b1ee5 100644
--- a/plugins/card-resources/src/components/EditCardTableOfContents.svelte
+++ b/plugins/card-resources/src/components/EditCardTableOfContents.svelte
@@ -204,6 +204,7 @@
         <TableOfContents
           items={toc}
           selected={toc.find((it) => it.id === selectedToc?.id)}
+          position="right"
           on:select={(evt) => {
             onNavigationClick(evt.detail)
           }}
@@ -269,10 +270,12 @@
   .toc-container {
     position: absolute;
     pointer-events: none;
-    inset: 0;
+    //inset: 0;
     z-index: 1;
     top: 0;
-    left: 0.5rem;
+    right: 0.75rem;
+    width: 2rem;
+    height: fit-content;
 
     &.hidden {
       display: none;
diff --git a/plugins/card-resources/src/components/MasterTagSelector.svelte b/plugins/card-resources/src/components/MasterTagSelector.svelte
index 1377067d2b..f7bb4ff58f 100644
--- a/plugins/card-resources/src/components/MasterTagSelector.svelte
+++ b/plugins/card-resources/src/components/MasterTagSelector.svelte
@@ -13,9 +13,10 @@
 // limitations under the License.
 -->
 <script lang="ts">
-  import { Card } from '@hcengineering/card'
+  import { Card, MasterTag } from '@hcengineering/card'
   import { getClient } from '@hcengineering/presentation'
-  import { Label } from '@hcengineering/ui'
+
+  import CardTagColored from './CardTagColored.svelte'
 
   export let value: Card
 
@@ -24,29 +25,8 @@
   const client = getClient()
   const hierarchy = client.getHierarchy()
 
-  $: label = hierarchy.getClass(selected).label
+  $: clazz = hierarchy.getClass(selected) as MasterTag
+  $: label = clazz.label
 </script>
 
-<div class="flex flex-gap-2 items-center item caption-color">
-  <div class="tag">
-    <Label {label} />
-  </div>
-</div>
-
-<style lang="scss">
-  .tag {
-    padding: 0.25rem 0.5rem 0.25rem 0.5rem;
-    height: 1.5rem;
-    border: 1px solid var(--theme-content-color);
-
-    border-radius: 6rem;
-
-    color: var(--theme-caption-color);
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 0.25rem;
-    white-space: nowrap;
-  }
-</style>
+<CardTagColored labelIntl={label} color={clazz.background ?? 0} />
diff --git a/plugins/card-resources/src/components/TagsEditor.svelte b/plugins/card-resources/src/components/TagsEditor.svelte
index f23cfe2f10..3f90a5f2b3 100644
--- a/plugins/card-resources/src/components/TagsEditor.svelte
+++ b/plugins/card-resources/src/components/TagsEditor.svelte
@@ -18,19 +18,10 @@
   import card, { Card, Tag } from '@hcengineering/card'
   import { Class, Doc, Mixin, Ref } from '@hcengineering/core'
   import { createQuery, getClient } from '@hcengineering/presentation'
-  import {
-    ButtonIcon,
-    CircleButton,
-    eventToHTMLElement,
-    IconAdd,
-    IconClose,
-    IconDownOutline,
-    Label,
-    SelectPopup,
-    showPopup,
-    tooltip
-  } from '@hcengineering/ui'
+  import { CircleButton, eventToHTMLElement, IconAdd, IconDownOutline, SelectPopup, showPopup } from '@hcengineering/ui'
+
   import MasterTagSelector from './MasterTagSelector.svelte'
+  import CardTagColored from './CardTagColored.svelte'
 
   export let doc: Card
   export let dropdownTags: boolean = false
@@ -126,14 +117,12 @@
       {:else}
         {#each activeTags as mixin}
           {@const removable = isRemoveable(mixin._id, activeTags)}
-          <div class="tag no-word-wrap" class:removable use:tooltip={{ label: mixin.label }}>
-            <span class="overflow-label">
-              <Label label={mixin.label} />
-            </span>
-            {#if removable}
-              <ButtonIcon icon={IconClose} size="extra-small" kind="tertiary" on:click={() => removeTag(mixin._id)} />
-            {/if}
-          </div>
+          <CardTagColored
+            labelIntl={mixin.label}
+            color={mixin.background ?? 0}
+            {removable}
+            on:remove={() => removeTag(mixin._id)}
+          />
         {/each}
         {#if dropdownItems.length > 0}
           <CircleButton id={id ? `${id}-add` : undefined} icon={IconAdd} size={'small'} ghost on:click={add} />
@@ -150,28 +139,6 @@
     align-items: center;
     flex-shrink: 1;
     min-width: 0;
-
-    .tag {
-      padding: 0.25rem 0.5rem;
-      height: 1.5rem;
-      border: 1px solid var(--theme-content-color);
-      max-width: 12.5rem;
-      min-width: 2rem;
-      overflow: hidden;
-      border-radius: 6rem;
-
-      color: var(--theme-caption-color);
-
-      display: flex;
-      align-items: center;
-      flex-shrink: 2;
-      gap: 0.25rem;
-
-      &.removable {
-        padding-right: 0.25rem;
-        min-width: 3.75rem;
-      }
-    }
   }
 
   .divider {
diff --git a/plugins/card-resources/src/components/sections/AttachmentsSection.svelte b/plugins/card-resources/src/components/sections/AttachmentsSection.svelte
index 04df15e221..81d4162463 100644
--- a/plugins/card-resources/src/components/sections/AttachmentsSection.svelte
+++ b/plugins/card-resources/src/components/sections/AttachmentsSection.svelte
@@ -46,6 +46,6 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding: 0 4rem;
+    padding: 0 2rem;
   }
 </style>
diff --git a/plugins/card-resources/src/components/sections/ChildrenSection.svelte b/plugins/card-resources/src/components/sections/ChildrenSection.svelte
index bfd969f9da..c27e9a480b 100644
--- a/plugins/card-resources/src/components/sections/ChildrenSection.svelte
+++ b/plugins/card-resources/src/components/sections/ChildrenSection.svelte
@@ -40,6 +40,6 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding: 0 4rem;
+    padding: 0 2rem;
   }
 </style>
diff --git a/plugins/card-resources/src/components/sections/ContentSection.svelte b/plugins/card-resources/src/components/sections/ContentSection.svelte
index 874cc88148..d15486db31 100644
--- a/plugins/card-resources/src/components/sections/ContentSection.svelte
+++ b/plugins/card-resources/src/components/sections/ContentSection.svelte
@@ -54,7 +54,7 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding: 0 5rem;
+    padding: 0 2.5rem;
     flex: 1;
   }
 </style>
diff --git a/plugins/card-resources/src/components/sections/PropertiesSection.svelte b/plugins/card-resources/src/components/sections/PropertiesSection.svelte
index 0d9b34e235..6ce393a407 100644
--- a/plugins/card-resources/src/components/sections/PropertiesSection.svelte
+++ b/plugins/card-resources/src/components/sections/PropertiesSection.svelte
@@ -42,6 +42,6 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding: 0 4rem;
+    padding: 0 2rem;
   }
 </style>
diff --git a/plugins/card-resources/src/components/sections/RelationsSection.svelte b/plugins/card-resources/src/components/sections/RelationsSection.svelte
index 56ccbc4746..d5681331a8 100644
--- a/plugins/card-resources/src/components/sections/RelationsSection.svelte
+++ b/plugins/card-resources/src/components/sections/RelationsSection.svelte
@@ -30,6 +30,6 @@
     display: flex;
     flex-direction: column;
     width: 100%;
-    padding: 0 4rem;
+    padding: 0 2rem;
   }
 </style>
diff --git a/plugins/card-resources/src/index.ts b/plugins/card-resources/src/index.ts
index 51f0718086..5662a98ae9 100644
--- a/plugins/card-resources/src/index.ts
+++ b/plugins/card-resources/src/index.ts
@@ -61,6 +61,7 @@ import ContentCardSection from './components/sections/ContentSection.svelte'
 import PropertiesCardSection from './components/sections/PropertiesSection.svelte'
 import RelationsCardSection from './components/sections/RelationsSection.svelte'
 import FavoriteCardPresenter from './components/FavoriteCardPresenter.svelte'
+import CardTagsColored from './components/CardTagsColored.svelte'
 import CardTagColored from './components/CardTagColored.svelte'
 import CardWidgetTab from './components/CardWidgetTab.svelte'
 
@@ -102,7 +103,8 @@ export default async (): Promise<Resources> => ({
     CardWidget,
     CardWidgetTab,
     FavoriteCardPresenter,
-    CardTagColored
+    CardTagColored,
+    CardTagsColored
   },
   sectionComponent: {
     AttachmentsSection: AttachmentsCardSection,
diff --git a/plugins/card/src/index.ts b/plugins/card/src/index.ts
index 7758d340a7..b265d7399e 100644
--- a/plugins/card/src/index.ts
+++ b/plugins/card/src/index.ts
@@ -164,7 +164,8 @@ const cardPlugin = plugin(cardId, {
   },
   component: {
     LabelsPresenter: '' as AnyComponent,
-    CardTagColored: '' as AnyComponent
+    CardTagColored: '' as AnyComponent,
+    CardTagsColored: '' as AnyComponent
   },
   function: {
     OpenCardInSidebar: '' as Resource<(_id: Ref<Card>, card?: Card) => Promise<void>>
diff --git a/plugins/communication-resources/src/components/DateSeparator.svelte b/plugins/communication-resources/src/components/DateSeparator.svelte
index 3de072f9e6..06d4f41664 100644
--- a/plugins/communication-resources/src/components/DateSeparator.svelte
+++ b/plugins/communication-resources/src/components/DateSeparator.svelte
@@ -55,7 +55,7 @@
   .date-separator {
     display: flex;
     width: 100%;
-    padding: 0 4rem;
+    padding: 0 2rem;
     font-size: 0.75rem;
     height: 2.25rem;
     position: relative;
@@ -84,9 +84,9 @@
     flex: 1;
     height: 1px;
     min-height: 1px;
-    width: calc(100% - 8rem);
+    width: calc(100% - 4rem);
     background: var(--highlight-select-border);
-    margin: 0 4rem;
+    margin: 0 2rem;
     margin-top: -2rem;
   }
 </style>
diff --git a/plugins/communication-resources/src/components/message/MessagePresenter.svelte b/plugins/communication-resources/src/components/message/MessagePresenter.svelte
index f887afecf8..1ae1a7e8f8 100644
--- a/plugins/communication-resources/src/components/message/MessagePresenter.svelte
+++ b/plugins/communication-resources/src/components/message/MessagePresenter.svelte
@@ -225,7 +225,7 @@
     align-self: stretch;
     min-width: 0;
     position: relative;
-    padding: 0.5rem 4rem;
+    padding: 0.5rem 2rem;
 
     &:hover:not(.noHover) {
       background: var(--global-ui-BackgroundColor);
@@ -247,7 +247,7 @@
   .message__actions {
     position: absolute;
     top: -0.75rem;
-    right: 1rem;
+    right: 2.25rem;
     visibility: hidden;
     z-index: 2;
 
diff --git a/plugins/communication-resources/src/components/message/MessageReplies.svelte b/plugins/communication-resources/src/components/message/MessageReplies.svelte
index 95d2c6563e..455d59a7aa 100644
--- a/plugins/communication-resources/src/components/message/MessageReplies.svelte
+++ b/plugins/communication-resources/src/components/message/MessageReplies.svelte
@@ -14,7 +14,7 @@
 -->
 
 <script lang="ts">
-  import { ticker, DAY, HOUR, MINUTE, languageStore, Label } from '@hcengineering/ui'
+  import { ticker, DAY, HOUR, MINUTE, languageStore, Label, Component } from '@hcengineering/ui'
   import { createQuery, createCollaboratorsQuery } from '@hcengineering/presentation'
   import { translateCB } from '@hcengineering/platform'
   import { Collaborator, Thread } from '@hcengineering/communication-types'
@@ -23,7 +23,6 @@
   import cardPlugin, { Card } from '@hcengineering/card'
 
   import communication from '../../plugin'
-  import Tags from './Tags.svelte'
 
   export let thread: Thread
   export let count: number
@@ -211,7 +210,7 @@
     </span>
 
     {#if threadCard && clientWidth > 300}
-      <Tags value={threadCard} />
+      <Component is={cardPlugin.component.CardTagsColored} props={{ value: threadCard }} />
     {/if}
   </div>
 </div>
diff --git a/plugins/process-resources/src/components/ProcessesCardSection.svelte b/plugins/process-resources/src/components/ProcessesCardSection.svelte
index 1c5fdb93df..028b637b30 100644
--- a/plugins/process-resources/src/components/ProcessesCardSection.svelte
+++ b/plugins/process-resources/src/components/ProcessesCardSection.svelte
@@ -28,7 +28,7 @@
   .processes__section {
     display: flex;
     flex-direction: column;
-    padding: 0 4rem;
+    padding: 0 2rem;
     width: 100%;
   }
 </style>
diff --git a/plugins/text-editor-resources/src/components/toc/TableOfContents.svelte b/plugins/text-editor-resources/src/components/toc/TableOfContents.svelte
index 766ed3fafb..87c024b449 100644
--- a/plugins/text-editor-resources/src/components/toc/TableOfContents.svelte
+++ b/plugins/text-editor-resources/src/components/toc/TableOfContents.svelte
@@ -23,6 +23,7 @@
   export let items: Heading[] = []
   export let selected: Heading | undefined = undefined
   export let enumerated: boolean = false
+  export let position: 'left' | 'right' = 'left'
 
   const dispatch = createEventDispatcher()
 
@@ -44,7 +45,7 @@
     showPopup(
       TableofContentsPopup,
       { items, selected, enumerated },
-      getPopupPositionElement(ev.target as HTMLElement, { v: 'top', h: 'right' }),
+      getPopupPositionElement(ev.target as HTMLElement, { v: 'top', h: position === 'left' ? 'right' : 'left' }),
       (res) => {
         hovered = false
         if (res != null) {
@@ -55,7 +56,7 @@
   }
 </script>
 
-<div class="root no-print">
+<div class="root no-print {position}">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
   <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div class="toc" class:hovered on:click={handleOpenToc}>
@@ -73,6 +74,11 @@
     justify-content: flex-start;
     align-items: flex-start;
     gap: 1.5rem;
+    width: 2rem;
+
+    &.right {
+      align-items: flex-end;
+    }
   }
 
   .toc {