feat(YTFRONT-4245): make header of removing items table (in delete co…

…nfirmation modal) sticky on top
ytsaurus · Nov 5, 2024 · b26d8ad · b26d8ad
1 parent 5560de7
commit b26d8ad
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 7 deletions.
diff --git a/...src/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.js b/...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/...c/ui/pages/navigation/Navigation/PathEditorModal/DeleteObjectModal/DeleteObjectModal.scss b/...c/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;