From a1b65d1ea1b100c878b8f82acbab859cfb781fff Mon Sep 17 00:00:00 2001
From: Bartosz-Do <xbartoszdobija@gmail.com>
Date: Fri, 7 Aug 2026 23:57:22 +0200
Subject: [PATCH] Fix docs UI bugs: tabs, redirect, docs-libs, colors grid,
 navbar link (#2830)

Co-authored-by: Claude Sonnet 5 <noreply@anthropic.com>
---
 docs/components/Colors.astro            | 2 +-
 docs/components/DocsNavbar.astro        | 3 +--
 docs/components/TabsPackage.astro       | 2 +-
 docs/layouts/DocsMdxLayout.astro        | 5 +++--
 docs/pages/ui/base/markdown/index.astro | 2 +-
 5 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/docs/components/Colors.astro b/docs/components/Colors.astro
index 9c9afd34f..054e68e69 100644
--- a/docs/components/Colors.astro
+++ b/docs/components/Colors.astro
@@ -10,7 +10,7 @@ const { colors }: Props = Astro.props
   {
     Object.values(colors).map((color) => {
       return (
-        <div class="col-2 text-center">
+        <div class="text-center">
           <div class="p-6 rounded border" style={{ backgroundColor: `var(${color.prop})` }} />
           <div class="small">{color.title}</div>
         </div>
diff --git a/docs/components/DocsNavbar.astro b/docs/components/DocsNavbar.astro
index d2442be4d..5c596604d 100644
--- a/docs/components/DocsNavbar.astro
+++ b/docs/components/DocsNavbar.astro
@@ -14,8 +14,7 @@ const changelogUrl = 'https://tabler.io/changelog'
     <div class="row flex-fill align-items-md-center">
       <div class="col">
         <div class="d-flex align-items-center gap-4">
-          {/* href="." — relative link for docs root */}
-          <a href="." class="navbar-brand navbar-brand-autodark gap-4">
+          <a href="/" class="navbar-brand navbar-brand-autodark gap-4">
             <DocsLogo />
           </a>
           <div>
diff --git a/docs/components/TabsPackage.astro b/docs/components/TabsPackage.astro
index a0af5e7cd..ea6b5b224 100644
--- a/docs/components/TabsPackage.astro
+++ b/docs/components/TabsPackage.astro
@@ -14,7 +14,7 @@ const { name }: Props = Astro.props
     packageManagers.map((manager, i) => {
       return (
         <li class="nav-item" role="presentation">
-          <button class={`nav-link${i === 0 ? ' active' : ''}`} id={`${manager.name}-tab`} data-bs-toggle="tab" data-bs-target={`#${manager.name}`} type="button" role="tab" aria-controls="home" aria-selected={i === 0 ? 'true' : 'false'}>
+          <button class={`nav-link${i === 0 ? ' active' : ''}`} id={`${manager.name}-tab`} data-bs-toggle="tab" data-bs-target={`#${manager.name}`} type="button" role="tab" aria-controls={manager.name} aria-selected={i === 0 ? 'true' : 'false'}>
             <span set:html={manager.icon.replace('<svg ', '<svg class="me-2" ')} />
             {manager.name}
           </button>
diff --git a/docs/layouts/DocsMdxLayout.astro b/docs/layouts/DocsMdxLayout.astro
index a457f8e12..14f7f2bab 100644
--- a/docs/layouts/DocsMdxLayout.astro
+++ b/docs/layouts/DocsMdxLayout.astro
@@ -17,7 +17,7 @@ interface MdxFrontmatter {
   'description'?: string
   'seoDescription'?: string
   'added-in'?: string
-  'docs-libs'?: string[]
+  'docs-libs'?: string | string[]
   'hide-pagination'?: boolean
 }
 
@@ -37,7 +37,8 @@ const {
 // "docs/pages/ui/components/alert.mdx" (`file` is the absolute path of the MDX page).
 const editPath = file?.includes('/docs/pages/') ? file.replace(/^.*\/docs\/pages\//, 'docs/pages/') : undefined
 
-const docsLibs = frontmatter['docs-libs'] ?? []
+const rawDocsLibs = frontmatter['docs-libs']
+const docsLibs = rawDocsLibs == null ? [] : Array.isArray(rawDocsLibs) ? rawDocsLibs : [rawDocsLibs]
 
 const toc = headings
   .filter((heading) => heading.depth === 2 || heading.depth === 3)
diff --git a/docs/pages/ui/base/markdown/index.astro b/docs/pages/ui/base/markdown/index.astro
index f49ed6999..f0dd7df56 100644
--- a/docs/pages/ui/base/markdown/index.astro
+++ b/docs/pages/ui/base/markdown/index.astro
@@ -2,4 +2,4 @@
 import RedirectLayout from '@shared/layouts/RedirectLayout.astro'
 ---
 
-<RedirectLayout base="../../.." />
+<RedirectLayout base="../../.." url="/ui/base/prose/" />