Add padding to the bottom of main content areas

Add `pb-24` class to `main` elements in various pages to provide adequate spacing between content and the bottom navigation bar.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 0fb68265-c270-4198-9584-3d9be9bddb41
Replit-Commit-Checkpoint-Type: full_checkpoint
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/3df548ff-50ae-432f-9be4-25d34eccc983/0fb68265-c270-4198-9584-3d9be9bddb41/hntn6cC

client/src/pages/MediaOutlet.tsx

@@ -339,7 +339,7 @@ export default function MediaOutlet() {
         </div>
       </header>
 
-      <main className="flex-1 max-w-7xl mx-auto px-6 py-4 w-full">
+      <main className="flex-1 max-w-7xl mx-auto px-6 py-4 pb-24 w-full">
         {/* Outlet Header */}
         <div className="mb-4">
           <div className="flex items-start space-x-4 mb-3">