From e330ce90e860f20dfa97cecd7de0cbc80c2ce3cd Mon Sep 17 00:00:00 2001
From: Jesse Winton <jesse@appwrite.io>
Date: Thu, 13 Feb 2025 10:03:35 -0500
Subject: [PATCH 1/2] fix tabs cutting off last item

---
 src/markdoc/tags/Tabs.svelte | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/src/markdoc/tags/Tabs.svelte b/src/markdoc/tags/Tabs.svelte
index 06481c49b8..45dca06061 100644
--- a/src/markdoc/tags/Tabs.svelte
+++ b/src/markdoc/tags/Tabs.svelte
@@ -51,9 +51,9 @@
                     >
                 </li>
             {/each}
-            {#if Array.from($ctx.triggers.entries()).slice(7, Array.from($ctx.triggers.entries()).length - 1).length}
+            {#if Array.from($ctx.triggers.entries()).slice(7).length}
                 {@const entries = Array.from($ctx.triggers.entries())}
-                {@const desktopOptions = entries.slice(7, entries.length - 1)}
+                {@const desktopOptions = entries.slice(7)}
 
                 <li>
                     <Select
@@ -70,7 +70,7 @@
             {/if}
         </ul>
         <ul class="tabs-list flex items-center gap-4 sm:hidden" {...$list} use:list>
-            {#each Array.from($ctx.triggers.entries()).slice(0, 3) as [id, title]}
+            {#each Array.from($ctx.triggers.entries()).slice(0, 2) as [id, title]}
                 <li
                     class="tabs-item rounded-t-[0.625rem] text-center hover:bg-white/4"
                     class:text-[var(--color-primary)]={$value === id}
@@ -84,13 +84,15 @@
                             }
                         )}
                         {...$trigger(id)}
-                        use:trigger>{title}</button
+                        use:trigger
                     >
+                        {title}
+                    </button>
                 </li>
             {/each}
-            {#if Array.from($ctx.triggers.entries()).slice(3, Array.from($ctx.triggers.entries()).length - 1).length}
+            {#if Array.from($ctx.triggers.entries()).slice(2).length}
                 {@const entries = Array.from($ctx.triggers.entries())}
-                {@const desktopOptions = entries.slice(3, entries.length - 1)}
+                {@const desktopOptions = entries.slice(2)}
 
                 <li>
                     <Select

From bbf0f8552e53dfbe5fb6593c8b422c796e41c6f9 Mon Sep 17 00:00:00 2001
From: Jesse Winton <jesse@appwrite.io>
Date: Thu, 20 Feb 2025 10:06:44 -0500
Subject: [PATCH 2/2] fixes

---
 src/lib/components/Select.svelte | 6 +++++-
 src/markdoc/tags/Tabs.svelte     | 4 ++--
 2 files changed, 7 insertions(+), 3 deletions(-)

diff --git a/src/lib/components/Select.svelte b/src/lib/components/Select.svelte
index 5df7f00cd3..ca6b56baa5 100644
--- a/src/lib/components/Select.svelte
+++ b/src/lib/components/Select.svelte
@@ -8,6 +8,7 @@
 </script>
 
 <script lang="ts">
+    import { classNames } from '$lib/utils/classnames';
     import { createSelect, melt, type CreateSelectProps } from '@melt-ui/svelte';
     import { createEventDispatcher } from 'svelte';
     import { fly, type FlyParams } from 'svelte/transition';
@@ -21,6 +22,9 @@
     export let id: string | undefined = undefined;
     export let preventScroll = false;
     export let placement: NonNullable<CreateSelectProps['positioning']>['placement'] = 'bottom';
+    let className: string = '';
+
+    export { className as class };
 
     const dispatch = createEventDispatcher<{
         change: unknown;
@@ -85,7 +89,7 @@
 </script>
 
 <button
-    class="web-select is-colored"
+    class={classNames('web-select is-colored', className)}
     {id}
     class:web-is-not-mobile={nativeMobile}
     use:melt={$trigger}
diff --git a/src/markdoc/tags/Tabs.svelte b/src/markdoc/tags/Tabs.svelte
index 45dca06061..a33db04e9e 100644
--- a/src/markdoc/tags/Tabs.svelte
+++ b/src/markdoc/tags/Tabs.svelte
@@ -35,7 +35,7 @@
         <ul class="tabs-list hidden items-center gap-4 sm:flex" {...$list} use:list>
             {#each Array.from($ctx.triggers.entries()).slice(0, 7) as [id, title]}
                 <li
-                    class="tabs-item rounded-t-[0.625rem] text-center hover:bg-white/4"
+                    class="tabs-item shrink-0 rounded-t-[0.625rem] text-center hover:bg-white/4"
                     class:text-[var(--color-primary)]={$value === id}
                 >
                     <button
@@ -72,7 +72,7 @@
         <ul class="tabs-list flex items-center gap-4 sm:hidden" {...$list} use:list>
             {#each Array.from($ctx.triggers.entries()).slice(0, 2) as [id, title]}
                 <li
-                    class="tabs-item rounded-t-[0.625rem] text-center hover:bg-white/4"
+                    class="tabs-item shrink-0 rounded-t-[0.625rem] text-center hover:bg-white/4"
                     class:text-[var(--color-primary)]={$value === id}
                 >
                     <button