Fix Tabs in Rows (#9836)

* changes * add changeset * add changeset --------- Co-authored-by: Ali Abid <aliabid94@gmail.com> Co-authored-by: gradio-pr-bot <gradio-pr-bot@users.noreply.github.com> Co-authored-by: Freddy Boulton <alfonsoboulton@gmail.com>
gradio-app · Oct 25, 2024 · a4e70f3 · a4e70f3
1 parent 8f40bd2
commit a4e70f3
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 6 deletions.
diff --git a/.changeset/cute-goats-clap.md b/.changeset/cute-goats-clap.md
@@ -0,0 +1,6 @@
+---
+"@gradio/tabs": patch
+"gradio": patch
+---
+
+fix:Fix Tabs in Rows
diff --git a/js/tabs/shared/Tabs.svelte b/js/tabs/shared/Tabs.svelte
@@ -165,8 +165,8 @@
 	on:click={handle_outside_click}
 />
 
-{#if has_tabs}
-	<div class="tabs {elem_classes.join(' ')}" class:hide={!visible} id={elem_id}>
+<div class="tabs {elem_classes.join(' ')}" class:hide={!visible} id={elem_id}>
+	{#if has_tabs}
 		<div class="tab-wrapper">
 			<div class="tab-container visually-hidden" aria-hidden="true">
 				{#each tabs as t, i (t.id)}
@@ -225,14 +225,16 @@
 				</div>
 			</span>
 		</div>
-	</div>
-{/if}
-
-<slot />
+	{/if}
+	<slot />
+</div>
 
 <style>
 	.tabs {
 		position: relative;
+		display: flex;
+		flex-direction: column;
+		gap: var(--layout-gap);
 	}
 
 	.hide {