1
0
mirror of https://github.com/lensapp/lens.git synced 2025-05-20 05:10:56 +00:00

Fix: remove excessive scrollbars from the TabLayout view (#6689)

* Remove excessive scrollbars from the TabLayout view

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

* Updating snapshots

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

* Updating snapshots harder

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

Signed-off-by: Alex Andreev <alex.andreev.email@gmail.com>
This commit is contained in:
Alex Andreev 2022-12-01 17:32:41 +03:00 committed by GitHub
parent 87035dd49a
commit 33e6771da3
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
27 changed files with 331 additions and 116 deletions

View File

@ -272,7 +272,9 @@ exports[`legacy extension adding cluster frame components given custom component
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -327,7 +327,9 @@ exports[`cluster - order of sidebar items when rendered renders 1`] = `
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -942,7 +944,9 @@ exports[`cluster - order of sidebar items when rendered when parent is expanded
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -300,7 +300,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -836,7 +838,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -1392,7 +1396,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -2799,7 +2805,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -3335,7 +3343,9 @@ exports[`cluster - sidebar and tab navigation for core given core registrations
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -300,7 +300,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -836,7 +838,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -1408,7 +1412,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -1994,7 +2000,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="some-child-page"
>
@ -2485,7 +2493,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="some-other-child-page"
>
@ -2939,7 +2949,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="some-child-page"
>
@ -3416,7 +3428,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -3952,7 +3966,9 @@ exports[`cluster - sidebar and tab navigation for extensions given extension wit
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -272,7 +272,9 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -820,7 +822,9 @@ exports[`cluster - visibility of sidebar items given kube resource for route is
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -286,7 +286,9 @@ exports[`workload overview when navigating to workload overview renders 1`] = `
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -663,7 +663,9 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given extension shou
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -1173,7 +1175,9 @@ exports[`disable-cluster-pages-when-cluster-is-not-relevant given not yet known
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -291,7 +291,9 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -801,7 +803,9 @@ exports[`disable sidebar items when cluster is not relevant given extension shou
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -1311,7 +1315,9 @@ exports[`disable sidebar items when cluster is not relevant given not yet known
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -281,7 +281,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -919,7 +921,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -1562,7 +1566,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -2274,7 +2280,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -2964,7 +2972,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -3726,7 +3736,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -4490,7 +4502,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -5216,7 +5230,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -5937,7 +5953,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -6649,7 +6667,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -7361,7 +7381,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -8073,7 +8095,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -8620,7 +8644,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -9341,7 +9367,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -9888,7 +9916,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>
@ -10435,7 +10465,9 @@ exports[`cluster/namespaces - edit namespace from new tab when navigating to nam
class="TabLayout"
data-testid="tab-layout"
>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column KubeObjectListLayout Namespaces"
>

View File

@ -298,7 +298,9 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -843,7 +845,9 @@ exports[`cluster/namespaces - edit namespaces from previously opened tab given t
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -273,7 +273,9 @@ exports[`disable workloads overview details when cluster is not relevant given e
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -788,7 +790,9 @@ exports[`disable workloads overview details when cluster is not relevant given e
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -1298,7 +1302,9 @@ exports[`disable workloads overview details when cluster is not relevant given n
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -273,7 +273,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -715,7 +717,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -1628,7 +1632,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -2386,7 +2392,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -3388,7 +3396,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -4364,7 +4374,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -5335,7 +5347,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -6306,7 +6320,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -7299,7 +7315,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -8301,7 +8319,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -9272,7 +9292,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -10298,7 +10320,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -11136,7 +11160,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -11909,7 +11935,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -12760,7 +12788,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -13977,7 +14007,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -14787,7 +14819,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -15812,7 +15846,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -16835,7 +16871,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -17806,7 +17844,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -18777,7 +18817,9 @@ exports[`installing helm chart from new tab given tab for installing chart was n
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"

View File

@ -273,7 +273,9 @@ exports[`installing helm chart from previously opened tab given tab for installi
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -793,7 +795,9 @@ exports[`installing helm chart from previously opened tab given tab for installi
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

@ -286,7 +286,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -783,7 +785,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -1450,7 +1454,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -2174,7 +2180,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -3081,7 +3089,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -3998,7 +4008,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -4905,7 +4917,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"
@ -5822,7 +5836,9 @@ exports[`opening dock tab for installing helm chart given application is started
</div>
</div>
</div>
<main>
<main
class=""
>
<div
data-testid="page-for-helm-charts"
style="display: none;"

View File

@ -286,7 +286,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -946,7 +948,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -1703,7 +1707,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -2514,7 +2520,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -3361,7 +3369,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -4348,7 +4358,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -5337,7 +5349,9 @@ exports[`New Upgrade Helm Chart Dock Tab given a namespace is selected when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>

View File

@ -286,7 +286,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -1027,7 +1029,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -1773,7 +1777,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -2697,7 +2703,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -3682,7 +3690,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -4667,7 +4677,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -5897,7 +5909,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -7127,7 +7141,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -8357,7 +8373,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -9404,7 +9422,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -10453,7 +10473,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -11683,7 +11705,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -12668,7 +12692,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -13656,7 +13682,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -14580,7 +14608,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>
@ -15565,7 +15595,9 @@ exports[`showing details for helm release given application is started when navi
</div>
</div>
</div>
<main>
<main
class=""
>
<div
class="ItemListLayout flex column HelmReleases"
>

View File

@ -273,7 +273,9 @@ exports[`download logs options in logs dock tab opening pod logs when logs avail
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"
@ -1126,7 +1128,9 @@ exports[`download logs options in logs dock tab opening pod logs when logs not a
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -786,7 +786,7 @@ exports[`<ClusterFrame /> given cluster with list nodes and namespaces permissio
class="TabLayout"
>
<main
class=""
class="scrollable"
>
<div
class="ClusterOverview"
@ -1228,7 +1228,9 @@ exports[`<ClusterFrame /> given cluster without list nodes, but with namespaces
</div>
</div>
</div>
<main>
<main
class="scrollable"
>
<div
class="WorkloadsOverview flex column gaps"
data-testid="page-for-workloads-overview"