bug(dashboard): ApprovalBanner invisible on mobile — users cannot approve/reject permissions

[OneStepAt4time]

Description

On the SessionDetailPage, the ApprovalBanner for permission prompts has className="hidden sm:block", meaning it is completely invisible on mobile screens (<640px).

When a session needs approval (permission_prompt or bash_approval status), mobile users see:

• A dark overlay (fixed inset-0 z-30 bg-black/40 sm:hidden) blocking interaction
• No visible approval UI at all

This is a critical user flow blocker — mobile is the primary use case for approving sessions remotely (the whole point of Aegis for solo devs).

Location

dashboard/src/pages/SessionDetailPage.tsx line ~195:

<motion.div
  initial={{ opacity: 0, y: -20 }}
  animate={{ opacity: 1, y: 0 }}
  className="hidden p-3 pb-0 sm:block sm:p-4"
>
  <ApprovalBanner ... />
</motion.div>

Expected Behavior

• ApprovalBanner should be visible and interactive on all screen sizes
• Mobile users should see a full-width approval card they can tap

Fix

Replace hidden sm:block with a mobile-first class like block or use a responsive layout that adapts the banner for small screens (stacked buttons below prompt instead of side-by-side).

Environment

• Aegis Dashboard (all versions with this component)
• Reproducible: resize browser to <640px or use mobile device

Impact

P1 — Mobile approval is a core use case. Users literally cannot approve agent actions on their phone.