Remove excessive scrollbars from the TabLayout view

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>

src/renderer/components/+cluster/cluster-overview.tsx

@@ -102,7 +102,7 @@ class NonInjectedClusterOverview extends React.Component<Dependencies> {
     const isMetricHidden = hostedCluster.isMetricHidden(ClusterMetricsResourceType.Cluster);
 
     return (
-      <TabLayout>
+      <TabLayout scrollable>
         <div className={styles.ClusterOverview} data-testid="cluster-overview-page">
           {this.renderClusterOverview(isLoaded, isMetricHidden)}
         </div>

src/renderer/components/+workloads-overview/overview.tsx

@@ -103,7 +103,7 @@ class NonInjectedWorkloadsOverview extends React.Component<Dependencies> {
 
   render() {
     return (
-      <SiblingsInTabLayout>
+      <SiblingsInTabLayout scrollable>
         <div className="WorkloadsOverview flex column gaps" data-testid="page-for-workloads-overview">
           <div className="header flex gaps align-center">
             <h5 className="box grow">Overview</h5>

src/renderer/components/item-object-list/item-list-layout.scss

@@ -31,7 +31,7 @@
 
   > .items {
     position: relative;
-    min-height: 200px;
+    min-height: 130px;
   }
 }
 

src/renderer/components/layout/main-layout.module.scss

@@ -23,9 +23,7 @@
 }
 
 .contents {
-  grid-area: contents;
-  overflow: auto;
-  height: calc(100vh - var(--status-bar-height) - var(--main-layout-header));
+  overflow: hidden;
 }
 
 .footer {

src/renderer/components/layout/siblings-in-tab-layout.tsx

@@ -12,6 +12,7 @@ import type { HierarchicalSidebarItem } from "./sidebar-items.injectable";
 
 interface SiblingTabLayoutProps {
   children: React.ReactNode;
+  scrollable?: boolean;
 }
 
 interface Dependencies {
@@ -19,13 +20,14 @@ interface Dependencies {
 }
 
 const NonInjectedSiblingsInTabLayout = observer(
-  ({ tabs, children }: Dependencies & SiblingTabLayoutProps) => {
+  ({ tabs, children, ...other }: Dependencies & SiblingTabLayoutProps) => {
     const dereferencedTabs = tabs.get();
 
     if (dereferencedTabs.length) {
       return (
         <TabLayout
           tabs={dereferencedTabs}
+          {...other}
         >
           {children}
         </TabLayout>

src/renderer/components/layout/tab-layout-2.tsx

@@ -15,11 +15,13 @@ import type { HierarchicalSidebarItem } from "./sidebar-items.injectable";
 export interface TabLayoutProps {
   tabs?: HierarchicalSidebarItem[];
   children?: React.ReactNode;
+  scrollable?: boolean;
 }
 
 export const TabLayout = observer(
   ({
     tabs = [],
+    scrollable,
     children,
   }: TabLayoutProps) => {
     const hasTabs = tabs.length > 0;
@@ -50,7 +52,7 @@ export const TabLayout = observer(
           </Tabs>
         )}
 
-        <main>
+        <main className={cssNames({ scrollable })}>
           <ErrorBoundary>
             {children}
           </ErrorBoundary>

src/renderer/components/layout/tab-layout.scss

@@ -11,16 +11,20 @@
 
   > .Tabs {
     background: var(--layoutTabsBackground);
-    min-height: 32px;
+    min-height: 36px;
   }
 
   main {
     $spacing: $margin * 2;
 
     flex-grow: 1;
-    overflow-y: scroll; // always reserve space for scrollbar (17px)
+    overflow-y: hidden;
     overflow-x: auto;
     margin: $spacing;
-    margin-right: 0;
+
+    &.scrollable {
+      overflow-y: scroll;
+      margin-right: 0;
+    }
   }
 }

src/renderer/components/layout/tab-layout.tsx

@@ -20,6 +20,7 @@ export interface TabLayoutProps {
   contentClass?: IClassName;
   tabs?: TabLayoutRoute[];
   children?: ReactNode;
+  scrollable?: boolean;
 }
 
 export interface TabLayoutRoute {
@@ -31,7 +32,7 @@ export interface TabLayoutRoute {
   default?: boolean; // initial tab to open with provided `url, by default tabs[0] is used
 }
 
-export const TabLayout = observer(({ className, contentClass, tabs = [], children }: TabLayoutProps) => {
+export const TabLayout = observer(({ className, contentClass, tabs = [], scrollable, children }: TabLayoutProps) => {
   const currentLocation = navigation.location.pathname;
   const hasTabs = tabs.length > 0;
   const startTabUrl = hasTabs ? (tabs.find(tab => tab.default) || tabs[0])?.url : null;
@@ -50,7 +51,7 @@ export const TabLayout = observer(({ className, contentClass, tabs = [], childre
           ))}
         </Tabs>
       )}
-      <main className={cssNames(contentClass)}>
+      <main className={cssNames(contentClass, { scrollable })}>
         <ErrorBoundary>
           {hasTabs && (
             <Switch>

src/renderer/components/table/table.scss

@@ -14,6 +14,10 @@
     overflow: auto;
   }
 
+  &.scrollable.virtual {
+    overflow: unset;
+  }
+
   &.selectable {
     .TableHead, .TableRow {
       padding: 0 $padding;