Updated event bet page.

frontend/tests/debug-trading-panel.spec.ts

@@ -0,0 +1,46 @@
+import { test } from '@playwright/test';
+
+test('capture trading panel screenshot', async ({ page }) => {
+  // Navigate to event detail
+  await page.goto('/events/1', { waitUntil: 'networkidle' });
+  await page.waitForTimeout(3000);
+
+  // Take screenshot
+  await page.screenshot({ path: 'test-results/event-detail.png', fullPage: true });
+
+  // Check the spread values being used
+  const spreadInfo = await page.evaluate(() => {
+    // Look for the spread grid to understand the range
+    const spreadGridCells = document.querySelectorAll('.grid button');
+    const spreads: string[] = [];
+    spreadGridCells.forEach(cell => {
+      const text = cell.textContent;
+      if (text && (text.includes('+') || text.includes('-') || text.match(/^\\d/))) {
+        spreads.push(text.substring(0, 10));
+      }
+    });
+
+    // Check order book sections
+    const orderBookContainer = document.querySelector('.col-span-3');
+    const aboveSection = orderBookContainer?.querySelectorAll('.flex-1.overflow-y-auto')[0];
+    const belowSection = orderBookContainer?.querySelectorAll('.flex-1.overflow-y-auto')[1];
+
+    // Count rows in each section
+    const aboveRows = aboveSection?.querySelectorAll('button').length || 0;
+    const belowRows = belowSection?.querySelectorAll('button').length || 0;
+
+    // Get the official spread from the header
+    const officialSpreadElement = document.querySelector('.text-3xl.font-bold');
+    const officialSpread = officialSpreadElement?.textContent;
+
+    return {
+      officialSpread,
+      aboveRowCount: aboveRows,
+      belowRowCount: belowRows,
+      aboveSectionHTML: aboveSection?.innerHTML?.substring(0, 500) || 'not found',
+      belowSectionHTML: belowSection?.innerHTML?.substring(0, 500) || 'not found',
+    };
+  });
+
+  console.log('Spread info:', JSON.stringify(spreadInfo, null, 2));
+});