Fixing mobile UI bug (#72)

* Fixing mobile UI bug

* Cleanups

Author: arox7

src/features/dashboard/components/Dashboard.tsx

@@ -199,16 +199,6 @@ export default function Dashboard() {
     }
   }, [selectedStrategy]);
 
-  const handleCTAClick = useCallback(() => {
-    if (selectedStrategy) {
-      // Strategy selected: open email capture
-      setAlertsDialogOpen(true);
-    } else {
-      // No strategy: open strategy selector
-      setStrategiesSheetOpen(true);
-    }
-  }, [selectedStrategy]);
-
   const handleRefresh = useCallback(() => {
     setRefreshTrigger((t) => t + 1);
   }, []);
@@ -221,7 +211,7 @@ export default function Dashboard() {
       handleStrategySelect(linkId, detailStats); // Set selection so chart shows mobile header (1D, YTD/1Y/3Y)
       openStrategyDrawer(detailStats);
     }
-  }, [mergedStrategies, openStrategyDrawer, handleStrategySelect]);
+  }, [strategies, openStrategyDrawer, handleStrategySelect]);
 
 
 
@@ -364,7 +354,7 @@ export default function Dashboard() {
           </div>
 
           {/* Sticky Action Bar */}
-          {selectedStrategyId && selectedStrategy && (
+          {!isMobile && selectedStrategyId && selectedStrategy && (
             <div className="sticky bottom-0 mt-4 pt-4 border-t border-border bg-background">
               <div className="space-y-2">
                 <Button
@@ -388,7 +378,7 @@ export default function Dashboard() {
               </div>
             </div>
           )}
-          {selectedStrategyId && !selectedStrategy && (
+          {!isMobile && selectedStrategyId && !selectedStrategy && (
             <div className="sticky bottom-0 mt-4 pt-4 border-t border-border bg-background">
               <p className="text-sm text-muted-foreground text-center">
                 Select a strategy to enable actions
@@ -399,7 +389,7 @@ export default function Dashboard() {
       </div>
 
       {/* Mobile Sticky CTA Bar */}
-      {isMobile && !autoTradeWaitlistOpen && (
+      {isMobile && !autoTradeWaitlistOpen && !drawerOpen && (
         <div className="fixed bottom-0 left-0 right-0 z-[100] bg-background/95 backdrop-blur-sm border-t border-border shadow-lg pointer-events-auto">
           {selectedStrategy ? (
             <div className="px-4 py-3 space-y-2 pointer-events-auto">
@@ -429,7 +419,7 @@ export default function Dashboard() {
                 variant="default"
                 size="lg"
                 className="w-full h-11 text-base font-medium"
-                onClick={handleCTAClick}
+                onClick={handleGetAlerts}
               >
                 Get trade alerts
               </Button>
@@ -511,6 +501,7 @@ export default function Dashboard() {
           if (!open) closeStrategyDrawer();
         }}
         strategy={selectedStrategy}
+        onAutoTrade={handleAutoTrade}
       />
 
       {/* Alerts Dialog */}
@@ -560,4 +551,4 @@ export default function Dashboard() {
       )}
     </div>
   );
-}
+}

src/features/dashboard/components/StrategyDetailDrawer.tsx

@@ -60,6 +60,7 @@ interface StrategyDetailDrawerProps {
   open: boolean;
   onOpenChange: (open: boolean) => void;
   strategy: StrategyDetailStats | null;
+  onAutoTrade: () => void;
 }
 
 function formatTradeDate(dateStr: string): string {
@@ -111,6 +112,7 @@ export default function StrategyDetailDrawer({
   open,
   onOpenChange,
   strategy,
+  onAutoTrade,
 }: StrategyDetailDrawerProps) {
   const isMobile = useIsMobile();
   const [followAlertsOpen, setFollowAlertsOpen] = useState(false);
@@ -278,50 +280,52 @@ export default function StrategyDetailDrawer({
           <span>Sharpe {metrics.sharpe.toFixed(2)}</span>
         </div>
       </details>
+    </div>
+  );
 
-      <div className="flex flex-col gap-2 pt-2 border-t border-border">
-        <div className="flex gap-2">
-          <Button
-            type="button"
-            variant="secondary"
-            size="sm"
-            className="flex-1"
-            onClick={handleFollowAlerts}
-          >
-            Follow Alerts
-          </Button>
-          <Button
-            type="button"
-            variant="default"
-            size="sm"
-            className="flex-1"
-            disabled
-            title="Auto-Trade (Alpaca / IBKR / Tradier) coming soon"
-          >
-            Auto-Trade
-          </Button>
-        </div>
-        <Button variant="outline" size="sm" asChild>
-          <Link href={`/strategies/${strategy.linkId}`} onClick={() => onOpenChange(false)}>
-            Open full strategy →
-          </Link>
+  const actionBar = (
+    <div className="flex flex-col gap-2">
+      <div className="flex gap-2">
+        <Button
+          type="button"
+          variant="secondary"
+          size="sm"
+          className="flex-1"
+          onClick={handleFollowAlerts}
+        >
+          Follow Alerts
+        </Button>
+        <Button
+          type="button"
+          variant="default"
+          size="sm"
+          className="flex-1"
+          onClick={onAutoTrade}
+        >
+          Auto-Trade
         </Button>
       </div>
+      <Button variant="outline" size="sm" asChild>
+        <Link href={`/strategies/${strategy.linkId}`} onClick={() => onOpenChange(false)}>
+          Open full strategy →
+        </Link>
+      </Button>
     </div>
   );
 
   if (isMobile) {
     return (
       <>
         <Drawer open={open} onOpenChange={onOpenChange}>
-          <DrawerContent>
+          <DrawerContent className="h-[85vh] max-h-[85vh] flex flex-col">
             <DrawerHeader>
               <DrawerTitle className="text-left">{displayName}</DrawerTitle>
               <DrawerDescription className="text-left">
                 Strategy performance and allocation details
               </DrawerDescription>
             </DrawerHeader>
-            <div className="px-4 pb-6 overflow-y-auto">{content}</div>
+            <div className="px-4 flex-1 overflow-y-auto pb-4">{content}</div>
+            <div className="border-t border-border p-4 pt-3 bg-background">{actionBar}</div>
           </DrawerContent>
         </Drawer>
         {followAlertsOpen && (
@@ -340,12 +344,13 @@ export default function StrategyDetailDrawer({
   return (
     <>
       <Dialog open={open} onOpenChange={onOpenChange}>
-        <DialogContent className="max-w-md max-h-[90vh] overflow-y-auto">
-          <DialogHeader>
+        <DialogContent className="max-w-md max-h-[90vh] flex flex-col p-0 gap-0 overflow-hidden">
+          <DialogHeader className="px-6 pt-6 pb-3">
             <DialogTitle>{displayName}</DialogTitle>
             <DialogDescription>Strategy performance and allocation details</DialogDescription>
           </DialogHeader>
-          {content}
+          <div className="px-6 flex-1 overflow-y-auto pb-4">{content}</div>
+          <div className="border-t border-border px-6 pb-6 pt-3 bg-background">{actionBar}</div>
         </DialogContent>
       </Dialog>
       {followAlertsOpen && (
@@ -360,4 +365,3 @@ export default function StrategyDetailDrawer({
     </>
   );
 }
-