#15236: fix redundent scrollbars on UI (#15779)

* fix redundent scrollbars on UI

* minor optimizaion

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={

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;
-    }
-  }
-}

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;
   }
 }
 

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 {

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"

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>
   );
 };
 

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}>

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={

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;
-    }
-  }
-}

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}

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;
+      }
+    }
+  }
+}

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;
-}

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;
 }