From b70f49e5a8fdd8563283bba1ba0791f337e3a660 Mon Sep 17 00:00:00 2001
From: Sachin Chaurasiya <sachinchaurasiyachotey87@gmail.com>
Date: Thu, 18 Aug 2022 12:08:26 +0530
Subject: [PATCH] Fix #6633 Support multi-line Sample Data header row (#6788)

---
 .../SampleDataTable/SampleDataTable.component.tsx     | 11 +++++++----
 1 file changed, 7 insertions(+), 4 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx
index 43fd9a5e7fe..c3a7274099e 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx
@@ -16,6 +16,7 @@ import {
   faChevronRight,
 } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Space } from 'antd';
 import classNames from 'classnames';
 import { lowerCase } from 'lodash';
 import React, {
@@ -112,10 +113,12 @@ const SampleDataTable: FunctionComponent<Props> = ({ sampleData }: Props) => {
                       className="tableHead-cell"
                       data-testid="column-name"
                       key={column.name}>
-                      {column.name}
-                      <span className="tw-py-0.5 tw-px-1 tw-ml-1 tw-rounded tw-text-grey-muted">
-                        ({lowerCase(column.dataType)})
-                      </span>
+                      <Space direction="vertical" size={0}>
+                        <span>{column.name}</span>
+                        <span className="tw-text-grey-muted">
+                          ({lowerCase(column.dataType)})
+                        </span>
+                      </Space>
                     </th>
                   );
                 })}