ui improvements

tests/inspect-select.spec.ts

@@ -0,0 +1,58 @@
+import { test, expect } from '@playwright/test';
+
+test.describe('Inspect Select Component', () => {
+  test('should inspect the select dropdown behavior', async ({ page }) => {
+    await page.goto('/');
+
+    // Wait for page to load
+    await page.waitForLoadState('networkidle');
+
+    // Click the select trigger
+    const selectTrigger = page.locator('button').filter({ hasText: 'select an offense' });
+    await selectTrigger.click();
+
+    // Wait a bit for dropdown to appear
+    await page.waitForTimeout(1000);
+
+    // Take screenshot of the opened dropdown
+    await page.screenshot({ path: 'debug-screenshots/select-opened.png', fullPage: true });
+
+    // Get all elements in the viewport that contain crime names
+    const allText = await page.locator('*').filter({ hasText: /theft|grief|hacking/i }).allTextContents();
+    console.log('Elements with crime text:', allText);
+
+    // Try different locators for the dropdown content
+    const possibleLocators = [
+      '[data-radix-select-content]',
+      '[role="listbox"]',
+      '.select-content',
+      '[data-slot="select-content"]'
+    ];
+
+    for (const locator of possibleLocators) {
+      try {
+        const count = await page.locator(locator).count();
+        if (count > 0) {
+          console.log(`Found ${count} elements with locator: ${locator}`);
+          const text = await page.locator(locator).textContent();
+          console.log(`Content: ${text?.substring(0, 200)}...`);
+        }
+      } catch (error) {
+        console.log(`Locator ${locator} failed:`, error instanceof Error ? error.message : String(error));
+      }
+    }
+
+    // Get the full page HTML to inspect
+    const bodyHtml = await page.locator('body').innerHTML();
+    console.log('Body HTML length:', bodyHtml.length);
+
+    // Look for any elements that might contain the dropdown
+    const portalElements = await page.locator('[data-radix-portal]').count();
+    console.log('Radix portal elements:', portalElements);
+
+    if (portalElements > 0) {
+      const portalContent = await page.locator('[data-radix-portal]').textContent();
+      console.log('Portal content preview:', portalContent?.substring(0, 300));
+    }
+  });
+});