Added include this event to my bets.

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<TabType>('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) => {
         </Link>
       </div>
 
-      {/* Tabs */}
-      <div className="flex gap-2 mb-4 border-b">
-        <button
-          onClick={() => setActiveTab('active')}
-          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-            activeTab === 'active'
-              ? 'border-blue-500 text-blue-600'
-              : 'border-transparent text-gray-500 hover:text-gray-700'
-          }`}
-        >
-          Active ({activeBets.length})
-        </button>
-        <button
-          onClick={() => setActiveTab('history')}
-          className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
-            activeTab === 'history'
-              ? 'border-blue-500 text-blue-600'
-              : 'border-transparent text-gray-500 hover:text-gray-700'
-          }`}
-        >
-          History {historyBets.length > 0 && `(${historyBets.length})`}
-        </button>
+      {/* Tabs and Filter */}
+      <div className="flex items-center justify-between mb-4 border-b">
+        <div className="flex gap-2">
+          <button
+            onClick={() => setActiveTab('active')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === 'active'
+                ? 'border-blue-500 text-blue-600'
+                : 'border-transparent text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            Active ({activeBets.length})
+          </button>
+          <button
+            onClick={() => setActiveTab('history')}
+            className={`px-4 py-2 text-sm font-medium border-b-2 transition-colors ${
+              activeTab === 'history'
+                ? 'border-blue-500 text-blue-600'
+                : 'border-transparent text-gray-500 hover:text-gray-700'
+            }`}
+          >
+            History {historyBets.length > 0 && `(${historyBets.length})`}
+          </button>
+        </div>
+        {currentEventId && (
+          <label className="flex items-center gap-2 text-sm text-gray-600 cursor-pointer pb-2">
+            <input
+              type="checkbox"
+              checked={includeCurrentEvent}
+              onChange={(e) => setIncludeCurrentEvent(e.target.checked)}
+              className="rounded border-gray-300 text-blue-600 focus:ring-blue-500"
+            />
+            Include this event
+          </label>
+        )}
       </div>
 
       {/* Content */}

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<HTMLDivElement>(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
             <span className="text-left">{event.home_team.slice(0, 4)}</span>
           </div>
 
-          {/* Above official line - fills available space */}
-          <div className="flex-1 overflow-y-auto border-b border-gray-100 px-2">
+          {/* Above official line - fills available space, auto-scrolls to bottom */}
+          <div ref={aboveLineRef} className="flex-1 overflow-y-auto border-b border-gray-100 px-2">
             {aboveLine.length > 0 ? (
               aboveLine.map(spread => renderOrderRow(spread))
             ) : (