From f167688ad275ef97a0ea91f336b6790977c6eb27 Mon Sep 17 00:00:00 2001
From: pabolkovdn <pabolkovdn@yandex-team.ru>
Date: Tue, 5 Nov 2024 12:37:57 +0300
Subject: [PATCH] feat(YTFRONT-4245): make header of removing items table (in
 delete confirmation modal) sticky on top

---
 .../DeleteObjectModal/DeleteObjectModal.js        | 12 +++++++-----
 .../DeleteObjectModal/DeleteObjectModal.scss      | 15 +++++++++++++--
 2 files changed, 20 insertions(+), 7 deletions(-)

diff --git a/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js b/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js
index 90b2daa3bf..4ca7b7c250 100644
--- a/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js
+++ b/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js
@@ -155,11 +155,13 @@ export class DeleteObjectModal extends Component {
             <ErrorBoundary>
                 <div className={block({multiple: true})}>
                     <div className={block('table')}>
-                        <div className={block('preview-icon')} />
-                        <div className={block('preview-name')}>Name</div>
-                        <div className={block('preview-disk-space')}>Disk space</div>
-                        <div className={block('preview-node-count')}>Node count</div>
-                        <div className={block('preview-node-count')}>Row count</div>
+                        <div className={block('table-header')}>
+                            <div className={block('preview-icon')} />
+                            <div className={block('preview-name')}>Name</div>
+                            <div className={block('preview-disk-space')}>Disk space</div>
+                            <div className={block('preview-node-count')}>Node count</div>
+                            <div className={block('preview-node-count')}>Row count</div>
+                        </div>
 
                         {map_(multipleInfo, ({path, resourceUsage}, index) => {
                             const {type, titleUnquoted, rows, unmergedRows} = item[index];
diff --git a/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss b/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss
index 2c0cb655a4..978450cd7f 100644
--- a/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss
+++ b/packages/ui/src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss
@@ -8,17 +8,28 @@
     }
 
     &__content {
-        padding-bottom: 0;
+        padding: 0 30px;
     }
 
     &__table {
         display: grid;
         grid-template-columns: 10px 1fr 70px 80px 75px;
-        grid-template-rows: 20px;
+        grid-template-rows: auto 20px;
         grid-gap: 12px 20px;
         align-items: center;
     }
 
+    &__table-header {
+        display: grid;
+        grid-template-columns: subgrid;
+        grid-column: 1 / -1;
+        position: sticky;
+        top: 0;
+        padding-top: 15px;
+        background-color: var(--g-color-base-modal);
+        z-index: 1;
+    }
+
     &__object {
         margin-bottom: 15px;
         display: flex;