chore(ui): fix ui styling issue (#13211)

* fix ui styling issue

* fix oveflow issue in table cell

---------

Co-authored-by: Chirag Madlani <12962843+chirag-madlani@users.noreply.github.com>

openmetadata-ui/src/main/resources/ui/src/components/SchemaTable/SchemaTable.component.tsx

@@ -12,7 +12,7 @@
  */
 
 import Icon, { FilterOutlined } from '@ant-design/icons';
-import { Space, Table, Tooltip, Typography } from 'antd';
+import { Table, Tooltip, Typography } from 'antd';
 import { ColumnsType } from 'antd/lib/table';
 import { ExpandableConfig } from 'antd/lib/table/interface';
 import { ReactComponent as IconEdit } from 'assets/svg/edit-new.svg';
@@ -355,41 +355,36 @@ const SchemaTable = ({
           const { displayName } = record;
 
           return (
-            <Space className="hover-icon-group m-0" direction="vertical">
-              <Space
-                align="center"
-                className="w-max-90 vertical-align-inherit"
-                size={2}>
+            <div className="d-inline-flex flex-column hover-icon-group w-full">
+              <div className="d-inline-flex">
                 {prepareConstraintIcon({
                   columnName: name,
                   columnConstraint: record.constraint,
                   tableConstraints,
                 })}
-                <div>
-                  {/* If we do not have displayName name only be shown in the bold from the below code */}
-                  {!isEmpty(displayName) ? (
-                    <Typography.Text
-                      className="m-b-0 d-block text-grey-muted"
-                      data-testid="column-name">
-                      {name}
-                    </Typography.Text>
-                  ) : null}
-
-                  {/* It will render displayName fallback to name */}
+                {/* If we do not have displayName name only be shown in the bold from the below code */}
+                {!isEmpty(displayName) ? (
                   <Typography.Text
-                    className="m-b-0 d-block"
-                    data-testid="column-display-name"
-                    ellipsis={{ tooltip: true }}>
-                    {getEntityName(record)}
+                    className="m-b-0 d-block text-grey-muted"
+                    data-testid="column-name">
+                    {name}
                   </Typography.Text>
-                </div>
-              </Space>
+                ) : null}
+
+                {/* It will render displayName fallback to name */}
+                <Typography.Text
+                  className="m-b-0 d-block"
+                  data-testid="column-display-name"
+                  ellipsis={{ tooltip: true }}>
+                  {getEntityName(record)}
+                </Typography.Text>
+              </div>
               <Icon
-                className="hover-cell-icon text-left"
+                className="hover-cell-icon text-left m-t-xss"
                 component={IconEdit}
                 onClick={() => handleEditDisplayNameClick(record)}
               />
-            </Space>
+            </div>
           );
         },
       },

openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/FrequentlyJoinedTables/FrequentlyJoinedTables.component.tsx

@@ -33,9 +33,9 @@ export const FrequentlyJoinedTables = ({
   const { t } = useTranslation();
 
   return (
-    <Row className="m-x-xs" gutter={[0, 16]}>
+    <Row className="m-b-lg" gutter={[0, 8]}>
       <Col className="m-b" span={24}>
-        <Typography.Text>
+        <Typography.Text className="right-panel-label">
           {t('label.frequently-joined-table-plural')}
         </Typography.Text>
       </Col>

openmetadata-ui/src/main/resources/ui/src/pages/TableDetailsPageV1/FrequentlyJoinedTables/frequently-joined-tables.style.less

@@ -17,8 +17,6 @@
   overflow-y: scroll;
 
   .frequently-joint-data {
-    padding: 12px;
-
     .frequently-joint-name {
       font-weight: 300;
     }