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

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

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>

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>

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)

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/" />