From 25a256f6016a835df91a00649fe302f8c569bee6 Mon Sep 17 00:00:00 2001
From: Ashish Gupta <ashish@getcollate.io>
Date: Thu, 4 Apr 2024 10:54:29 +0530
Subject: [PATCH] #15236: fix redundent scrollbars on UI (#15779)

* fix redundent scrollbars on UI

* minor optimizaion
---
 .../TaskFeedCard/TaskFeedCard.component.tsx     |  4 +++-
 .../TaskFeedCard/task-feed-card.less            | 13 -------------
 .../test-case-incident-tab.style.less           |  1 +
 .../Profiler/TableProfiler/table-profiler.less  |  2 +-
 .../Database/TableQueries/QueryCard.tsx         |  4 ++--
 .../QueryUsedByOtherTable.component.tsx         | 14 ++++++++------
 .../TableQueryRightPanel.component.tsx          |  2 +-
 .../Entity/Task/TaskTab/TaskTab.component.tsx   |  4 +++-
 .../Entity/Task/TaskTab/task-tab.less           | 13 -------------
 .../TotalDataAssetsWidget.component.tsx         |  4 +++-
 .../src/main/resources/ui/src/styles/app.less   | 17 +++++++++++++++++
 .../ui/src/styles/components/size.less          |  8 --------
 .../main/resources/ui/src/styles/layout.less    |  7 +++++++
 13 files changed, 46 insertions(+), 47 deletions(-)

diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx
index 2a01cb217c0..3a8b777f5fd 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/TaskFeedCard.component.tsx
@@ -155,7 +155,9 @@ const TaskFeedCard = ({
       )}
       data-testid="task-feed-card">
       <Row gutter={[0, 8]}>
-        <Col className="d-flex items-center" span={24}>
+        <Col
+          className="d-flex items-center task-feed-message-container"
+          span={24}>
           <Icon
             className="m-r-xs"
             component={
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/task-feed-card.less b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/task-feed-card.less
index 5cceb068bd7..0bd818c3a20 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/task-feed-card.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/ActivityFeed/TaskFeedCard/task-feed-card.less
@@ -22,16 +22,3 @@
     margin-right: 4px;
   }
 }
-
-.task-feed-message {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  &:hover {
-    .ant-typography {
-      color: @primary-color;
-    }
-  }
-}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseIncidentTab/test-case-incident-tab.style.less b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseIncidentTab/test-case-incident-tab.style.less
index 4fee6df619c..96f6cd8db82 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseIncidentTab/test-case-incident-tab.style.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQuality/IncidentManager/TestCaseIncidentTab/test-case-incident-tab.style.less
@@ -35,6 +35,7 @@
     border-left: @global-border;
     height: @entity-details-tab-height;
     overflow-y: scroll;
+    overflow-x: hidden;
   }
 }
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/table-profiler.less b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/table-profiler.less
index 11e35621977..9f56af2cea2 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/table-profiler.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/Profiler/TableProfiler/table-profiler.less
@@ -50,7 +50,7 @@
     padding-right: 1px !important;
   }
   .data-quality-content-panel {
-    overflow: scroll;
+    overflow-y: scroll;
   }
 }
 .sql-editor-container {
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryCard.tsx
index 6f54df40a90..a44240da5dc 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryCard.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryCard.tsx
@@ -251,14 +251,14 @@ const QueryCard: FC<QueryCardProp> = ({
             />
           </div>
           <Row align="middle" className="p-y-md border-top">
-            <Col className="p-l-md" span={16}>
+            <Col className="p-l-md" span={20}>
               <QueryUsedByOtherTable
                 isEditMode={isEditMode}
                 query={query}
                 onChange={(value) => setSelectedTables(value)}
               />
             </Col>
-            <Col span={8}>
+            <Col span={4}>
               {isEditMode && (
                 <Space
                   align="end"
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryUsedByOtherTable/QueryUsedByOtherTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryUsedByOtherTable/QueryUsedByOtherTable.component.tsx
index 28db77322c1..bc6ae182ca4 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryUsedByOtherTable/QueryUsedByOtherTable.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/QueryUsedByOtherTable/QueryUsedByOtherTable.component.tsx
@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Popover, Space, Typography } from 'antd';
+import { Col, Popover, Row, Space, Typography } from 'antd';
 import { DefaultOptionType } from 'antd/lib/select';
 import { isArray, isUndefined, slice, uniqBy } from 'lodash';
 import React, { useEffect, useMemo, useState } from 'react';
@@ -171,7 +171,7 @@ const QueryUsedByOtherTable = ({
     ) : (
       <AsyncSelect
         api={fetchTableEntity}
-        className="w-min-15"
+        className="w-min-15 w-full"
         data-testid="edit-query-used-in"
         defaultValue={defaultValue}
         mode="multiple"
@@ -192,10 +192,12 @@ const QueryUsedByOtherTable = ({
   }, [isEditMode]);
 
   return (
-    <Space className="m-b-0" data-testid="para-container">
-      <Text>{`${t('message.query-used-by-other-tables')}:`}</Text>
-      {isEditMode ? selectList : tableNames}
-    </Space>
+    <Row wrap data-testid="para-container">
+      <Col flex="200px">
+        <Text>{`${t('message.query-used-by-other-tables')}:`}</Text>
+      </Col>
+      <Col>{isEditMode ? selectList : tableNames}</Col>
+    </Row>
   );
 };
 
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueryRightPanel/TableQueryRightPanel.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueryRightPanel/TableQueryRightPanel.component.tsx
index 3a6f7a51e77..fe560737b9b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueryRightPanel/TableQueryRightPanel.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Database/TableQueries/TableQueryRightPanel/TableQueryRightPanel.component.tsx
@@ -81,7 +81,7 @@ const TableQueryRightPanel = ({
       {isLoading ? (
         <Loader />
       ) : (
-        <Row className="m-y-md p-x-md" gutter={[16, 40]}>
+        <Row className="m-y-md p-x-md w-full" gutter={[16, 40]}>
           <Col span={24}>
             <Space className="relative" direction="vertical" size={4}>
               <Space align="center" className="w-full" size={0}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTab.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTab.component.tsx
index 961b0fc5b9f..630fe95ba9d 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTab.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/TaskTab.component.tsx
@@ -751,7 +751,9 @@ export const TaskTab = ({
 
   return (
     <Row className="p-y-sm p-x-md" data-testid="task-tab" gutter={[0, 24]}>
-      <Col className="d-flex items-center" span={24}>
+      <Col
+        className="d-flex items-center task-feed-message-container"
+        span={24}>
         <Icon
           className="m-r-xs"
           component={
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/task-tab.less b/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/task-tab.less
index 90d439b890e..485ed83cb2b 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/task-tab.less
+++ b/openmetadata-ui/src/main/resources/ui/src/components/Entity/Task/TaskTab/task-tab.less
@@ -18,16 +18,3 @@
     width: 100%;
   }
 }
-
-.task-feed-message {
-  height: 100%;
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-
-  &:hover {
-    .ant-typography {
-      color: @primary-color;
-    }
-  }
-}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx
index 3abf5220620..848bdf102e7 100644
--- a/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx
+++ b/openmetadata-ui/src/main/resources/ui/src/components/MyData/Widgets/TotalDataAssetsWidget/TotalDataAssetsWidget.component.tsx
@@ -184,7 +184,9 @@ const TotalDataAssetsWidget = ({
             </div>
           </Col>
           {isWidgetSizeLarge && (
-            <Col className="overflow-y-scroll h-max-full" span={10}>
+            <Col
+              className="overflow-y-scroll overflow-x-hidden h-max-full"
+              span={10}>
               <TotalEntityInsightSummary
                 entities={entities}
                 latestData={latestData}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
index f00ffa8d798..a97ea4201e3 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less
@@ -754,3 +754,20 @@ a[href].link-text-grey,
   right: 20px;
   z-index: 1001;
 }
+
+// Task Feed Message Container
+
+.task-feed-message-container {
+  .task-feed-message {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    &:hover {
+      .ant-typography {
+        color: @primary-color;
+      }
+    }
+  }
+}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less b/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
index 6f48416a224..8eb3bdcf6da 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/components/size.less
@@ -302,11 +302,3 @@
 .max-width-md {
   max-width: 768px;
 }
-
-.overflow-y-scroll {
-  overflow-y: scroll;
-}
-
-.overflow-x-scroll {
-  overflow-x: scroll;
-}
diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/layout.less b/openmetadata-ui/src/main/resources/ui/src/styles/layout.less
index 720276ee532..a49ede6d495 100644
--- a/openmetadata-ui/src/main/resources/ui/src/styles/layout.less
+++ b/openmetadata-ui/src/main/resources/ui/src/styles/layout.less
@@ -17,6 +17,13 @@
 .overflow-y-scroll {
   overflow-y: scroll;
 }
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
 .overflow-wrap-anywhere {
   overflow-wrap: anywhere;
 }