From a4e70f3c428d7a43e31b63d296e9c4c73b09eda8 Mon Sep 17 00:00:00 2001
From: aliabid94 <aabid94@gmail.com>
Date: Fri, 25 Oct 2024 11:44:00 -0700
Subject: [PATCH] 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>
---
 .changeset/cute-goats-clap.md |  6 ++++++
 js/tabs/shared/Tabs.svelte    | 14 ++++++++------
 2 files changed, 14 insertions(+), 6 deletions(-)
 create mode 100644 .changeset/cute-goats-clap.md

diff --git a/.changeset/cute-goats-clap.md b/.changeset/cute-goats-clap.md
new file mode 100644
index 0000000000000..441be6a308e64
--- /dev/null
+++ 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
index 848290ab5ca2e..4302302b26619 100644
--- 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 {