fix: review

Author: Raubzeug

src/containers/Cluster/Cluster.scss

@@ -8,13 +8,27 @@
 
     width: 100%;
     height: 100%;
-    padding: 0 var(--cluster-side-padding);
+
+    &__sticky-wrapper {
+        padding: 0 var(--cluster-side-padding);
+    }
+
+    &__dashboard {
+        position: sticky;
+        left: 0;
+
+        padding: 0 var(--cluster-side-padding);
+    }
+
+    &__content {
+        padding: 0 var(--cluster-side-padding);
+    }
 
     &__header {
         position: sticky;
         left: 0;
 
-        padding: 20px 0;
+        padding: var(--g-spacing-5) var(--cluster-side-padding);
     }
 
     &__title {
@@ -31,13 +45,8 @@
     &__tabs-sticky-wrapper {
         z-index: 3;
 
-        width: calc(100% + var(--cluster-side-padding) * 2);
         margin-top: 20px;
-        margin-right: calc(var(--cluster-side-padding) * -2);
-        padding-right: calc(var(--cluster-side-padding) * 1);
-        padding-left: var(--cluster-side-padding);
-
-        transform: translateX(calc(var(--cluster-side-padding) * -1));
+        padding: 0 var(--cluster-side-padding);
         @include mixins.sticky-top();
     }
     &__tabs {

src/containers/Cluster/Cluster.tsx

@@ -123,13 +123,15 @@ export function Cluster({
                 <AutoRefreshControl className={b('auto-refresh-control')} />
             </div>
             {isClusterDashboardAvailable && (
-                <ClusterOverview
-                    cluster={cluster ?? {}}
-                    groupStats={groupsStats}
-                    loading={infoLoading}
-                    error={clusterError || cluster?.error}
-                    additionalClusterProps={additionalClusterProps}
-                />
+                <div className={b('dashboard')}>
+                    <ClusterOverview
+                        cluster={cluster ?? {}}
+                        groupStats={groupsStats}
+                        loading={infoLoading}
+                        error={clusterError || cluster?.error}
+                        additionalClusterProps={additionalClusterProps}
+                    />
+                </div>
             )}
             <div className={b('tabs-sticky-wrapper')}>
                 <Tabs
@@ -153,46 +155,54 @@ export function Cluster({
                     }}
                 />
             </div>
-            <Switch>
-                <Route
-                    path={
-                        getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets)).pathname
-                    }
-                >
-                    <TabletsTable loading={infoLoading} tablets={clusterTablets} />
-                </Route>
-                <Route
-                    path={
-                        getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants)).pathname
-                    }
-                >
-                    <Tenants additionalTenantsProps={additionalTenantsProps} />
-                </Route>
-                <Route
-                    path={getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname}
-                >
-                    <Nodes parentRef={container} additionalNodesProps={additionalNodesProps} />
-                </Route>
-                <Route
-                    path={
-                        getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage)).pathname
-                    }
-                >
-                    <PaginatedStorage parentRef={container} />
-                </Route>
-                <Route
-                    path={
-                        getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions)).pathname
-                    }
-                >
-                    <VersionsContainer cluster={cluster} loading={infoLoading} />
-                </Route>
-                <Route
-                    render={() => (
-                        <Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
-                    )}
-                />
-            </Switch>
+            <div className={b('content')}>
+                <Switch>
+                    <Route
+                        path={
+                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.tablets))
+                                .pathname
+                        }
+                    >
+                        <TabletsTable loading={infoLoading} tablets={clusterTablets} />
+                    </Route>
+                    <Route
+                        path={
+                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.tenants))
+                                .pathname
+                        }
+                    >
+                        <Tenants additionalTenantsProps={additionalTenantsProps} />
+                    </Route>
+                    <Route
+                        path={
+                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.nodes)).pathname
+                        }
+                    >
+                        <Nodes parentRef={container} additionalNodesProps={additionalNodesProps} />
+                    </Route>
+                    <Route
+                        path={
+                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.storage))
+                                .pathname
+                        }
+                    >
+                        <PaginatedStorage parentRef={container} />
+                    </Route>
+                    <Route
+                        path={
+                            getLocationObjectFromHref(getClusterPath(clusterTabsIds.versions))
+                                .pathname
+                        }
+                    >
+                        <VersionsContainer cluster={cluster} loading={infoLoading} />
+                    </Route>
+                    <Route
+                        render={() => (
+                            <Redirect to={getLocationObjectFromHref(getClusterPath(activeTabId))} />
+                        )}
+                    />
+                </Switch>
+            </div>
         </div>
     );
 }

src/containers/Cluster/ClusterOverview/ClusterOverview.scss

@@ -30,8 +30,6 @@
     &__overview-wrapper {
         --g-button-background-color-hover: var(--g-color-base-background);
         --g-button-padding: 0;
-        position: sticky;
-        left: 0;
 
         padding: var(--g-spacing-4);