From 80ae280941dd00b371b7dbf70f91d35920aa25e2 Mon Sep 17 00:00:00 2001
From: "yves.gugger" <yves.gugger@gentwo.com>
Date: Wed, 10 Dec 2025 15:31:53 +0100
Subject: [PATCH] fix: Dropdown menu opens upward + remove accent from
 StatCards

1. Portfolio dropdown menu:
   - Changed from 'top-full' to 'bottom-full'
   - Menu now opens upward to not get cut off by table

2. Removed green accent highlighting from StatCards:
   - Portfolio: Expiring Soon
   - Watchlist: Available
   - Auctions: Ending Soon
   - Marketplace: Verified Sellers
   - Alerts: Active Alerts
---
 frontend/src/app/command/alerts/page.tsx      | 2 +-
 frontend/src/app/command/auctions/page.tsx    | 2 +-
 frontend/src/app/command/marketplace/page.tsx | 2 +-
 frontend/src/app/command/portfolio/page.tsx   | 5 ++---
 frontend/src/app/command/watchlist/page.tsx   | 2 +-
 5 files changed, 6 insertions(+), 7 deletions(-)

diff --git a/frontend/src/app/command/alerts/page.tsx b/frontend/src/app/command/alerts/page.tsx
index c4db2ee..7d699d2 100644
--- a/frontend/src/app/command/alerts/page.tsx
+++ b/frontend/src/app/command/alerts/page.tsx
@@ -235,7 +235,7 @@ export default function SniperAlertsPage() {
 
         {/* Stats */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
-          <StatCard title="Active Alerts" value={alerts.filter(a => a.is_active).length} icon={Bell} accent />
+          <StatCard title="Active Alerts" value={alerts.filter(a => a.is_active).length} icon={Bell} />
           <StatCard title="Total Matches" value={alerts.reduce((sum, a) => sum + a.matches_count, 0)} icon={Target} />
           <StatCard title="Notifications Sent" value={alerts.reduce((sum, a) => sum + a.notifications_sent, 0)} icon={Zap} />
           <StatCard title="Alert Slots" value={`${alerts.length}/${maxAlerts}`} icon={Settings} />
diff --git a/frontend/src/app/command/auctions/page.tsx b/frontend/src/app/command/auctions/page.tsx
index d154d66..3383c7c 100644
--- a/frontend/src/app/command/auctions/page.tsx
+++ b/frontend/src/app/command/auctions/page.tsx
@@ -358,7 +358,7 @@ export default function AuctionsPage() {
         {/* Stats */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
           <StatCard title="All Auctions" value={allAuctions.length} icon={Gavel} />
-          <StatCard title="Ending Soon" value={endingSoon.length} icon={Timer} accent />
+          <StatCard title="Ending Soon" value={endingSoon.length} icon={Timer} />
           <StatCard title="Hot Auctions" value={hotAuctions.length} subtitle="20+ bids" icon={Flame} />
           <StatCard title="Opportunities" value={opportunities.length} icon={Target} />
         </div>
diff --git a/frontend/src/app/command/marketplace/page.tsx b/frontend/src/app/command/marketplace/page.tsx
index eacc969..295a853 100644
--- a/frontend/src/app/command/marketplace/page.tsx
+++ b/frontend/src/app/command/marketplace/page.tsx
@@ -136,7 +136,7 @@ export default function CommandMarketplacePage() {
         {/* Stats */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
           <StatCard title="Total Listings" value={listings.length} icon={Store} />
-          <StatCard title="Verified Sellers" value={verifiedCount} icon={Shield} accent />
+          <StatCard title="Verified Sellers" value={verifiedCount} icon={Shield} />
           <StatCard 
             title="Avg. Price" 
             value={avgPrice > 0 ? `$${Math.round(avgPrice).toLocaleString()}` : '—'} 
diff --git a/frontend/src/app/command/portfolio/page.tsx b/frontend/src/app/command/portfolio/page.tsx
index 938519a..2d87b5a 100644
--- a/frontend/src/app/command/portfolio/page.tsx
+++ b/frontend/src/app/command/portfolio/page.tsx
@@ -305,7 +305,6 @@ export default function PortfolioPage() {
               return days <= 30 && days > 0
             }).length} 
             icon={Calendar}
-            accent
           />
           <StatCard 
             title="Need Attention" 
@@ -460,8 +459,8 @@ export default function PortfolioPage() {
                         className="fixed inset-0 z-40" 
                         onClick={() => setOpenMenuId(null)} 
                       />
-                      {/* Menu */}
-                      <div className="absolute right-0 top-full mt-1 z-50 w-48 py-1 bg-background-secondary border border-border/50 rounded-xl shadow-xl">
+                      {/* Menu - opens upward */}
+                      <div className="absolute right-0 bottom-full mb-1 z-50 w-48 py-1 bg-background-secondary border border-border/50 rounded-xl shadow-xl">
                         <button
                           onClick={() => { handleHealthCheck(domain.domain); setOpenMenuId(null) }}
                           className="w-full flex items-center gap-3 px-4 py-2.5 text-sm text-foreground-muted hover:text-foreground hover:bg-foreground/5 transition-colors"
diff --git a/frontend/src/app/command/watchlist/page.tsx b/frontend/src/app/command/watchlist/page.tsx
index 9e7144d..c67b343 100755
--- a/frontend/src/app/command/watchlist/page.tsx
+++ b/frontend/src/app/command/watchlist/page.tsx
@@ -196,7 +196,7 @@ export default function WatchlistPage() {
         {/* Stats Cards */}
         <div className="grid grid-cols-2 lg:grid-cols-4 gap-4">
           <StatCard title="Total Watched" value={domainsUsed} icon={Eye} />
-          <StatCard title="Available" value={availableCount} icon={Sparkles} accent={availableCount > 0} />
+          <StatCard title="Available" value={availableCount} icon={Sparkles} />
           <StatCard title="Monitoring" value={watchingCount} subtitle="active checks" icon={Activity} />
           <StatCard title="Plan Limit" value={domainLimit === -1 ? '∞' : domainLimit} subtitle={`${domainsUsed} used`} icon={Shield} />
         </div>