Repository: devtron-labs/dashboard
Pull request #2520: fix: remove calc from RB
Author: login: Elessar1802
Created: 2025-03-05T08:11:37Z | Merged: 2025-03-06T13:00:38Z

# Description

Please include a summary of the change and which issue is fixed. Please also include relevant motivation and context. List any dependencies that are required for this change.

Fixes # (issue)

## Type of change

- [ ] Bug fix (non-breaking change which fixes an issue)
- [ ] New feature (non-breaking change which adds functionality)
- [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
- [ ] This change requires a documentation update

# How Has This Been Tested?
Please describe the tests that you ran to verify your changes. Provide instructions so we can reproduce. Please also list any relevant details for your test configuration

- [ ] Test A
- [ ] Test B


# Checklist:

* [ ] The title of the PR states what changed and the related issues number (used for the release note).
* [ ] Does this PR require documentation updates?
* [ ] I've updated documentation as required by this PR.
* [ ] I have performed a self-review of my own code
* [ ] I have commented my code, particularly in hard-to-understand areas





Diff:
diff --git a/src/components/ClusterNodes/ClusterOverview.tsx b/src/components/ClusterNodes/ClusterOverview.tsx
index 6ccc7dd371..276044f725 100644
--- a/src/components/ClusterNodes/ClusterOverview.tsx
+++ b/src/components/ClusterNodes/ClusterOverview.tsx
@@ -485,19 +485,19 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
                 />
             )
         }
+
         if (isLoading || errorMsg) {
             return (
-                <div className="flex flex-grow-1">
-                    <ConnectingToClusterState
-                        loader={isLoading}
-                        errorMsg={errorMsg}
-                        selectedCluster={selectedCluster}
-                        handleRetry={handleRetry}
-                        requestAbortController={requestAbortControllerRef.current}
-                    />
-                </div>
+                <ConnectingToClusterState
+                    loader={isLoading}
+                    errorMsg={errorMsg}
+                    selectedCluster={selectedCluster}
+                    handleRetry={handleRetry}
+                    requestAbortController={requestAbortControllerRef.current}
+                />
             )
         }
+
         return (
             <div
                 className="p-20 dc__column-gap-32 h-100 dc__overflow-auto flexbox flex-justify-center"
@@ -522,19 +522,7 @@ function ClusterOverview({ selectedCluster, addTab }: ClusterOverviewProps) {
         )
     }
 
-    const renderClusterSummary = (): JSX.Element => {
-        return (
-            <div
-                className={`dc__border-left resource-details-container bg__primary dc__overflow-auto ${
-                    errorStatusCode || errorCode ? 'flex' : ''
-                }`}
-            >
-                {renderState()}
-            </div>
-        )
-    }
-
-    return renderClusterSummary()
+    return renderState()
 }
 
 export default React.memo(ClusterOverview)
diff --git a/src/components/ClusterNodes/NodeDetails.tsx b/src/components/ClusterNodes/NodeDetails.tsx
index b9423dc316..cdee1a138b 100644
--- a/src/components/ClusterNodes/NodeDetails.tsx
+++ b/src/components/ClusterNodes/NodeDetails.tsx
@@ -393,14 +393,18 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
         ]
 
         return (
-            <div className="en-2 bw-1 br-4 bg__primary mt-12">
-                <div className="dc__border-bottom px-20">
-                    <TabGroup tabs={tabs} alignActiveBorderWithContainer />
+            <div>
+                <div className="dc__border-bottom dc__position-sticky dc__top-0 dc__zi-1 bg__primary">
+                    <div className="en-2 bw-1 dc__top-radius-4 bg__primary dc__no-bottom-border px-20">
+                        <TabGroup tabs={tabs} alignActiveBorderWithContainer />
+                    </div>
                 </div>
-                <div className=" pr-20 pl-20 pt-12 pb-12">
-                    {selectedSubTabIndex == 0 && renderLabelTab()}
-                    {selectedSubTabIndex == 1 && renderAnnotationTab()}
-                    {selectedSubTabIndex == 2 && renderTaintTab()}
+                <div className="en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20">
+                    <div className=" pr-20 pl-20 pt-12 pb-12">
+                        {selectedSubTabIndex == 0 && renderLabelTab()}
+                        {selectedSubTabIndex == 1 && renderAnnotationTab()}
+                        {selectedSubTabIndex == 2 && renderTaintTab()}
+                    </div>
                 </div>
             </div>
         )
@@ -488,7 +492,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
 
     const renderNodeOverviewCard = (): JSX.Element => {
         return (
-            <div className="en-2 bw-1 br-4 bg__primary dc__position-sticky  top-10">
+            <div className="en-2 bw-1 br-4 bg__primary">
                 <div className="flexbox pt-12 pb-12 pr-16 pl-16 dc__top-radius-4">
                     <span className="fw-6 fs-14 cn-9">Node overview</span>
                 </div>
@@ -536,53 +540,58 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
         if (!nodeDetail.resources?.length) {
             return null
         }
+
         return (
-            <div className="en-2 bw-1 br-4 bg__primary">
-                <div className="resource-row dc__border-bottom fw-6 fs-13 pt-8 pb-8 pr-20 pl-20 cn-7">
-                    <div />
-                    <div>Resource</div>
-                    <div>Requests</div>
-                    <div>Limits</div>
-                    <div>Usage</div>
-                    <div>Allocatable</div>
-                    <div>Capacity</div>
-                </div>
-                {cpuData && (
-                    <div className="resource-row dc__border-bottom-n1 fw-4 fs-13 pt-8 pb-8 pr-20 pl-20 cn-9">
-                        <Cpu className="mt-2 mb-2 icon-dim-18" />
-                        <div>{cpuData.name || '-'}</div>
-                        <div>{cpuData.requestPercentage || '-'}</div>
-                        <div>{cpuData.limitPercentage || '-'}</div>
-                        <div>{cpuData.usagePercentage || '-'}</div>
-                        <div>{cpuData.allocatable || '-'}</div>
-                        <div>{cpuData.capacity || '-'}</div>
-                    </div>
-                )}
-                {memoryData && (
-                    <div className="resource-row dc__border-bottom-n1 fw-4 fs-13 pt-8 pb-8 pr-20 pl-20 cn-9">
-                        <Memory className="mt-2 mb-2 icon-dim-18" />
-                        <div>{memoryData.name || '-'}</div>
-                        <div>{memoryData.requestPercentage || '-'}</div>
-                        <div>{memoryData.limitPercentage || '-'}</div>
-                        <div>{memoryData.usagePercentage || '-'}</div>
-                        <div>{memoryData.allocatable || '-'}</div>
-                        <div>{memoryData.capacity || '-'}</div>
-                    </div>
-                )}
-                {nodeDetail.resources.map((resource) => (
-                    <div
-                        key={resource.name}
-                        className="resource-row dc__border-bottom-n1 fw-4 fs-13 pt-8 pb-8 pr-20 pl-20 cn-9"
-                    >
-                        <Storage className="mt-2 mb-2 icon-dim-18" />
-                        <div>{resource.name || '-'}</div>
-                        <div>{resource.requestPercentage || '-'}</div>
-                        <div>{resource.limitPercentage || '-'}</div>
-                        <div>{resource.usagePercentage || '-'}</div>
-                        <div>{resource.allocatable || '-'}</div>
-                        <div>{resource.capacity || '-'}</div>
+            <div>
+                <div className='dc__border-bottom dc__position-sticky dc__top-0 dc__zi-1 bg__primary'>
+                    <div className="en-2 bw-1 dc__top-radius-4 bg__primary dc__no-bottom-border resource-row dc__border-bottom fw-6 fs-13 pt-8 pb-8 pr-20 pl-20 cn-7">
+                        <div />
+                        <div>Resource</div>
+                        <div>Requests</div>
+                        <div>Limits</div>
+                        <div>Usage</div>
+                        <div>Allocatable</div>
+                        <div>Capacity</div>
                     </div>
-                ))}
+                </div>
+                <div className='en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20'>
+                    {cpuData && (
+                        <div className="resource-row dc__border-bottom-n1 fw-4 fs-13 pt-8 pb-8 pr-20 pl-20 cn-9">
+                            <Cpu className="mt-2 mb-2 icon-dim-18" />
+                            <div>{cpuData.name || '-'}</div>
+                            <div>{cpuData.requestPercentage || '-'}</div>
+                            <div>{cpuData.limitPercentage || '-'}</div>
+                            <div>{cpuData.usagePercentage || '-'}</div>
+                            <div>{cpuData.allocatable || '-'}</div>
+                            <div>{cpuData.capacity || '-'}</div>
+                        </div>
+                    )}
+                    {memoryData && (
+                        <div className="resource-row dc__border-bottom-n1 fw-4 fs-13 pt-8 pb-8 pr-20 pl-20 cn-9">
+                            <Memory className="mt-2 mb-2 icon-dim-18" />
+                            <div>{memoryData.name || '-'}</div>
+                            <div>{memoryData.requestPercentage || '-'}</div>
+                            <div>{memoryData.limitPercentage || '-'}</div>
+                            <div>{memoryData.usagePercentage || '-'}</div>
+                            <div>{memoryData.allocatable || '-'}</div>
+                            <div>{memoryData.capacity || '-'}</div>
+                        </div>
+                    )}
+                    {nodeDetail.resources.map((resource) => (
+                        <div
+                            key={resource.name}
+                            className="resource-row dc__border-bottom-n1 fw-4 fs-13 pt-8 pb-8 pr-20 pl-20 cn-9"
+                        >
+                            <Storage className="mt-2 mb-2 icon-dim-18" />
+                            <div>{resource.name || '-'}</div>
+                            <div>{resource.requestPercentage || '-'}</div>
+                            <div>{resource.limitPercentage || '-'}</div>
+                            <div>{resource.usagePercentage || '-'}</div>
+                            <div>{resource.allocatable || '-'}</div>
+                            <div>{resource.capacity || '-'}</div>
+                        </div>
+                    ))}
+                </div>
             </div>
         )
     }
@@ -675,7 +684,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
                 </div>
                 <div className="en-2 bw-1 br-4 dc__no-top-radius dc__no-top-border bg__primary mb-20">
                     <div className="pods-grid fw-4 fs-13 cn-9">
-                        <header className="bg__primary dc__border-bottom-n1 fw-6">
+                        <header className="bg__primary dc__border-bottom fw-6">
                             {renderPodHeaderCell('Namespace', 'namespace', 'string')}
                             {renderPodHeaderCell('Pod', 'name', 'string')}
                             {renderPodHeaderCell('CPU Requests', 'cpu.requestPercentage', 'number')}
@@ -815,15 +824,16 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
         if (!nodeDetail) {
             return null
         }
+
         return (
-            <div className="node-details-container node-data-wrapper">
-                <div className="ml-20 mr-20 mt-12 node-details-grid">
-                    <div className="fw-6 fs-16 cn-9">
+            <div className="node-details-container node-data-wrapper dc__overflow-hidden flexbox-col flex-grow-1">
+                <div className="mt-12 node-details-grid dc__overflow-hidden">
+                    <div className="pl-20 fw-6 fs-16 cn-9 dc__overflow-auto">
                         {renderErrorOverviewCard()}
                         {renderProbableIssuesOverviewCard()}
                         {renderNodeOverviewCard()}
                     </div>
-                    <div>
+                    <div className='dc__overflow-auto pr-20'>
                         {renderResourceList()}
                         {renderLabelAnnotationTaint()}
                         {renderPodList()}
@@ -909,7 +919,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
 
     const renderYAMLEditor = (): JSX.Element => {
         return (
-            <div className="node-details-container flexbox-col flex-grow-1">
+            <div className="node-details-container__editor flex-grow-1 flexbox-col">
                 <CodeEditor
                     readOnly={!isEdit}
                     diffView={isReviewState}
@@ -919,7 +929,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
                         theme: CodeEditorThemesKeys.vsDarkDT,
                         value: modifiedManifest,
                         defaultValue: (nodeDetail?.manifest && YAMLStringify(nodeDetail.manifest)) || '',
-                        height: 0,
+                        height: '0',
                         onChange: handleEditorValueChange,
                     }}
                     codeMirrorProps={{
@@ -963,7 +973,7 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
 
     const renderConditions = (): JSX.Element => {
         return (
-            <div className="node-details-container">
+            <div className="node-details-container flex-grow-1 flexbox-col dc__overflow-auto">
                 <div className="ml-20 mr-20 mb-12 mt-16 bg__primary br-8 en-2 bw-1">
                     <div className="condition-grid cn-7 fw-6 fs-13 dc__border-bottom pt-8 pl-20 pb-8 pr-20">
                         <div>Type</div>
@@ -1045,19 +1055,17 @@ const NodeDetails = ({ addTab, lowercaseKindToResourceGroupMap, updateTabUrl }:
 
     if (errorResponseCode) {
         return (
-            <div className="bg__primary node-data-container flex">
-                <ErrorScreenManager
-                    code={errorResponseCode}
-                    subtitle={
-                        errorResponseCode == 403 ? unauthorizedInfoText(SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()) : ''
-                    }
-                />
-            </div>
+            <ErrorScreenManager
+                code={errorResponseCode}
+                subtitle={
+                    errorResponseCode == 403 ? unauthorizedInfoText(SIDEBAR_KEYS.nodeGVK.Kind.toLowerCase()) : ''
+                }
+            />
         )
     }
 
     return (
-        <div className="bg__primary node-data-container flexbox-col">
+        <div className="bg__primary node-data-container flex-grow-1 dc__overflow-hidden flexbox-col">
             {loader ? (
                 <Progressing pageLoader size={32} />
             ) : (
diff --git a/src/components/ClusterNodes/clusterNodes.scss b/src/components/ClusterNodes/clusterNodes.scss
index c011e10e25..6e4e2ec9be 100644
--- a/src/components/ClusterNodes/clusterNodes.scss
+++ b/src/components/ClusterNodes/clusterNodes.scss
@@ -111,7 +111,7 @@
 
     .node-details-grid {
         display: grid;
-        grid-template-columns: 300px calc(100vw - 415px);
+        grid-template-columns: 300px auto;
         column-gap: 12px;
 
         .resource-row {
@@ -128,7 +128,6 @@
             .pod-container-header {
                 top: 0px;
                 z-index: 1;
-                padding-top: 10px;
                 background-color: var(--bg-primary);
             }
 
@@ -152,7 +151,7 @@
 
                 header {
                     position: sticky;
-                    top: 46px;
+                    top: 36px;
                     z-index: 1;
                 }
 
@@ -176,6 +175,12 @@
         grid-template-columns: 200px 280px auto;
         column-gap: 16px;
     }
+
+    &__editor {
+        & .react-monaco-editor-container {
+            flex-grow: 1;
+        }
+    }
 }
 
 .cluster-list-main-container,
@@ -424,14 +429,9 @@
     flex-shrink: 0;
 }
 
-.node-data-container {
-    height: calc(100vh - 84px);
-    overflow: hidden;
-
-    .node-data-wrapper {
-        height: calc(100vh - 118px);
-        overflow: auto;
-    }
+.cluster-manifest-header {
+  display: grid;
+  grid-template-columns: 1fr 1fr 30px;
 }
 
 .node-code-editor-header {
diff --git a/src/components/ResourceBrowser/ResourceBrowser.scss b/src/components/ResourceBrowser/ResourceBrowser.scss
index 871527511f..c1de5d360b 100644
--- a/src/components/ResourceBrowser/ResourceBrowser.scss
+++ b/src/components/ResourceBrowser/ResourceBrowser.scss
@@ -17,246 +17,189 @@
 @import '../v2/appDetails/k8Resource/k8resources.scss';
 
 .resource-browser-container {
-    min-width: 1024px;
-
-    .resource-browser {
-        display: grid;
-        grid-template-columns: 220px auto;
-        height: calc(100vh - 84px);
-
-        .k8s-object-container {
-            .k8s-object-kind-search {
-                .kind-search-select__value-container {
-                    .kind-search-icon {
-                        path:nth-child(2) {
-                            fill: var(--N600);
-                        }
-                    }
+    .k8s-object-kind-search {
+        .kind-search-select__value-container {
+            .kind-search-icon {
+                path:nth-child(2) {
+                    fill: var(--N600);
                 }
+            }
+        }
 
-                .kind-search-select__input-container {
-                    input {
-                        max-width: 135px;
-                    }
-                }
+        .kind-search-select__input-container {
+            input {
+                max-width: 135px;
+            }
+        }
 
-                .kind-search-select__menu {
-                    margin-top: 4px;
+        .kind-search-select__menu {
+            margin-top: 4px;
 
-                    .kind-search-select__menu-list {
-                        .kind-search-select__option {
-                            &--highlight {
-                                padding: 0;
-                                background-color: var(--Y200);
-                            }
-                        }
+            .kind-search-select__menu-list {
+                .kind-search-select__option {
+                    &--highlight {
+                        padding: 0;
+                        background-color: var(--Y200);
                     }
                 }
+            }
+        }
 
-                .kind-search-select__indicators {
-                    position: absolute;
-                    top: 15px;
-                    right: 0;
-
-                    .clear-kind-search-icon {
-                        rect {
-                            fill: var(--N600);
-                        }
-                    }
+        .kind-search-select__indicators {
+            position: absolute;
+            top: 15px;
+            right: 0;
 
-                    .kind-search-shortcut-key {
-                        right: 10px;
-                        top: -10px;
-                    }
+            .clear-kind-search-icon {
+                rect {
+                    fill: var(--N600);
                 }
             }
 
-            .k8s-object-wrapper {
-                height: calc(100vh - 140px);
-                overflow: auto;
-
-                .resource-tree-object:hover {
-                    background-color: var(--bg-secondary);
-                    color: var(--N900);
-                }
+            .kind-search-shortcut-key {
+                right: 10px;
+                top: -10px;
             }
         }
+    }
 
-        .resource-list-container {
-            .node-listing-search-container {
-                display: grid;
-                grid-template-columns: auto 160px 1px 180px;
-                column-gap: 8px;
+    .resource-list-container {
+        .node-listing-search-container {
+            display: grid;
+            grid-template-columns: auto 160px 1px 180px;
+            column-gap: 8px;
 
-                &__shortcut-key {
-                    right: 10px;
-                    top: 6px;
-                }
+            &__shortcut-key {
+                right: 10px;
+                top: 6px;
             }
+        }
 
-            &.no-result-container {
-                height: calc(100vh - 92px);
-                overflow: hidden;
-            }
+        .resource-filter-options-container {
+            &__search-box {
+                width: 250px;
 
-            .resource-filter-options-container {
-                &__search-box {
-                    width: 250px;
-                    .resource-search-shortcut-key {
-                        right: 8px;
-                        top: 50%;
-                        transform: translateY(-50%);
-                    }
+                .resource-search-shortcut-key {
+                    right: 8px;
+                    top: 50%;
+                    transform: translateY(-50%);
                 }
             }
+        }
 
-            .scrollable-resource-list {
-                height: calc(100vh - 144px);
-                &.paginated-list-view {
-                    height: calc(100vh - 201px);
+        .scrollable-resource-list {
+            &__row {
+                width: max-content;
+                min-width: 100%;
+                display: grid;
+
+                & > :first-child {
+                    position: sticky;
+                    left: 0;
+                    z-index: 1;
+                    background-color: var(--bg-primary);
+                    border-right: 1px solid var(--border-primary);
+                    padding-left: 20px;
                 }
 
-                &.sync-error {
-                    height: calc(100vh - 176px);
+                &:hover > :first-child {
+                    background-color: var(--bg-hover-opaque);
                 }
 
-                &.paginated-list-view-with-sync-error {
-                    height: calc(100vh - 233px);
+                & > :last-child {
+                    padding-right: 20px;
                 }
-                &__row {
-                    width: max-content;
-                    min-width: 100%;
-                    display: grid;
 
+                &.no-hover-bg {
                     &:hover > :first-child {
-                        background-color: var(--bg-hover-opaque);
-                    }
-
-                    & > :first-child {
-                        position: sticky;
-                        left: 0;
-                        z-index: 1;
                         background-color: var(--bg-primary);
-                        border-right: 1px solid var(--border-primary);
-                        padding-left: 20px;
-                    }
-
-                    & > :last-child {
-                        padding-right: 20px;
-                    }
-
-                    &.no-hover-bg {
-                        &:hover > :first-child {
-                            background-color: var(--bg-primary);
-                        }
                     }
                 }
             }
+        }
 
-            .scrollable-event-list {
-                height: calc(100vh - 180px);
-                &.paginated-list-view {
-                    height: calc(100vh - 201px);
-                }
-
-                &.sync-error {
-                    height: calc(100vh - 212px);
-                }
-
-                &.paginated-list-view-with-sync-error {
-                    height: calc(100vh - 269px);
-                }
-            }
+        .scrollable-resource-list,
+        .scrollable-event-list {
+            .hover-class {
+                &:hover {
+                    background-color: var(--bg-hover);
+                    .sticky-column {
+                        background-color: var(--bg-hover);
+                    }
 
-            .scrollable-resource-list,
-            .scrollable-event-list {
-                .hover-class {
-                    &:hover {
-                        background-color: var(--bg-hover-opaque);
-                        .sticky-column {
-                            background-color: var(--bg-hover-opaque);
-                        }
-
-                        .restart-icon path {
-                            stroke: var(--B500);
-                        }
+                    .restart-icon path {
+                        stroke: var(--B500);
                     }
                 }
             }
+        }
 
-            .pagination-wrapper {
-                &.resource-browser-paginator {
-                    .select__button {
-                        width: fit-content;
-                    }
+        .pagination-wrapper {
+            &.resource-browser-paginator {
+                .select__button {
+                    width: fit-content;
                 }
             }
+        }
 
-            .sticky-column {
-                left: 0;
-                z-index: 1;
-                background-color: var(--bg-primary);
-            }
+        .sticky-column {
+            left: 0;
+            z-index: 1;
+            background-color: var(--bg-primary);
+        }
+
+        .event-list-row {
+            display: grid;
+            grid-template-columns: 80px minmax(200px, auto) 130px 200px 150px repeat(3, 70px);
+            column-gap: 16px;
 
-            .event-list-row {
+            &__explain {
                 display: grid;
-                grid-template-columns: 80px minmax(200px, auto) 130px 200px 150px repeat(3, 70px);
+                grid-template-columns: 80px minmax(200px, auto) 130px 150px 150px repeat(4, 70px);
                 column-gap: 16px;
 
-                &__explain {
-                    display: grid;
-                    grid-template-columns: 80px minmax(200px, auto) 130px 150px 150px repeat(4, 70px);
-                    column-gap: 16px;
-
-                    &:hover {
-                        .explain-ai-button {
-                            visibility: visible;
-                        }
+                &:hover {
+                    .explain-ai-button {
+                        visibility: visible;
                     }
                 }
             }
+        }
 
-            .explain-ai-button {
-                visibility: hidden;
-            }
+        .explain-ai-button {
+            visibility: hidden;
+        }
 
-            .node-actions-menu-icon {
-                path:nth-child(2) {
-                    fill: var(--N600);
-                }
+        .node-actions-menu-icon {
+            path:nth-child(2) {
+                fill: var(--N600);
             }
         }
     }
-}
 
-.create-resource-container {
-    .created-resource-row {
-        display: grid;
-        grid-template-columns: 150px 200px 150px auto;
-        grid-column-gap: 16px;
-    }
+    .create-resource-container {
+        .created-resource-row {
+            display: grid;
+            grid-template-columns: 150px 200px 150px auto;
+            grid-column-gap: 16px;
+        }
 
-    .created-resource-list {
-        height: calc(100vh - 202px);
-        min-height: 220px;
-        overflow-y: auto;
+        .created-resource-list {
+            overflow-y: auto;
 
-        .created-resource-row {
-            &:hover {
-                background-color: var(--bg-secondary);
+            .created-resource-row {
+                &:hover {
+                    background-color: var(--bg-secondary);
+                }
             }
         }
-    }
 
-    .react-monaco-editor-container {
-        flex-grow: 1;
+        & .react-monaco-editor-container {
+            flex-grow: 1;
+        }
     }
 }
 
-.resource-details-container {
-    height: calc(100vh - 84px);
-}
-
 .cluster-terminal-hidden {
     visibility: hidden;
     height: 0;
diff --git a/src/components/ResourceBrowser/ResourceBrowser.tsx b/src/components/ResourceBrowser/ResourceBrowser.tsx
index 278eecb060..67244a7f0c 100644
--- a/src/components/ResourceBrowser/ResourceBrowser.tsx
+++ b/src/components/ResourceBrowser/ResourceBrowser.tsx
@@ -82,7 +82,7 @@ const ResourceBrowser: React.FC = () => {
     }
 
     return (
-        <div className="resource-browser-container flexbox-col h-100 bg__primary">
+        <div className="flexbox-col h-100 bg__primary">
             <PageHeader
                 isBreadcrumbs={false}
                 headerName="Kubernetes Resource Browser"
diff --git a/src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx b/src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx
index 3a6a4c07a3..6b7d15a2e9 100644
--- a/src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx
+++ b/src/components/ResourceBrowser/ResourceList/BaseResourceList.tsx
@@ -640,7 +640,7 @@ const BaseResourceListContent = ({
 
     return (
         <div
-            className={`resource-list-container dc__border-left flexbox-col dc__overflow-hidden ${
+            className={`resource-list-container flex-grow-1 dc__border-left flexbox-col dc__overflow-hidden ${
                 filteredResourceList?.length === 0 ? 'no-result-container' : ''
             }`}
             ref={parentRef}
diff --git a/src/components/ResourceBrowser/ResourceList/ConnectingToClusterState.tsx b/src/components/ResourceBrowser/ResourceList/ConnectingToClusterState.tsx
index fd85891671..5388e441df 100644
--- a/src/components/ResourceBrowser/ResourceList/ConnectingToClusterState.tsx
+++ b/src/components/ResourceBrowser/ResourceList/ConnectingToClusterState.tsx
@@ -110,12 +110,7 @@ const ConnectingToClusterState: React.FC<ConnectingToClusterStateProps> = ({
     }
 
     const renderClusterState = () => (
-        <div
-            className="flex column dc__text-center"
-            style={{
-                height: 'calc(100vh - 152px)',
-            }}
-        >
+        <div className="flex column dc__text-center">
             {renderSelectionState()}
             {showCancel && !errorMsg && (
                 <span className="fs-13 fw-6 lh-20 cr-5 cursor" onClick={handleCancelClick}>
@@ -125,16 +120,7 @@ const ConnectingToClusterState: React.FC<ConnectingToClusterStateProps> = ({
         </div>
     )
 
-    return (
-        <div
-            className="flex column bg__primary"
-            style={{
-                height: 'calc(100vh - 84px)',
-            }}
-        >
-            {renderClusterState()}
-        </div>
-    )
+    return <div className="flex column flex-grow-1 bg__primary">{renderClusterState()}</div>
 }
 
 export default ConnectingToClusterState
diff --git a/src/components/ResourceBrowser/ResourceList/CreateResource.tsx b/src/components/ResourceBrowser/ResourceList/CreateResource.tsx
index 759ed2d52e..7e96beef7b 100644
--- a/src/components/ResourceBrowser/ResourceList/CreateResource.tsx
+++ b/src/components/ResourceBrowser/ResourceList/CreateResource.tsx
@@ -138,6 +138,7 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
                 />
             )
         }
+
         if (showCodeEditorView) {
             return (
                 <>
@@ -146,6 +147,7 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
                         classname="info_bar dc__no-border-radius dc__no-top-border"
                         Icon={InfoIcon}
                     />
+
                     <CodeEditor
                         mode={MODES.YAML}
                         noParsing
@@ -167,8 +169,9 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
                 </>
             )
         }
+
         return (
-            <div>
+            <div className="flex-grow-1 dc__overflow-hidden flexbox-col">
                 <div className="created-resource-row dc__border-bottom pt-8 pr-20 pb-8 pl-20">
                     {APP_STATUS_HEADERS.map((headerKey) => (
                         <div className="fs-13 fw-6 cn-7" key={headerKey}>
@@ -176,7 +179,7 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
                         </div>
                     ))}
                 </div>
-                <div className="created-resource-list fs-13">
+                <div className="created-resource-list dc__overflow-auto fs-13">
                     {resourceResponse?.map((resource) => (
                         <div
                             className="created-resource-row pt-8 pr-20 pb-8 pl-20"
@@ -218,7 +221,7 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
     }
 
     return (
-        <Drawer position="right" width="75%" minWidth="1024px" maxWidth="1200px" onEscape={onClose}>
+        <Drawer position="right" width="1024px" onEscape={onClose}>
             <div className="create-resource-container bg__primary h-100 flexbox-col">
                 <div className="flex flex-align-center flex-justify bg__primary pt-16 pr-20 pb-16 pl-20 dc__border-bottom">
                     <h2 className="fs-16 fw-6 lh-1-43 m-0">{CREATE_RESOURCE_MODAL_MESSAGING.title}</h2>
@@ -231,7 +234,7 @@ export const CreateResource: React.FC<CreateResourceType> = ({ closePopup, clust
                         <CloseIcon className="icon-dim-24" />
                     </button>
                 </div>
-                <div className="flex-grow-1 flexbox-col">{renderPageContent()}</div>
+                {renderPageContent()}
                 {renderFooter()}
             </div>
         </Drawer>
diff --git a/src/components/ResourceBrowser/ResourceList/K8SResourceTabComponent.tsx b/src/components/ResourceBrowser/ResourceList/K8SResourceTabComponent.tsx
index 45480a8bb7..87f9ea29d0 100644
--- a/src/components/ResourceBrowser/ResourceList/K8SResourceTabComponent.tsx
+++ b/src/components/ResourceBrowser/ResourceList/K8SResourceTabComponent.tsx
@@ -74,7 +74,7 @@ const K8SResourceTabComponent = ({
     }
 
     return (
-        <div className="resource-browser bg__primary">
+        <div className="flex-grow-1 flexbox bg__primary dc__overflow-hidden">
             <Sidebar
                 apiResources={k8SObjectMap?.result.apiResources || null}
                 selectedResource={selectedResource}
diff --git a/src/components/ResourceBrowser/ResourceList/ResourceList.tsx b/src/components/ResourceBrowser/ResourceList/ResourceList.tsx
index 36323a2a85..300cabaaf1 100644
--- a/src/components/ResourceBrowser/ResourceList/ResourceList.tsx
+++ b/src/components/ResourceBrowser/ResourceList/ResourceList.tsx
@@ -453,7 +453,7 @@ const ResourceList = () => {
                 updateTabUrl={getUpdateTabUrlForId(tabId)}
             />
         ) : (
-            <div className="resource-details-container flexbox-col">
+            <div className="flexbox-col flex-grow-1 dc__overflow-hidden">
                 <NodeDetailComponent
                     key={dynamicActiveTab.componentKey}
                     loadingResources={rawGVKLoader}
@@ -557,7 +557,11 @@ const ResourceList = () => {
                             return (
                                 <div
                                     key={currentTab.componentKey}
-                                    className={!tabs[index].isSelected ? hideClassName : ''}
+                                    className={
+                                        !tabs[index].isSelected
+                                            ? hideClassName
+                                            : 'flex-grow-1 flexbox-col dc__overflow-hidden'
+                                    }
                                 >
                                     {component}
                                 </div>
diff --git a/src/components/ResourceBrowser/ResourceList/Sidebar.tsx b/src/components/ResourceBrowser/ResourceList/Sidebar.tsx
index 7c6e292fdf..f25341699b 100644
--- a/src/components/ResourceBrowser/ResourceList/Sidebar.tsx
+++ b/src/components/ResourceBrowser/ResourceList/Sidebar.tsx
@@ -308,8 +308,8 @@ const Sidebar = ({
     const noOptionsMessage = () => 'No matching kind'
 
     return (
-        <div className="k8s-object-container">
-            <div className="k8s-object-kind-search bg__primary pt-16 pb-8 w-200 dc__m-auto cursor">
+        <div className="w-250 dc__no-shrink dc__overflow-hidden flexbox-col">
+            <div className="k8s-object-kind-search bg__primary pt-16 pb-8 px-10 w-100 cursor">
                 <ReactSelect
                     ref={searchInputRef}
                     placeholder="Jump to Kind"
@@ -338,7 +338,8 @@ const Sidebar = ({
                     }}
                 />
             </div>
-            <div className="k8s-object-wrapper flexbox-col dc__border-top-n1 p-8 dc__user-select-none">
+
+            <div className="dc__overflow-auto flexbox-col flex-grow-1 dc__border-top-n1 p-8 dc__user-select-none">
                 <div className="pb-8 flexbox-col">
                     {!!list?.size && !!list.get(AggregationKeys.Nodes) && (
                         <SidebarChildButton
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Events.component.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Events.component.tsx
index cc02e3ed32..8336f568ee 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Events.component.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Events.component.tsx
@@ -97,7 +97,7 @@ const EventsComponent = ({
 
     return (
         <div
-            className="flex-grow-1"
+            className="flex-grow-1 flexbox-col dc__overflow-auto"
             style={{ background: 'var(--terminal-bg)' }}
         >
             {renderContent()}
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/EventsTable.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/EventsTable.tsx
index 5577b3f828..65d0377091 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/EventsTable.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/EventsTable.tsx
@@ -34,13 +34,14 @@ export const EventsTable = ({ loading, eventsList, isResourceBrowserView, errorV
                 />
             )
         }
+
         if (eventsList && eventsList.length > 0) {
             return (
                 <div
                     data-testid="app-events-container"
-                    className={`text__white dc__overflow-auto ${getComponentSpecificThemeClass(AppThemeType.dark)}`}
+                    className={`text__white flex-grow-1 dc__overflow-auto ${getComponentSpecificThemeClass(AppThemeType.dark)}`}
                     style={{
-                        height: isResourceBrowserView ? 'calc(100vh - 119px)' : 'calc(100vh - 155px)',
+                        height: isResourceBrowserView ? '' : 'calc(100vh - 155px)',
                     }}
                 >
                     {errorValue?.status === TERMINAL_STATUS.TERMINATED && (
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx
index 80999a7ca8..43cc2d39a9 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/Manifest.component.tsx
@@ -696,71 +696,69 @@ const ManifestComponent = ({
         }
 
         return (
-            <div style={{ height: isResourceBrowserView ? 'calc(100vh - 119px)' : 'calc(100vh - 77px)' }}>
-                <CodeEditor
-                    cleanData={showManifestCompareView}
-                    diffView={showManifestCompareView}
-                    mode={MODES.YAML}
-                    readOnly={isReadOnlyView}
-                    loading={loading}
-                    customLoader={<MessageUI msg={loadingMsg} icon={MsgUIType.LOADING} size={24} />}
-                    codeEditorProps={{
-                        theme: CodeEditorThemesKeys.vsDarkDT,
-                        value: getCodeEditorValue(),
-                        defaultValue: showManifestCompareView && desiredManifest,
-                        onChange: handleEditorValueChange,
-                        focus: isEditMode,
-                        height: '100%',
-                    }}
-                    codeMirrorProps={{
-                        theme: AppThemeType.dark,
-                        height: '100%',
-                        ...(showManifestCompareView
-                            ? {
-                                  diffView: true,
-                                  originalValue: desiredManifest,
-                                  modifiedValue: getCodeEditorValue(),
-                                  onModifiedValueChange: handleEditorValueChange,
-                              }
-                            : {
-                                  diffView: false,
-                                  value: getCodeEditorValue(),
-                                  onChange: handleEditorValueChange,
-                                  autoFocus: isEditMode,
-                              }),
-                    }}
-                >
-                    {renderEditorInfo(true)}
-
-                    {!loading &&
-                        !error &&
-                        isConfigDriftEnabled &&
-                        'hasDrift' in _selectedResource &&
-                        _selectedResource.hasDrift &&
-                        !showManifestCompareView &&
-                        renderOutOfSyncWarning &&
-                        renderOutOfSyncWarning(handleDesiredManifestOpen)}
-                    {showManifestCompareView && (
-                        <CodeEditor.Header hideDefaultSplitHeader className="p-0">
-                            <div className="dc__split-header">
-                                <div className="dc__split-header__pane flexbox dc__align-items-center dc__content-space dc__gap-8">
-                                    <span>Desired manifest</span>
-                                    <button
-                                        className="dc__unset-button-styles flex"
-                                        aria-label="Close Desired Manifest"
-                                        onClick={handleDesiredManifestClose}
-                                    >
-                                        <ICClose className="icon-dim-16 scn-0" />
-                                    </button>
-                                </div>
-                                <div className="dc__split-header__pane">Live manifest</div>
+            <CodeEditor
+                cleanData={showManifestCompareView}
+                diffView={showManifestCompareView}
+                mode={MODES.YAML}
+                readOnly={isReadOnlyView}
+                loading={loading}
+                customLoader={<MessageUI msg={loadingMsg} icon={MsgUIType.LOADING} size={24} />}
+                codeEditorProps={{
+                    theme: CodeEditorThemesKeys.vsDarkDT,
+                    value: getCodeEditorValue(),
+                    defaultValue: showManifestCompareView && desiredManifest,
+                    onChange: handleEditorValueChange,
+                    focus: isEditMode,
+                    height: '100%',
+                }}
+                codeMirrorProps={{
+                    theme: AppThemeType.dark,
+                    height: '100%',
+                    ...(showManifestCompareView
+                        ? {
+                            diffView: true,
+                            originalValue: desiredManifest,
+                            modifiedValue: getCodeEditorValue(),
+                            onModifiedValueChange: handleEditorValueChange,
+                        }
+                        : {
+                            diffView: false,
+                            value: getCodeEditorValue(),
+                            onChange: handleEditorValueChange,
+                            autoFocus: isEditMode,
+                        }),
+                }}
+            >
+                {renderEditorInfo(true)}
+
+                {!loading &&
+                    !error &&
+                    isConfigDriftEnabled &&
+                    'hasDrift' in _selectedResource &&
+                    _selectedResource.hasDrift &&
+                    !showManifestCompareView &&
+                    renderOutOfSyncWarning &&
+                    renderOutOfSyncWarning(handleDesiredManifestOpen)}
+                {showManifestCompareView && (
+                    <CodeEditor.Header hideDefaultSplitHeader className="p-0">
+                        <div className="dc__split-header">
+                            <div className="dc__split-header__pane flexbox dc__align-items-center dc__content-space dc__gap-8">
+                                <span>Desired manifest</span>
+                                <button
+                                    className="dc__unset-button-styles flex"
+                                    aria-label="Close Desired Manifest"
+                                    onClick={handleDesiredManifestClose}
+                                >
+                                    <ICClose className="icon-dim-16 scn-0" />
+                                </button>
                             </div>
-                        </CodeEditor.Header>
-                    )}
+                            <div className="dc__split-header__pane">Live manifest</div>
+                        </div>
+                    </CodeEditor.Header>
+                )}
 
-                    {renderErrorBar(true)}
-                </CodeEditor>
-            </div>
+                {renderErrorBar(true)}
+            </CodeEditor>
         )
     }
 
diff --git a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/nodeDetailTab.scss b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/nodeDetailTab.scss
index ceb70522f1..7d2f323e4c 100644
--- a/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/nodeDetailTab.scss
+++ b/src/components/v2/appDetails/k8Resource/nodeDetail/NodeDetailTabs/nodeDetailTab.scss
@@ -196,3 +196,9 @@
 .pod-terminal-hidden * {
     height: 0 !important;
 }
+
+.manifest-container {
+    & .react-monaco-editor-container {
+        flex-grow: 1;
+    }
+}
\ No newline at end of file


Reviews:
user: login: eshankvaish
state: CHANGES_REQUESTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-05T09:48:07Z
user: login: eshankvaish
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-06T13:00:21Z

Review comments:
diff_hunk: @@ -16,217 +16,164 @@
 
 @import '../v2/appDetails/k8Resource/k8resources.scss';
 
-.resource-browser-container {
path: src/components/ResourceBrowser/ResourceBrowser.scss
user: login: eshankvaish
body: let's re-add the container class
created_at: 2025-03-05T09:47:31Z
author_association: CONTRIBUTOR
diff_hunk: @@ -16,217 +16,164 @@
 
 @import '../v2/appDetails/k8Resource/k8resources.scss';
 
-.resource-browser-container {
path: src/components/ResourceBrowser/ResourceBrowser.scss
user: login: eshankvaish
body: bg-hover-opaque
created_at: 2025-03-05T09:47:53Z
author_association: CONTRIBUTOR

PR comments:
user: login: sonarqubecloud[bot]
created_at: 2025-03-06T12:56:29Z
body: ## [![Quality Gate Passed](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/checks/QualityGateBadge/qg-passed-20px.png 'Quality Gate Passed')](https://sonarcloud.io/dashboard?id=devtron-labs_dashboard&pullRequest=2520) **Quality Gate passed**  
Issues  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 New issues](https://sonarcloud.io/project/issues?id=devtron-labs_dashboard&pullRequest=2520&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/accepted-16px.png '') [0 Accepted issues](https://sonarcloud.io/project/issues?id=devtron-labs_dashboard&pullRequest=2520&issueStatuses=ACCEPTED)

Measures  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0 Security Hotspots](https://sonarcloud.io/project/security_hotspots?id=devtron-labs_dashboard&pullRequest=2520&issueStatuses=OPEN,CONFIRMED&sinceLeakPeriod=true)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Coverage on New Code](https://sonarcloud.io/component_measures?id=devtron-labs_dashboard&pullRequest=2520&metric=new_coverage&view=list)  
![](https://sonarsource.github.io/sonarcloud-github-static-resources/v2/common/passed-16px.png '') [0.0% Duplication on New Code](https://sonarcloud.io/component_measures?id=devtron-labs_dashboard&pullRequest=2520&metric=new_duplicated_lines_density&view=list)  
  
[See analysis details on SonarQube Cloud](https://sonarcloud.io/dashboard?id=devtron-labs_dashboard&pullRequest=2520)


author_association: NONE