From b66d49ce41918861f9425452610e9a213e8eca17 Mon Sep 17 00:00:00 2001
From: Danil Kostromin <danil.kostromin@arknetworks.am>
Date: Fri, 12 Jan 2024 22:47:56 +0200
Subject: [PATCH] style(import): fix import table overflowing horizontally

Signed-off-by: Danil Kostromin <danil.kostromin@arknetworks.am>
---
 apps/bublik/src/pages/import-page/import-page.tsx      |  4 ++--
 .../import-event-table.component.spec.tsx.snap         |  2 +-
 .../import-event-table.component.tsx                   | 10 +++++-----
 .../import-event-table.container.tsx                   |  5 ++++-
 4 files changed, 12 insertions(+), 9 deletions(-)

diff --git a/apps/bublik/src/pages/import-page/import-page.tsx b/apps/bublik/src/pages/import-page/import-page.tsx
index 63e51a30..2b00bc82 100644
--- a/apps/bublik/src/pages/import-page/import-page.tsx
+++ b/apps/bublik/src/pages/import-page/import-page.tsx
@@ -10,8 +10,8 @@ export const ImportPage = () => {
 	useDocumentTitle('Import - Bublik');
 
 	return (
-		<div className="p-2">
-			<div className="flex flex-col h-full gap-1">
+		<div className="p-2 overflow-hidden h-full">
+			<div className="flex flex-col gap-1 h-full">
 				<ImportEventsTableContainer>
 					<ImportRunFormContainer />
 				</ImportEventsTableContainer>
diff --git a/libs/bublik/features/run-import/src/lib/import-events-table/__snapshots__/import-event-table.component.spec.tsx.snap b/libs/bublik/features/run-import/src/lib/import-events-table/__snapshots__/import-event-table.component.spec.tsx.snap
index 23f3a811..4a2a6f64 100644
--- a/libs/bublik/features/run-import/src/lib/import-events-table/__snapshots__/import-event-table.component.spec.tsx.snap
+++ b/libs/bublik/features/run-import/src/lib/import-events-table/__snapshots__/import-event-table.component.spec.tsx.snap
@@ -174,7 +174,7 @@ exports[`ImportEventTableComponent > should render successfully 1`] = `
       class="border-separate border-spacing-y-1 w-full"
     >
       <thead
-        class="bg-white"
+        class="bg-white sticky top-0 z-10"
       >
         <tr
           class="h-8.5"
diff --git a/libs/bublik/features/run-import/src/lib/import-events-table/import-event-table.component.tsx b/libs/bublik/features/run-import/src/lib/import-events-table/import-event-table.component.tsx
index fb3a7a67..2aa4a278 100644
--- a/libs/bublik/features/run-import/src/lib/import-events-table/import-event-table.component.tsx
+++ b/libs/bublik/features/run-import/src/lib/import-events-table/import-event-table.component.tsx
@@ -1,16 +1,16 @@
 /* SPDX-License-Identifier: Apache-2.0 */
 /* SPDX-FileCopyrightText: 2021-2023 OKTET Labs Ltd. */
 import {
-	useReactTable,
-	getCoreRowModel,
 	flexRender,
+	getCoreRowModel,
+	getFilteredRowModel,
 	getPaginationRowModel,
-	getFilteredRowModel
+	useReactTable
 } from '@tanstack/react-table';
 
 import { LogEvent } from '@/shared/types';
 import { getErrorMessage } from '@/services/bublik-api';
-import { Icon, Pagination, Skeleton, cn } from '@/shared/tailwind-ui';
+import { cn, Icon, Pagination, Skeleton } from '@/shared/tailwind-ui';
 
 import { columns } from './import-event-table.columns';
 
@@ -90,7 +90,7 @@ export const ImportEventTable = (props: ImportEventTableProps) => {
 	return (
 		<div>
 			<table className="border-separate border-spacing-y-1 w-full">
-				<thead className={cn('bg-white')}>
+				<thead className={cn('bg-white sticky top-0 z-10')}>
 					{table.getHeaderGroups().map((headerGroup) => (
 						<tr key={headerGroup.id} className="h-8.5">
 							{headerGroup.headers.map((header) => (
diff --git a/libs/bublik/features/run-import/src/lib/import-events-table/import-event-table.container.tsx b/libs/bublik/features/run-import/src/lib/import-events-table/import-event-table.container.tsx
index f8fb29cd..b009c574 100644
--- a/libs/bublik/features/run-import/src/lib/import-events-table/import-event-table.container.tsx
+++ b/libs/bublik/features/run-import/src/lib/import-events-table/import-event-table.container.tsx
@@ -75,7 +75,10 @@ export const ImportEventsTableContainer = (props: PropsWithChildren) => {
 				</div>
 			</div>
 			<div
-				className={cn('flex flex-col', isFetching && 'opacity-40 select-none')}
+				className={cn(
+					'flex flex-col overflow-auto flex-grow',
+					isFetching && 'opacity-40 select-none'
+				)}
 			>
 				{isLoading ? (
 					<ImportEventTableLoading />