Hide dashboard sidebar on staff/supervisor/admin sub-pages; fix mobile overflow

- Sidebar now shows only on each role's root landing page
  (/dashboard/staff, /dashboard/supervisor, /dashboard/admin) and hides on
  every sub-page beneath them, not just Reports. Navbar's "Dashboard" link
  always leads back to the role root.
- Fixed two dropdown panels (EventsDropdown, the Email/WhatsApp Attendees
  recipient picker) that could extend past the viewport's right edge on
  narrow screens; both now stretch to their trigger's width like other
  dropdowns in the app already do.
- Wrapped the Admin Cashup event-costs table in the same overflow-auto
  container every sibling table on that page already uses, so it scrolls
  horizontally on narrow screens instead of squeezing its columns.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

frontend/src/components/reports/EventsDropdown.tsx

@@ -42,7 +42,7 @@ export default function EventsDropdown({ options, value, onChange }: {
         <ChevronDown className={"w-4 h-4 text-gray-400 shrink-0 transition-transform " + (open ? "rotate-180" : "")} />
       </button>
       {open && (
-        <div className="absolute z-20 mt-1 w-full min-w-[240px] bg-white border rounded-lg shadow-lg max-h-64 overflow-auto p-1">
+        <div className="absolute z-20 mt-1 left-0 right-0 bg-white border rounded-lg shadow-lg max-h-64 overflow-auto p-1">
           <div className="flex items-center justify-between px-2 py-1.5 text-xs text-gray-500 border-b mb-1">
             <button type="button" className="hover:underline" onClick={() => onChange(options.map(o => o.value))}>Select all</button>
             <button type="button" className="hover:underline" onClick={() => onChange([])}>Clear</button>