Add responsive card layout to admin activity events table

[maebeale]

What is the goal of this PR and why is this important?

• Make the admin activity events table usable on small screens
• On mobile (<768px), table rows collapse into stacked cards with labeled fields instead of requiring horizontal scrolling

How did you approach the change?

• Applied Kevin Powell's responsive table technique: visually hide <thead>, convert each <tr> to a block-level card, and use td::before { content: attr(data-label) } to show column headers inline
• Added data-label attributes to each <td> in the events table
• Added a reusable .responsive-table CSS class in application.tailwind.css

Why custom CSS instead of Tailwind utilities? The responsive card pattern requires the same set of styles on every <td> (display, grid, ::before pseudo-element with content: attr(data-label), etc.). Doing this with Tailwind utilities would mean repeating ~10 utility classes on every single <td> across every row. A single .responsive-table CSS class keeps the HTML clean and DRY — the only addition to each <td> is the data-label attribute.

UI Testing Checklist

• View admin activity events page on desktop — table should look unchanged
• View on mobile / narrow browser (<768px) — rows should display as stacked cards with labeled fields
• Verify properties hover tooltip still works on desktop

Anything else to add?

• The .responsive-table class is reusable for other tables in the app

🤖 Generated with Claude Code