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 <[email protected]> * fix: response layout issue with .app-content-container Allows .app-content-container items to shrink in smaller viewports. Signed-off-by: Philipp Rudloff <[email protected]> --------- Signed-off-by: Philipp Rudloff <[email protected]>
kumahq · Oct 20, 2023 · 5785cec · 5785cec
1 parent dd58880
commit 5785cec
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 1 deletion.
diff --git 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
@@ -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>