diff --git a/frontend/src/components/bets/MyOtherBets.tsx b/frontend/src/components/bets/MyOtherBets.tsx index 92fe9a0..416fbd7 100644 --- a/frontend/src/components/bets/MyOtherBets.tsx +++ b/frontend/src/components/bets/MyOtherBets.tsx @@ -34,6 +34,7 @@ type TabType = 'active' | 'history' export const MyOtherBets = ({ currentEventId }: MyOtherBetsProps) => { const { isAuthenticated, user } = useAuthStore() const [activeTab, setActiveTab] = useState('active') + const [includeCurrentEvent, setIncludeCurrentEvent] = useState(true) const { data: activeBets = [], isLoading: isLoadingActive } = useQuery({ queryKey: ['my-active-bets'], @@ -52,7 +53,10 @@ export const MyOtherBets = ({ currentEventId }: MyOtherBetsProps) => { } const isLoading = activeTab === 'active' ? isLoadingActive : isLoadingHistory - const bets = activeTab === 'active' ? activeBets : historyBets + const allBets = activeTab === 'active' ? activeBets : historyBets + const bets = includeCurrentEvent + ? allBets + : allBets.filter(bet => bet.event_id !== currentEventId) const renderBetRow = (bet: SpreadBetDetail) => { const isCurrentEvent = bet.event_id === currentEventId @@ -137,28 +141,41 @@ export const MyOtherBets = ({ currentEventId }: MyOtherBetsProps) => { - {/* Tabs */} -
- - + {/* Tabs and Filter */} +
+
+ + +
+ {currentEventId && ( + + )}
{/* Content */} diff --git a/frontend/src/components/bets/TradingPanel.tsx b/frontend/src/components/bets/TradingPanel.tsx index 48a1fb9..e8217ea 100644 --- a/frontend/src/components/bets/TradingPanel.tsx +++ b/frontend/src/components/bets/TradingPanel.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useMemo } from 'react' +import { useState, useEffect, useMemo, useRef } from 'react' import { Link } from 'react-router-dom' import { useAuthStore } from '@/store' import { useMutation, useQueryClient } from '@tanstack/react-query' @@ -52,6 +52,9 @@ export const TradingPanel = ({ event, onBetCreated, onBetTaken }: TradingPanelPr const [stakeAmount, setStakeAmount] = useState('') const [activeTab, setActiveTab] = useState<'chart' | 'grid'>('chart') + // Ref for above spread line container + const aboveLineRef = useRef(null) + // Update countdown every second useEffect(() => { const interval = setInterval(() => { @@ -110,6 +113,13 @@ export const TradingPanel = ({ event, onBetCreated, onBetTaken }: TradingPanelPr } }, [event.min_spread, event.max_spread, event.official_spread]) + // Auto-scroll above spread line to bottom after render + useEffect(() => { + if (aboveLineRef.current) { + aboveLineRef.current.scrollTop = aboveLineRef.current.scrollHeight + } + }, [aboveLine]) + // Get all bets for chart and recent activity (including matched) const allBetsWithSpread = useMemo(() => { const bets: (SpreadGridBet & { spread: number })[] = [] @@ -418,8 +428,8 @@ export const TradingPanel = ({ event, onBetCreated, onBetTaken }: TradingPanelPr {event.home_team.slice(0, 4)}
- {/* Above official line - fills available space */} -
+ {/* Above official line - fills available space, auto-scrolls to bottom */} +
{aboveLine.length > 0 ? ( aboveLine.map(spread => renderOrderRow(spread)) ) : ( diff --git a/frontend/test-results/event-with-other-bets.png b/frontend/test-results/event-with-other-bets.png index 4ef3dfd..69f2e38 100644 Binary files a/frontend/test-results/event-with-other-bets.png and b/frontend/test-results/event-with-other-bets.png differ