Enhance hero selection functionality in LiveSeriesPage by adding search and role filter options. Update App.test.tsx to include tests for new search and tab interaction features. Improve translations for hero search-related strings and adjust CSS for new UI elements. This update aims to improve user experience during hero bans in live matches.

frontend/src/App.test.tsx

@@ -1,4 +1,4 @@
-import { cleanup, render, screen } from '@testing-library/react'
+import { cleanup, fireEvent, render, screen } from '@testing-library/react'
 import { afterEach, describe, expect, it } from 'vitest'
 import App from './App'
 import { demoSeries } from './api/demo'
@@ -48,6 +48,10 @@ describe('Mixmaker frontend', () => {
     render(<App />)
     expect(await screen.findByRole('heading', { name: 'Series control' })).toBeInTheDocument()
     expect(screen.getByRole('link', { name: /spectator view/i })).toHaveAttribute('href', '/watch/series-1')
+    fireEvent.click(screen.getByRole('tab', { name: /DPS/i }))
+    fireEvent.change(screen.getByRole('searchbox', { name: /search hero/i }), { target: { value: 'tRaC' } })
+    expect(screen.getByRole('radio', { name: /Tracer/i })).toBeInTheDocument()
+    expect(screen.queryByRole('radio', { name: /Ana/i })).not.toBeInTheDocument()
   })
 
   it('does not reuse completed-map hero bans during map pick', () => {