detail-panel-section

To add a new aircraft detail panel section, you create placeholder DOM scaffolding and implement a per-tick updater function that mutates the existing placeholders. This approach ensures the panel updates dynamically without rebuilding the HTML on every tick.

You can test FlightJar UI panel rendering by extending the automated Playwright smoke tests. These tests verify that the detail panel renders correctly and remains within the viewport boundaries during updates.

Wiring help icons and styling CSS for a detail panel involves following specific guidelines to maintain consistent panel width and layout. You edit the detail_panel.css file to apply styles and ensure the help icons are properly connected.

Yes, you need to update dotnet state mapping when adding new snapshot fields to the detail panel. This ensures the new per-aircraft information is correctly mapped and available for the frontend updater functions.

Layout shifts occur when HTML is rebuilt every tick instead of mutating existing placeholders. The strict workflow requires using per-tick updater functions to modify existing DOM elements and adhering to CSS guidelines for panel width.

This structured approach targets the FlightJar UI aircraft detail panel specifically. It covers placeholder DOM, per-tick updaters, help-icon wiring, CSS styling, and Playwright tests tailored for per-aircraft information sections.