Fixing kitchen sink on mobile

docs/src/_includes/partials/header.njk

@@ -32,7 +32,6 @@
     :aria-label="$store.darkMode.isDark ? 'Switch to light mode' : 'Switch to dark mode'"
     :data-tooltip="$store.darkMode.isDark ? 'Light mode' : 'Dark mode'"
     data-side="bottom"
-    data-align="end"
     class="btn-icon-outline size-8"
     x-init
     @click="$store.darkMode.toggle()"
@@ -40,4 +39,15 @@
     <span x-show="$store.darkMode.isDark">{% lucide "sun" %}</span>
     <span x-show="!$store.darkMode.isDark">{% lucide "moon" %}</span>
   </button>
+  <a
+    href="https://github.com/hunvreu/basecoat"
+    class="btn-icon size-8"
+    target="_blank"
+    rel="noopener noreferrer"
+    data-tooltip="GitHub repository"
+    data-side="bottom"
+    data-align="end"
+  >
+    {% lucide "github" %}
+  </a>
 </div>

docs/src/_includes/partials/kitchen-sink/accordion.njk

@@ -1,7 +1,7 @@
 <section id="accordion"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Accordion</h2>
-    <a href="/components/accordion" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/accordion" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/alert-dialog.njk

@@ -3,7 +3,7 @@
 <section id="alert-dialog"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Alert Dialog</h2>
-    <a href="/components/alert-dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/alert-dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/alert.njk

@@ -1,7 +1,7 @@
 <section id="alert"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Alert</h2>
-    <a href="/components/alert" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/alert" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/avatar.njk

@@ -1,7 +1,7 @@
 <section id="avatar"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Avatar</h2>
-    <a href="/components/avatar" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/avatar" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/badge.njk

@@ -1,7 +1,7 @@
 <section id="badge"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Badge</h2>
-    <a href="/components/badge" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/badge" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/breadcrumb.njk

@@ -3,7 +3,7 @@
 <section id="breadcrumb"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Breadcrumb</h2>
-    <a href="/components/breadcrumb" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/breadcrumb" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/button.njk

@@ -1,7 +1,7 @@
 <section id="button"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Button</h2>
-    <a href="/components/button" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/button" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/card.njk

@@ -1,7 +1,7 @@
 <section id="card"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Card</h2>
-    <a href="/components/card" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/card" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/checkbox.njk

@@ -1,7 +1,7 @@
 <section id="checkbox"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Checkbox</h2>
-    <a href="/components/checkbox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/checkbox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/combobox.njk

@@ -3,7 +3,7 @@
 <section id="combobox"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Combobox</h2>
-    <a href="/components/combobox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/combobox" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/dialog.njk

@@ -3,7 +3,7 @@
 <section id="dialog"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Dialog</h2>
-    <a href="/components/dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/dialog" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/dropdown-menu.njk

@@ -3,7 +3,7 @@
 <section id="dropdown-menu"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Dropdown Menu</h2>
-    <a href="/components/dropdown-menu" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/dropdown-menu" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/input.njk

@@ -1,7 +1,7 @@
 <section id="input"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Input</h2>
-    <a href="/components/input" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/input" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/label.njk

@@ -1,7 +1,7 @@
 <section id="label"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Label</h2>
-    <a href="/components/label" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/label" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/pagination.njk

@@ -1,7 +1,7 @@
 <section id="pagination"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Pagination</h2>
-    <a href="/components/pagination" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/pagination" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/popover.njk

@@ -3,7 +3,7 @@
 <section id="popover"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Popover</h2>
-    <a href="/components/popover" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/popover" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/radio-group.njk

@@ -1,7 +1,7 @@
 <section id="radio-group"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Radio Group</h2>
-    <a href="/components/radio-group" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/radio-group" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/select.njk

@@ -3,7 +3,7 @@
 <section id="select"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Select</h2>
-    <a href="/components/select" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/select" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/skeleton.njk

@@ -1,7 +1,7 @@
 <section id="skeleton"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Skeleton</h2>
-    <a href="/components/skeleton" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/skeleton" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/slider.njk

@@ -1,7 +1,7 @@
 <section id="slider"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Slider</h2>
-    <a href="/components/slider" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/slider" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/switch.njk

@@ -1,7 +1,7 @@
 <section id="switch"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Switch</h2>
-    <a href="/components/switch" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/switch" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/table.njk

@@ -1,7 +1,7 @@
 <section id="table"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Table</h2>
-    <a href="/components/table" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/table" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/tabs.njk

@@ -3,7 +3,7 @@
 <section id="tabs"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Tabs</h2>
-    <a href="/components/tabs" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/tabs" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/textarea.njk

@@ -1,7 +1,7 @@
 <section id="textarea"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Textarea</h2>
-    <a href="/components/textarea" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/textarea" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/toast.njk

@@ -1,7 +1,7 @@
 <section id="toast"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Toast</h2>
-    <a href="/components/toast" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/toast" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>

docs/src/_includes/partials/kitchen-sink/tooltip.njk

@@ -1,7 +1,7 @@
 <section id="tooltip"  class="w-full rounded-lg border scroll-mt-14">
   <header class="border-b px-4 py-3 flex items-center justify-between">
     <h2 class="text-sm font-medium">Tooltip</h2>
-    <a href="/components/tooltip" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation">
+    <a href="/components/tooltip" class="text-muted-foreground hover:text-foreground" data-tooltip="See documentation" data-side="left">
       {% lucide "book-open", { "class": "size-4" }   %}
     </a>
   </header>