From 1959b9f1073f0ffdf75ca9e813a022cba987ed3e Mon Sep 17 00:00:00 2001
From: Alexander Platov <alexander.platov@hardcoreeng.com>
Date: Fri, 25 Apr 2025 05:37:38 +0300
Subject: [PATCH] Fixed layouts for ListView and Section (#8703)

Signed-off-by: Alexander Platov <alexander.platov@hardcoreeng.com>
---
 packages/theme/styles/common.scss             |  30 ++--
 packages/theme/styles/components.scss         |  19 ++-
 packages/ui/src/components/Section.svelte     |   3 +-
 .../src/components/Activity.svelte            | 128 +++++++++---------
 .../src/components/NewActivity.svelte         |  50 ++++---
 .../src/components/Childs.svelte              |  35 ++---
 .../src/components/ProcessesExtension.svelte  |  10 +-
 .../src/components/Backup.svelte              |   4 +-
 .../src/components/EditSurvey.svelte          |  86 ++++++------
 .../src/components/list/ListCategory.svelte   |   4 +
 .../src/components/list/ListHeader.svelte     |  44 ++++--
 11 files changed, 232 insertions(+), 181 deletions(-)

diff --git a/packages/theme/styles/common.scss b/packages/theme/styles/common.scss
index cd9ac5bea5..7757fccba5 100644
--- a/packages/theme/styles/common.scss
+++ b/packages/theme/styles/common.scss
@@ -598,6 +598,9 @@
       height: 3.5rem;
       min-height: 3.5rem;
     }
+    &.spaceBeforeContent {
+      margin-bottom: .75rem;
+    }
     &__icon {
       display: flex;
       justify-content: center;
@@ -657,14 +660,22 @@
   .invisible { display: none; }
   &-empty {
     display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 1rem;
-    font-size: .75rem;
-    color: var(--dark-color);
-    border: 1px dashed var(--divider-color);
-    border-radius: 0.75rem;
-
+    min-width: 0;
+    min-height: 0;
+    
+    &:not(.none-appearance) {
+      justify-content: center;
+      align-items: center;
+      flex-wrap: wrap;
+      padding: 1rem;
+      font-size: .75rem;
+      color: var(--dark-color);
+      border: 1px dashed var(--divider-color);
+      border-radius: 0.75rem;
+    }
+    &.none-appearance {
+      flex-direction: column;
+    }
     &.solid { border-style: solid; }
     &.items {
       justify-content: start;
@@ -677,6 +688,9 @@
     }
   }
 }
+:is(.antiSection, .step-tb-6, .mt-6) + :is(.antiSection, .step-tb-6) {
+  margin-top: 1.5rem;
+}
 
 // Button on selected card in Kanban
 .card-container.checked .button.inline.link-bordered {
diff --git a/packages/theme/styles/components.scss b/packages/theme/styles/components.scss
index 494dbbf697..5a2958fc5a 100644
--- a/packages/theme/styles/components.scss
+++ b/packages/theme/styles/components.scss
@@ -2276,7 +2276,8 @@
     border-bottom: 1px solid var(--theme-list-subheader-divider);
   }
   &.row.lastCat {
-    border-radius: 0 0 0.25rem 0.25rem;
+    border-bottom-left-radius: 0.25rem;
+    border-bottom-right-radius: 0.25rem;
     border-bottom: 1px solid var(--theme-list-border-color);
   }
 
@@ -2401,12 +2402,24 @@
 }
 
 /* ListView - global style */
+.category-container.disableHeader .listGrid.row:first-child {
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  border-top: 1px solid var(--theme-list-border-color);
+}
+.list-container .category-container.collapsed:not(.category-last, .category-one) .categoryHeader.subLevel,
+.list-container .category-container:not(.category-last, .category-one, .zero-container) .category-container.category-last .listGrid.last.lastCat,
+.list-container .category-container:not(.category-last, .category-one, .zero-container) .category-container.category-last .categoryHeader.subLevel.lastCat {
+  border-radius: 0;
+}
 .list-container .category-container .categoryHeader.subLevel.closed {
-  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
   border-bottom: 1px solid var(--theme-list-border-color);
 }
 .list-container .category-container .categoryHeader.closed:not(.subLevel) {
-  border-radius: 0 0 0.25rem 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
 
   &::before,
   &::after {
diff --git a/packages/ui/src/components/Section.svelte b/packages/ui/src/components/Section.svelte
index 1be87d3e62..d81f94323d 100644
--- a/packages/ui/src/components/Section.svelte
+++ b/packages/ui/src/components/Section.svelte
@@ -24,13 +24,14 @@
   export let icon: Asset | AnySvelteComponent | undefined = undefined
 
   export let showHeader: boolean = true
+  export let spaceBeforeContent: boolean = false
   export let high: boolean = false
   export let invisible: boolean = false
 </script>
 
 <div class="antiSection" {id}>
   {#if showHeader}
-    <div class="antiSection-header" class:high class:invisible>
+    <div class="antiSection-header" class:high class:invisible class:spaceBeforeContent>
       {#if icon}
         <div class="antiSection-header__icon">
           <Icon {icon} size={'small'} />
diff --git a/plugins/activity-resources/src/components/Activity.svelte b/plugins/activity-resources/src/components/Activity.svelte
index 2ba90716eb..5e621c8e43 100644
--- a/plugins/activity-resources/src/components/Activity.svelte
+++ b/plugins/activity-resources/src/components/Activity.svelte
@@ -252,45 +252,54 @@
   $: void updateActivityMessages(object._id, isNewestFirst ? SortingOrder.Descending : SortingOrder.Ascending)
 </script>
 
-<div class="step-tb-6">
-  <Section label={activity.string.Activity} icon={activity.icon.Activity}>
-    <svelte:fragment slot="header">
-      {#if isLoading}
-        <div class="ml-1">
-          <Spinner size="small" />
-        </div>
-      {/if}
-      <ActivityFilter
-        messages={allMessages}
-        {object}
-        on:update={(e) => {
-          filteredMessages = e.detail
-        }}
-        bind:isNewestFirst
-      />
-    </svelte:fragment>
+<Section label={activity.string.Activity} icon={activity.icon.Activity}>
+  <svelte:fragment slot="header">
+    {#if isLoading}
+      <div class="ml-1">
+        <Spinner size="small" />
+      </div>
+    {/if}
+    <ActivityFilter
+      messages={allMessages}
+      {object}
+      on:update={(e) => {
+        filteredMessages = e.detail
+      }}
+      bind:isNewestFirst
+    />
+  </svelte:fragment>
 
-    <svelte:fragment slot="content">
-      {#if isNewestFirst && showCommenInput}
-        <div class="ref-input newest-first">
-          <ActivityExtensionComponent
-            kind="input"
-            {extensions}
-            props={{ object, boundary, focusIndex, withTypingInfo: true }}
-          />
-        </div>
-      {/if}
-      <div
-        class="p-activity select-text"
-        id={activity.string.Activity}
-        class:newest-first={isNewestFirst}
-        bind:this={activityBox}
-      >
-        {#if filteredMessages.length}
-          <Grid column={1} rowGap={0}>
-            {#each filteredMessages as message, index}
-              {@const canGroup = canGroupMessages(message, filteredMessages[index - 1])}
-              {#if selectedMessageId}
+  <svelte:fragment slot="content">
+    {#if isNewestFirst && showCommenInput}
+      <div class="ref-input newest-first">
+        <ActivityExtensionComponent
+          kind="input"
+          {extensions}
+          props={{ object, boundary, focusIndex, withTypingInfo: true }}
+        />
+      </div>
+    {/if}
+    <div
+      class="p-activity select-text"
+      id={activity.string.Activity}
+      class:newest-first={isNewestFirst}
+      bind:this={activityBox}
+    >
+      {#if filteredMessages.length}
+        <Grid column={1} rowGap={0}>
+          {#each filteredMessages as message, index}
+            {@const canGroup = canGroupMessages(message, filteredMessages[index - 1])}
+            {#if selectedMessageId}
+              <ActivityMessagePresenter
+                value={message}
+                doc={object}
+                hideLink={true}
+                type={canGroup ? 'short' : 'default'}
+                isHighlighted={selectedMessageId === message._id}
+                withShowMore
+              />
+            {:else}
+              <Lazy>
                 <ActivityMessagePresenter
                   value={message}
                   doc={object}
@@ -299,34 +308,23 @@
                   isHighlighted={selectedMessageId === message._id}
                   withShowMore
                 />
-              {:else}
-                <Lazy>
-                  <ActivityMessagePresenter
-                    value={message}
-                    doc={object}
-                    hideLink={true}
-                    type={canGroup ? 'short' : 'default'}
-                    isHighlighted={selectedMessageId === message._id}
-                    withShowMore
-                  />
-                </Lazy>
-              {/if}
-            {/each}
-          </Grid>
-        {/if}
-      </div>
-      {#if showCommenInput && !isNewestFirst}
-        <div class="ref-input oldest-first">
-          <ActivityExtensionComponent
-            kind="input"
-            {extensions}
-            props={{ object, boundary, focusIndex, withTypingInfo: true }}
-          />
-        </div>
+              </Lazy>
+            {/if}
+          {/each}
+        </Grid>
       {/if}
-    </svelte:fragment>
-  </Section>
-</div>
+    </div>
+    {#if showCommenInput && !isNewestFirst}
+      <div class="ref-input oldest-first">
+        <ActivityExtensionComponent
+          kind="input"
+          {extensions}
+          props={{ object, boundary, focusIndex, withTypingInfo: true }}
+        />
+      </div>
+    {/if}
+  </svelte:fragment>
+</Section>
 
 <style lang="scss">
   .ref-input {
diff --git a/plugins/activity-resources/src/components/NewActivity.svelte b/plugins/activity-resources/src/components/NewActivity.svelte
index e3bd0a035c..fe5b57b972 100644
--- a/plugins/activity-resources/src/components/NewActivity.svelte
+++ b/plugins/activity-resources/src/components/NewActivity.svelte
@@ -74,34 +74,32 @@
   })
 </script>
 
-<div class="step-tb-6">
-  <Section label={activity.string.Activity} icon={activity.icon.Activity}>
-    <svelte:fragment slot="header">
-      {#if isLoading}
-        <div class="ml-1">
-          <Spinner size="small" />
-        </div>
-      {/if}
-    </svelte:fragment>
-
-    <svelte:fragment slot="content">
-      <div class="p-activity select-text" id={activity.string.Activity}>
-        {#if messages.length}
-          <Grid column={1} rowGap={1}>
-            {#each messages as message (message.id)}
-              <MessagePresenter {message} card={object} />
-            {/each}
-          </Grid>
-        {/if}
+<Section label={activity.string.Activity} icon={activity.icon.Activity}>
+  <svelte:fragment slot="header">
+    {#if isLoading}
+      <div class="ml-1">
+        <Spinner size="small" />
       </div>
-      {#if showInput}
-        <div class="ref-input oldest-first">
-          <MessageInput cardId={object._id} cardType={object._class} placeholder={activity.string.Message} />
-        </div>
+    {/if}
+  </svelte:fragment>
+
+  <svelte:fragment slot="content">
+    <div class="p-activity select-text" id={activity.string.Activity}>
+      {#if messages.length}
+        <Grid column={1} rowGap={1}>
+          {#each messages as message (message.id)}
+            <MessagePresenter {message} card={object} />
+          {/each}
+        </Grid>
       {/if}
-    </svelte:fragment>
-  </Section>
-</div>
+    </div>
+    {#if showInput}
+      <div class="ref-input oldest-first">
+        <MessageInput cardId={object._id} cardType={object._class} placeholder={activity.string.Message} />
+      </div>
+    {/if}
+  </svelte:fragment>
+</Section>
 
 <style lang="scss">
   .ref-input {
diff --git a/plugins/card-resources/src/components/Childs.svelte b/plugins/card-resources/src/components/Childs.svelte
index 4447b4637f..a6c42e432d 100644
--- a/plugins/card-resources/src/components/Childs.svelte
+++ b/plugins/card-resources/src/components/Childs.svelte
@@ -19,7 +19,7 @@
   import {
     Label,
     Scroller,
-    Button,
+    ModernButton,
     getCurrentLocation,
     IconAdd,
     navigate,
@@ -142,21 +142,24 @@
   const selection = listProvider.selection
 </script>
 
-<Section label={card.string.Children} icon={card.icon.Card}>
+<Section label={card.string.Children} icon={card.icon.Card} spaceBeforeContent>
   <svelte:fragment slot="header">
-    <ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'tertiary'} bind:viewlet />
-    {#if !$restrictionStore.readonly && !readonly}
-      <Button
-        id="add-child-card"
-        icon={IconAdd}
-        label={card.string.CreateChild}
-        kind={'ghost'}
-        showTooltip={{ label: card.string.CreateChild, direction: 'bottom' }}
-        on:click={() => {
-          void createCard()
-        }}
-      />
-    {/if}
+    <div class="buttons-group xsmall-gap">
+      <ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'tertiary'} bind:viewlet />
+      {#if !$restrictionStore.readonly && !readonly}
+        <ModernButton
+          id="add-child-card"
+          icon={IconAdd}
+          label={card.string.CreateChild}
+          size={'small'}
+          kind={'tertiary'}
+          tooltip={{ label: card.string.CreateChild, direction: 'bottom' }}
+          on:click={() => {
+            void createCard()
+          }}
+        />
+      {/if}
+    </div>
   </svelte:fragment>
   <svelte:fragment slot="content">
     {#if (object?.children ?? 0) > 0 && viewOptions !== undefined && viewlet}
@@ -194,7 +197,7 @@
         </div>
       </Scroller>
     {:else if !readonly}
-      <div class="antiSection-empty solid clear-mins mt-3">
+      <div class="antiSection-empty solid">
         <!-- svelte-ignore a11y-click-events-have-key-events -->
         <!-- svelte-ignore a11y-no-static-element-interactions -->
         <span class="over-underline content-color" on:click={createCard}>
diff --git a/plugins/process-resources/src/components/ProcessesExtension.svelte b/plugins/process-resources/src/components/ProcessesExtension.svelte
index 7af8a13f00..4c83c7f8f7 100644
--- a/plugins/process-resources/src/components/ProcessesExtension.svelte
+++ b/plugins/process-resources/src/components/ProcessesExtension.svelte
@@ -102,7 +102,7 @@
   let docsProvided = false
 </script>
 
-<Section icon={process.icon.Process} label={process.string.Processes}>
+<Section icon={process.icon.Process} label={process.string.Processes} spaceBeforeContent>
   <svelte:fragment slot="header">
     <div class="buttons-group xsmall-gap">
       <ViewletsSettingButton bind:viewOptions viewletQuery={{ _id: viewletId }} kind={'tertiary'} bind:viewlet />
@@ -112,7 +112,7 @@
 
   <svelte:fragment slot="content">
     <div
-      class="antiSection-empty solid flex-col flex-gap-2 mt-3"
+      class="antiSection-empty {docsProvided && docs.length === 0 ? 'solid' : 'none-appearance flex-gap-2'}"
       use:resizeObserver={(evt) => {
         listWidth = evt.clientWidth
       }}
@@ -146,10 +146,8 @@
           }}
         />
         {#if docsProvided && docs.length === 0}
-          <div class="flex-col-center">
-            <div class="caption-color">
-              <Label label={process.string.NoProcesses} />
-            </div>
+          <div class="flex-center content-color">
+            <Label label={process.string.NoProcesses} />
           </div>
         {/if}
       {/if}
diff --git a/plugins/setting-resources/src/components/Backup.svelte b/plugins/setting-resources/src/components/Backup.svelte
index 58ff9685ac..0a6dc31e9d 100644
--- a/plugins/setting-resources/src/components/Backup.svelte
+++ b/plugins/setting-resources/src/components/Backup.svelte
@@ -148,12 +148,12 @@
   $: snapshots = backupInfo?.info?.snapshots ?? []
 </script>
 
-<div class="hulyComponent p-2 flex-no-shrink">
+<div class="hulyComponent flex-no-shrink">
   <Header adaptive={'disabled'}>
     <Breadcrumb icon={setting.icon.Setting} label={setting.string.Backup} size={'large'} isCurrent />
   </Header>
 
-  <Scroller noStretch>
+  <Scroller padding={'1.5rem'} noStretch>
     {#if loading}
       <Loading size={'small'} />
     {:else if backupInfo == null}
diff --git a/plugins/survey-resources/src/components/EditSurvey.svelte b/plugins/survey-resources/src/components/EditSurvey.svelte
index fce06aa6d9..52c4347e6a 100644
--- a/plugins/survey-resources/src/components/EditSurvey.svelte
+++ b/plugins/survey-resources/src/components/EditSurvey.svelte
@@ -17,7 +17,7 @@
 <script lang="ts">
   import { MessageBox } from '@hcengineering/presentation'
   import { Question, QuestionKind, Survey } from '@hcengineering/survey'
-  import { createFocusManager, EditBox, FocusHandler, Icon, Label, showPopup } from '@hcengineering/ui'
+  import { createFocusManager, EditBox, FocusHandler, showPopup, Section } from '@hcengineering/ui'
   import { createEventDispatcher } from 'svelte'
   import survey from '../plugin'
   import EditQuestion from './EditQuestion.svelte'
@@ -144,53 +144,47 @@
       }}
     />
   </div>
-  <div class="antiSection step-tb-6">
-    <div class="antiSection-header mb-3">
-      <div class="antiSection-header__icon">
-        <Icon icon={IconQuestion} size={'small'} />
-      </div>
-      <span class="antiSection-header__title">
-        <Label label={survey.string.Questions} />
-      </span>
-    </div>
-    {#each questionList as question, index (index)}
-      {@const isNewQuestion = index === questionList.length - 1}
-      <div
-        role="listitem"
-        on:dragover={(ev) => {
-          onQuestionDragOver(ev, index)
-        }}
-        on:dragleave={(ev) => {
-          onQuestionDragLeave(ev, index)
-        }}
-        on:drop={onQuestionDrop}
-        class:dragged-over={draggedIndex !== undefined &&
-          draggedOverIndex === index &&
-          draggedOverIndex !== draggedIndex &&
-          draggedOverIndex !== draggedIndex + 1}
-      >
-        <EditQuestion
-          bind:this={questionComponents[index]}
-          {question}
-          {isNewQuestion}
-          on:delete={() => {
-            deleteQuestion(index)
+  <Section label={survey.string.Questions} icon={IconQuestion} spaceBeforeContent>
+    <svelte:fragment slot="content">
+      {#each questionList as question, index (index)}
+        {@const isNewQuestion = index === questionList.length - 1}
+        <div
+          role="listitem"
+          on:dragover={(ev) => {
+            onQuestionDragOver(ev, index)
           }}
-          on:change={(e) => {
-            isNewQuestion ? handleNewQuestionChange(e.detail) : handleQuestionChange(index, e.detail)
+          on:dragleave={(ev) => {
+            onQuestionDragLeave(ev, index)
           }}
-          {readonly}
-          on:dragStart={() => {
-            draggedIndex = index
-          }}
-          on:dragEnd={() => {
-            draggedIndex = undefined
-            draggedOverIndex = undefined
-          }}
-        />
-      </div>
-    {/each}
-  </div>
+          on:drop={onQuestionDrop}
+          class:dragged-over={draggedIndex !== undefined &&
+            draggedOverIndex === index &&
+            draggedOverIndex !== draggedIndex &&
+            draggedOverIndex !== draggedIndex + 1}
+        >
+          <EditQuestion
+            bind:this={questionComponents[index]}
+            {question}
+            {isNewQuestion}
+            on:delete={() => {
+              deleteQuestion(index)
+            }}
+            on:change={(e) => {
+              isNewQuestion ? handleNewQuestionChange(e.detail) : handleQuestionChange(index, e.detail)
+            }}
+            {readonly}
+            on:dragStart={() => {
+              draggedIndex = index
+            }}
+            on:dragEnd={() => {
+              draggedIndex = undefined
+              draggedOverIndex = undefined
+            }}
+          />
+        </div>
+      {/each}
+    </svelte:fragment>
+  </Section>
 {/if}
 
 <style lang="scss">
diff --git a/plugins/view-resources/src/components/list/ListCategory.svelte b/plugins/view-resources/src/components/list/ListCategory.svelte
index 1e1b0a2752..d49b7dd7b2 100644
--- a/plugins/view-resources/src/components/list/ListCategory.svelte
+++ b/plugins/view-resources/src/components/list/ListCategory.svelte
@@ -441,7 +441,11 @@
   in:fade|local={{ duration: 50 }}
   bind:this={div}
   class="category-container"
+  class:collapsed
+  class:category-one={oneCat}
+  class:category-last={lastCat}
   class:zero-container={level === 0}
+  class:disableHeader
   on:drop|preventDefault={drop}
   on:dragover={dragOverCat}
   on:dragenter={dragEnterCat}
diff --git a/plugins/view-resources/src/components/list/ListHeader.svelte b/plugins/view-resources/src/components/list/ListHeader.svelte
index 429834c89b..27d9db4f75 100644
--- a/plugins/view-resources/src/components/list/ListHeader.svelte
+++ b/plugins/view-resources/src/components/list/ListHeader.svelte
@@ -93,6 +93,7 @@
 
   $: selectionIds = new Set($selection.map((it) => it._id))
   $: selected = items.filter((it) => selectionIds.has(it._id))
+  // $: if (itemsProj.length === 0 && !collapsed) collapsed = true
 </script>
 
 {#if headerComponent || groupByKey === noCategory}
@@ -104,7 +105,7 @@
     class="flex-between categoryHeader row"
     class:flat
     class:noDivide={showColors}
-    class:collapsed
+    class:collapsed={collapsed || itemsProj.length === 0}
     class:subLevel={level !== 0}
     class:lastCat
     class:cursor-pointer={items.length > 0}
@@ -124,7 +125,11 @@
   >
     <div class="flex-row-center flex-grow" style:color={headerComponent ? headerTextColor : 'inherit'}>
       <!-- {#if level === 0} -->
-      <div class="chevron"><IconCollapseArrow size={level === 0 ? 'small' : 'tiny'} /></div>
+      <div class="chevron" class:empty={itemsProj.length === 0}>
+        {#if itemsProj.length > 0}
+          <IconCollapseArrow size={level === 0 ? 'small' : 'tiny'} />
+        {/if}
+      </div>
       <!-- {/if} -->
       {#if groupByKey === noCategory}
         <span class="fs-bold content-color overflow-label pointer-events-none">
@@ -217,20 +222,42 @@
     min-height: 2.75rem;
     min-width: 0;
     background: var(--theme-bg-color);
-    border-radius: 0.25rem 0.25rem 0 0;
 
+    &:not(.subLevel) {
+      border-top-left-radius: 0.25rem;
+      border-top-right-radius: 0.25rem;
+    }
     .on-hover {
       visibility: hidden;
     }
 
     .chevron {
+      display: flex;
+      justify-content: center;
+      align-items: center;
       flex-shrink: 0;
-      min-width: 0;
+      min-width: 1rem;
+      min-height: 1rem;
       margin-right: 0.75rem;
       color: var(--theme-caption-color);
       transform-origin: center;
       transform: rotate(90deg);
       transition: transform 0.15s ease-in-out;
+
+      &.empty {
+        position: relative;
+
+        &::after {
+          content: '';
+          position: absolute;
+          top: 0.375rem;
+          left: 0.375rem;
+          width: 0.25rem;
+          height: 0.25rem;
+          background-color: var(--theme-dark-color);
+          border-radius: 50%;
+        }
+      }
     }
     &::before,
     &::after {
@@ -240,7 +267,8 @@
       left: 0;
       right: 0;
       bottom: 0;
-      border-radius: 0.25rem 0.25rem 0 0;
+      border-top-left-radius: 0.25rem;
+      border-top-right-radius: 0.25rem;
       pointer-events: none;
     }
     &::after {
@@ -291,9 +319,9 @@
     &.flat {
       background: var(--header-bg-color);
       background-blend-mode: darken;
-      min-height: 2.25rem;
-      height: 2.25rem;
-      padding: 0 0.25rem 0 0.25rem;
+      min-height: 2.5rem;
+      height: 2.5rem;
+      padding: 0 0.375rem 0 0.75rem;
     }
   }
 </style>