From 5785cecc25e1d9fb2d604efffa8503fdf194f434 Mon Sep 17 00:00:00 2001
From: Philipp Rudloff <philipp.rudloff@konghq.com>
Date: Fri, 20 Oct 2023 10:34:13 +0200
Subject: [PATCH] chore: allows NavTabs to overflow (#1632)

* chore: allows NavTabs to overflow

Allows NavTabs to overflow using a scroll container.

Prevents NavTabs items from wrapping.

Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com>

* fix: response layout issue with .app-content-container

Allows .app-content-container items to shrink in smaller viewports.

Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com>

---------

Signed-off-by: Philipp Rudloff <philipp.rudloff@konghq.com>
---
 src/app/App.vue            |  3 ++-
 src/app/common/NavTabs.vue | 17 +++++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/app/App.vue b/src/app/App.vue
index 0ecb46fd9..12692eba2 100644
--- a/src/app/App.vue
+++ b/src/app/App.vue
@@ -107,7 +107,8 @@ const isWizard = computed(() => route.meta.isWizard === true)
 .app-content-container {
   padding-top: var(--AppHeaderHeight, initial);
   display: var(--AppDisplay);
-  grid-template-columns: var(--AppSidebarWidth) 1fr;
+  // Note: `minmax(0, 1fr)` is used because `1fr` implies `minmax(auto, 1fr)` which will allow grid items to grow beyond their container's size.
+  grid-template-columns: var(--AppSidebarWidth) minmax(0, 1fr);
 }
 
 .app-main-content {
diff --git a/src/app/common/NavTabs.vue b/src/app/common/NavTabs.vue
index cba35fc43..5cc955ea5 100644
--- a/src/app/common/NavTabs.vue
+++ b/src/app/common/NavTabs.vue
@@ -73,3 +73,20 @@ const currentTabHash = computed(() => {
   margin-bottom: var(--AppGap);
 }
 </style>
+
+<style lang="scss">
+.nav-tabs {
+  overflow-x: auto;
+  width: 100%;
+}
+
+.nav-tabs .tab-item {
+  white-space: nowrap;
+}
+
+// TODO: Remove this once https://github.com/Kong/kongponents/pull/1774 is available.
+// Prevents KTabs from trigger a vertical overflow of its container.
+.nav-tabs .tab-item::after {
+  content: none !important;
+}
+</style>