fix(ui): overflow for frequently joined table widget (#21623)

(cherry picked from commit b0f82aa0ef5f98384bebca74e6d837ffbd231222)

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

@@ -10,13 +10,14 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Space, Typography } from 'antd';
+import { Button, Typography } from 'antd';
 import { isEmpty } from 'lodash';
-import React, { useEffect, useMemo } from 'react';
+import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import ExpandableCard from '../../../components/common/ExpandableCard/ExpandableCard';
 import { useGenericContext } from '../../../components/Customization/GenericProvider/GenericProvider';
+import { LIST_SIZE } from '../../../constants/constants';
 import { DetailPageWidgetKeys } from '../../../enums/CustomizeDetailPage.enum';
 import { EntityType } from '../../../enums/entity.enum';
 import { JoinedWith, Table } from '../../../generated/entity/data/table';
@@ -36,6 +37,7 @@ export const FrequentlyJoinedTables = ({
 }) => {
   const { t } = useTranslation();
   const { data, filterWidgets } = useGenericContext<Table>();
+  const [visibleCount, setVisibleCount] = useState(LIST_SIZE);
 
   const joinedTables = useMemo(
     () => getJoinsFromTableJoins(data?.joins),
@@ -48,34 +50,64 @@ export const FrequentlyJoinedTables = ({
     }
   }, [joinedTables]);
 
-  if (isEmpty(joinedTables)) {
+  const hasMoreElement = useMemo(
-    return null;
+    () => LIST_SIZE < joinedTables.length,
-  }
+    [joinedTables]
+  );
 
-  const content = joinedTables.map((table) => (
+  const handleShowMore = useCallback(() => {
-    <Space
+    setVisibleCount(
-      className="w-full frequently-joint-data justify-between m-t-xss"
+      visibleCount === joinedTables.length ? LIST_SIZE : joinedTables.length
+    );
+  }, [joinedTables, visibleCount]);
+
+  const content = useMemo(() => {
+    return joinedTables.slice(0, visibleCount).map((table) => (
+      <div
+        className="frequently-joint-data"
         data-testid="related-tables-data"
-      key={table.name}
+        key={table.name}>
-      size={4}>
         <Link
           to={getEntityDetailsPath(EntityType.TABLE, table.fullyQualifiedName)}>
-        <Typography.Text className="frequently-joint-name">
+          <Typography.Text
+            className="frequently-joint-name"
+            ellipsis={{ tooltip: true }}>
             {table.name}
           </Typography.Text>
         </Link>
         {getCountBadge(table.joinCount, '', false)}
-    </Space>
+      </div>
     ));
+  }, [joinedTables, visibleCount]);
+
+  if (isEmpty(joinedTables)) {
+    return null;
+  }
 
   return renderAsExpandableCard ? (
     <ExpandableCard
       cardProps={{
         title: t('label.frequently-joined-table-plural'),
+        className: 'frequently-joint-data-container',
       }}
       dataTestId="frequently-joint-data-container"
       isExpandDisabled={isEmpty(joinedTables)}>
       {content}
+
+      {hasMoreElement ? (
+        <Button
+          className="show-more-tags-button"
+          data-testid="read-button"
+          size="small"
+          type="link"
+          onClick={handleShowMore}>
+          {visibleCount === joinedTables.length
+            ? t('label.less')
+            : t('label.plus-count-more', {
+                count: joinedTables.length - visibleCount,
+              })}
+        </Button>
+      ) : null}
     </ExpandableCard>
   ) : (
     <>{content}</>

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

@@ -10,15 +10,19 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-@import url('../../../styles/variables.less');
+@import (reference) url('../../../styles/variables.less');
 
 .frequently-joint-data-container {
-  max-height: 200px;
-  overflow-y: scroll;
-
   .frequently-joint-data {
-    .frequently-joint-name {
+    display: flex;
-      font-weight: 300;
+    align-items: center;
+    justify-content: space-between;
+    gap: 8px;
+    margin-bottom: 8px;
+
+    > a {
+      flex: 1;
+      min-width: 0;
     }
   }
 }