From 0622a7618a07a25b43e0ad773b4a775d6740e01f Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 17 Jul 2025 10:41:26 +0000
Subject: [PATCH 1/3] Enhance tab button styling with hover effects and
 improved color contrast

Co-authored-by: markokraemer.mail <markokraemer.mail@gmail.com>
---
 frontend/src/components/ui/fancy-tabs.tsx | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/ui/fancy-tabs.tsx b/frontend/src/components/ui/fancy-tabs.tsx
index 438359d5..bbf51fb4 100644
--- a/frontend/src/components/ui/fancy-tabs.tsx
+++ b/frontend/src/components/ui/fancy-tabs.tsx
@@ -34,11 +34,12 @@ const TabButton = ({ value, isActive, onClick, children }: TabButtonProps) => {
     <button
       onClick={onClick}
       className={cn(
-        "relative flex items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-medium transition-all duration-300",
-        isDark ? "hover:bg-white/5" : "hover:bg-muted/80",
+        "relative flex items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-medium transition-all duration-300 ease-out",
+        // Only apply hover background when not active - subtle and elegant
+        !isActive && (isDark ? "hover:bg-white/8 hover:scale-[1.02]" : "hover:bg-muted/60 hover:scale-[1.02]"),
         isActive 
           ? isDark ? "text-white" : "text-foreground bg-background border border-border/50"
-          : isDark ? "text-white/50 hover:text-white/70" : "text-muted-foreground hover:text-foreground"
+          : isDark ? "text-white/60 hover:text-white/85" : "text-muted-foreground hover:text-foreground"
       )}
       style={isActive && isDark ? {
         background: 'linear-gradient(135deg, rgba(255, 255, 255, 0.15), rgba(255, 255, 255, 0.08))',

From ef32fc0b716d7c6ee3e67f17006b978995ff62e8 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 17 Jul 2025 11:02:25 +0000
Subject: [PATCH 2/3] Fix layout shifts and improve tab content container
 styling

Co-authored-by: markokraemer.mail <markokraemer.mail@gmail.com>
---
 frontend/src/app/(dashboard)/agents/page.tsx  |   3 +-
 .../custom-agents-page/marketplace-tab.tsx    | 166 +++++++++---------
 .../custom-agents-page/my-agents-tab.tsx      |  70 ++++----
 3 files changed, 122 insertions(+), 117 deletions(-)

diff --git a/frontend/src/app/(dashboard)/agents/page.tsx b/frontend/src/app/(dashboard)/agents/page.tsx
index acaec294..fc366554 100644
--- a/frontend/src/app/(dashboard)/agents/page.tsx
+++ b/frontend/src/app/(dashboard)/agents/page.tsx
@@ -493,7 +493,8 @@ export default function AgentsPage() {
         </div>
       </div>
       <div className="container mx-auto max-w-7xl px-4 py-2">
-        <div className="w-full">
+        {/* Fixed height container to prevent layout shifts on tab change */}
+        <div className="w-full min-h-[calc(100vh-300px)]">
           {activeTab === "my-agents" && (
             <MyAgentsTab
               agentsSearchQuery={agentsSearchQuery}
diff --git a/frontend/src/components/agents/custom-agents-page/marketplace-tab.tsx b/frontend/src/components/agents/custom-agents-page/marketplace-tab.tsx
index 2c69b95a..a141ab55 100644
--- a/frontend/src/components/agents/custom-agents-page/marketplace-tab.tsx
+++ b/frontend/src/components/agents/custom-agents-page/marketplace-tab.tsx
@@ -36,7 +36,7 @@ export const MarketplaceTab = ({
   getItemStyling
 }: MarketplaceTabProps) => {
   return (
-    <div className="space-y-6 mt-8">
+    <div className="space-y-6 mt-8 flex flex-col min-h-full">
       <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between">
         <SearchBar
           placeholder="Search agents..."
@@ -55,90 +55,92 @@ export const MarketplaceTab = ({
         </Select>
       </div>
 
-      {marketplaceLoading ? (
-        <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-          {Array.from({ length: 8 }).map((_, i) => (
-            <div key={i} className="bg-card rounded-2xl overflow-hidden shadow-sm">
-              <Skeleton className="h-48" />
-              <div className="p-6 space-y-3">
-                <Skeleton className="h-5 rounded" />
-                <div className="space-y-2">
-                  <Skeleton className="h-4 rounded" />
-                  <Skeleton className="h-4 rounded w-3/4" />
+      <div className="flex-1">
+        {marketplaceLoading ? (
+          <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+            {Array.from({ length: 8 }).map((_, i) => (
+              <div key={i} className="bg-card rounded-2xl overflow-hidden shadow-sm">
+                <Skeleton className="h-48" />
+                <div className="p-6 space-y-3">
+                  <Skeleton className="h-5 rounded" />
+                  <div className="space-y-2">
+                    <Skeleton className="h-4 rounded" />
+                    <Skeleton className="h-4 rounded w-3/4" />
+                  </div>
+                  <Skeleton className="h-10 rounded-full" />
                 </div>
-                <Skeleton className="h-10 rounded-full" />
               </div>
-            </div>
-          ))}
-        </div>
-      ) : allMarketplaceItems.length === 0 ? (
-        <div className="text-center py-12">
-          <p className="text-muted-foreground">
-            {marketplaceSearchQuery 
-              ? "No templates found matching your criteria. Try adjusting your search or filters."
-              : "No agent templates are currently available in the marketplace."}
-          </p>
-        </div>
-      ) : (
-        <div className="space-y-12">
-          {marketplaceFilter === 'all' ? (
-            <>
-              {kortixTeamItems.length > 0 && (
-                <div className="space-y-6">
-                  <MarketplaceSectionHeader
-                    title="Verified by Kortix"
-                    subtitle="Official agents, maintained and supported"
+            ))}
+          </div>
+        ) : allMarketplaceItems.length === 0 ? (
+          <div className="text-center py-12">
+            <p className="text-muted-foreground">
+              {marketplaceSearchQuery 
+                ? "No templates found matching your criteria. Try adjusting your search or filters."
+                : "No agent templates are currently available in the marketplace."}
+            </p>
+          </div>
+        ) : (
+          <div className="space-y-12">
+            {marketplaceFilter === 'all' ? (
+              <>
+                {kortixTeamItems.length > 0 && (
+                  <div className="space-y-6">
+                    <MarketplaceSectionHeader
+                      title="Verified by Kortix"
+                      subtitle="Official agents, maintained and supported"
+                    />
+                    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                      {kortixTeamItems.map((item) => (
+                        <AgentCard
+                          key={item.id}
+                          mode="marketplace"
+                          data={item}
+                          styling={getItemStyling(item)}
+                          isActioning={installingItemId === item.id}
+                          onPrimaryAction={onInstallClick}
+                          onClick={() => onInstallClick(item)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+                {communityItems.length > 0 && (
+                  <div className="space-y-6">
+                    <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                      {communityItems.map((item) => (
+                        <AgentCard
+                          key={item.id}
+                          mode="marketplace"
+                          data={item}
+                          styling={getItemStyling(item)}
+                          isActioning={installingItemId === item.id}
+                          onPrimaryAction={onInstallClick}
+                          onClick={() => onInstallClick(item)}
+                        />
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </>
+            ) : (
+              <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
+                {allMarketplaceItems.map((item) => (
+                  <AgentCard
+                    key={item.id}
+                    mode="marketplace"
+                    data={item}
+                    styling={getItemStyling(item)}
+                    isActioning={installingItemId === item.id}
+                    onPrimaryAction={onInstallClick}
+                    onClick={() => onInstallClick(item)}
                   />
-                  <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                    {kortixTeamItems.map((item) => (
-                      <AgentCard
-                        key={item.id}
-                        mode="marketplace"
-                        data={item}
-                        styling={getItemStyling(item)}
-                        isActioning={installingItemId === item.id}
-                        onPrimaryAction={onInstallClick}
-                        onClick={() => onInstallClick(item)}
-                      />
-                    ))}
-                  </div>
-                </div>
-              )}
-              {communityItems.length > 0 && (
-                <div className="space-y-6">
-                  <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-                    {communityItems.map((item) => (
-                      <AgentCard
-                        key={item.id}
-                        mode="marketplace"
-                        data={item}
-                        styling={getItemStyling(item)}
-                        isActioning={installingItemId === item.id}
-                        onPrimaryAction={onInstallClick}
-                        onClick={() => onInstallClick(item)}
-                      />
-                    ))}
-                  </div>
-                </div>
-              )}
-            </>
-          ) : (
-            <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
-              {allMarketplaceItems.map((item) => (
-                <AgentCard
-                  key={item.id}
-                  mode="marketplace"
-                  data={item}
-                  styling={getItemStyling(item)}
-                  isActioning={installingItemId === item.id}
-                  onPrimaryAction={onInstallClick}
-                  onClick={() => onInstallClick(item)}
-                />
-              ))}
-            </div>
-          )}
-        </div>
-      )}
+                ))}
+              </div>
+            )}
+          </div>
+        )}
+      </div>
     </div>
   );
 }; 
\ No newline at end of file
diff --git a/frontend/src/components/agents/custom-agents-page/my-agents-tab.tsx b/frontend/src/components/agents/custom-agents-page/my-agents-tab.tsx
index 689aded5..88f4db6b 100644
--- a/frontend/src/components/agents/custom-agents-page/my-agents-tab.tsx
+++ b/frontend/src/components/agents/custom-agents-page/my-agents-tab.tsx
@@ -155,7 +155,7 @@ export const MyAgentsTab = ({
   };
 
   return (
-    <div className="space-y-6 mt-8">
+    <div className="space-y-6 mt-8 flex flex-col min-h-full">
       <div className="flex flex-col sm:flex-row gap-4 items-start sm:items-center justify-between mb-6">
         <SearchBar
           placeholder="Search your agents..."
@@ -203,40 +203,42 @@ export const MyAgentsTab = ({
         </div>
       </div>
 
-      {agentFilter === 'templates' ? (
-        renderTemplates()
-      ) : (
-        <>
-          {agentsLoading ? (
-            <LoadingState viewMode={viewMode} />
-          ) : filteredAgents.length === 0 ? (
-            <EmptyState
-              hasAgents={(agentsPagination?.total || 0) > 0}
-              onCreateAgent={onCreateAgent}
-              onClearFilters={handleClearFilters}
-            />
-          ) : (
-            <AgentsGrid
-              agents={filteredAgents}
-              onEditAgent={onEditAgent}
-              onDeleteAgent={onDeleteAgent}
-              onToggleDefault={onToggleDefault}
-              deleteAgentMutation={deleteAgentMutation}
-              onPublish={onPublishAgent}
-              publishingId={publishingAgentId}
-            />
-          )}
+      <div className="flex-1">
+        {agentFilter === 'templates' ? (
+          renderTemplates()
+        ) : (
+          <>
+            {agentsLoading ? (
+              <LoadingState viewMode={viewMode} />
+            ) : filteredAgents.length === 0 ? (
+              <EmptyState
+                hasAgents={(agentsPagination?.total || 0) > 0}
+                onCreateAgent={onCreateAgent}
+                onClearFilters={handleClearFilters}
+              />
+            ) : (
+              <AgentsGrid
+                agents={filteredAgents}
+                onEditAgent={onEditAgent}
+                onDeleteAgent={onDeleteAgent}
+                onToggleDefault={onToggleDefault}
+                deleteAgentMutation={deleteAgentMutation}
+                onPublish={onPublishAgent}
+                publishingId={publishingAgentId}
+              />
+            )}
 
-          {agentsPagination && agentsPagination.pages > 1 && (
-            <Pagination
-              currentPage={agentsPagination.page}
-              totalPages={agentsPagination.pages}
-              onPageChange={setAgentsPage}
-              isLoading={agentsLoading}
-            />
-          )}
-        </>
-      )}
+            {agentsPagination && agentsPagination.pages > 1 && (
+              <Pagination
+                currentPage={agentsPagination.page}
+                totalPages={agentsPagination.pages}
+                onPageChange={setAgentsPage}
+                isLoading={agentsLoading}
+              />
+            )}
+          </>
+        )}
+      </div>
     </div>
   );
 }; 
\ No newline at end of file

From 32e115365ac96b02191a24da1ae8fbf27da62923 Mon Sep 17 00:00:00 2001
From: Cursor Agent <cursoragent@cursor.com>
Date: Thu, 17 Jul 2025 11:17:00 +0000
Subject: [PATCH 3/3] Remove hover scale effect on tab buttons for cleaner
 interaction

Co-authored-by: markokraemer.mail <markokraemer.mail@gmail.com>
---
 frontend/src/components/ui/fancy-tabs.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/components/ui/fancy-tabs.tsx b/frontend/src/components/ui/fancy-tabs.tsx
index bbf51fb4..1e800c52 100644
--- a/frontend/src/components/ui/fancy-tabs.tsx
+++ b/frontend/src/components/ui/fancy-tabs.tsx
@@ -36,7 +36,7 @@ const TabButton = ({ value, isActive, onClick, children }: TabButtonProps) => {
       className={cn(
         "relative flex items-center justify-center gap-2 rounded-2xl px-4 py-2.5 text-sm font-medium transition-all duration-300 ease-out",
         // Only apply hover background when not active - subtle and elegant
-        !isActive && (isDark ? "hover:bg-white/8 hover:scale-[1.02]" : "hover:bg-muted/60 hover:scale-[1.02]"),
+        !isActive && (isDark ? "hover:bg-white/8" : "hover:bg-muted/60"),
         isActive 
           ? isDark ? "text-white" : "text-foreground bg-background border border-border/50"
           : isDark ? "text-white/60 hover:text-white/85" : "text-muted-foreground hover:text-foreground"