From 1d829235403d7c3b9a1bc15f8191b45c764a2aa0 Mon Sep 17 00:00:00 2001
From: Robert Markovski <5818108+Roshan931@users.noreply.github.com>
Date: Fri, 21 Aug 2026 14:42:11 +0200
Subject: [PATCH] fix: Inconsistent gap between tool tabs on marketplace agent
 deta...

---
 app/src/pages/MarketplaceDetail.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/app/src/pages/MarketplaceDetail.tsx b/app/src/pages/MarketplaceDetail.tsx
index 2b0543a4..87e71530 100644
--- a/app/src/pages/MarketplaceDetail.tsx
+++ b/app/src/pages/MarketplaceDetail.tsx
@@ -809,7 +809,7 @@ export default function MarketplaceDetail() {
           {item.item_type === 'agent' && (
             <section className="mb-8">
               <h2 className="text-sm font-semibold text-[var(--text)] mb-4">Available Tools</h2>
-              <div className="flex flex-wrap gap-2">
+              <div className="flex flex-wrap items-start gap-2">
                 {(item.tools && item.tools.length > 0 ? item.tools : ALL_TOOLS).map(
                   (toolName, idx) => {
                     const tool = toolIcons[toolName];
@@ -817,7 +817,7 @@ export default function MarketplaceDetail() {
                     return (
                       <div
                         key={idx}
-                        className="flex items-center gap-2 px-3 py-2 bg-[var(--surface-hover)] border border-[var(--border)] text-[var(--text-muted)] rounded-[var(--radius-small)] text-[11px]"
+                        className="flex flex-shrink-0 items-center gap-2 px-3 py-2 bg-[var(--surface-hover)] border border-[var(--border)] text-[var(--text-muted)] rounded-[var(--radius-small)] text-[11px] whitespace-nowrap"
                       >
                         {tool.icon}
                         <span className="font-medium">{tool.label}</span>