Merge pull request #1771 from appwrite/mobile-select-bug

appwrite · Feb 23, 2025 · d3ce3c4 · d3ce3c4
2 parents f828f94 + 2cba298
commit d3ce3c4
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 9 deletions.
diff --git 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
@@ -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
@@ -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,9 +70,9 @@
             {/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="tabs-item shrink-0 rounded-t-[0.625rem] text-center hover:bg-white/4"
                     class:text-[var(--color-primary)]={$value === id}
                 >
                     <button
@@ -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