fix(library): Anchor message to bottom of page (#9572)

This PR fixes the layout of the Library page. It properly anchors the
'old experience' message to the bottom of the viewport and improves the
overall page structure using semantic HTML and Tailwind best practices.

Resolves: #9524 

### Changes 🏗️
- Restructured the LibraryPage component to use proper semantic HTML
with a `<main>` element
- Added a fixed Alert component at the bottom of the viewport with 8px
margin
- Used ShadcN Alert component for the 'old experience' message for UI
consistency
- Implemented responsive behavior to hide the alert on mobile screens
- Optimized Tailwind classes by using the `container` utility and
removing redundant styles
- Improved accessibility and UX by using appropriate semantic elements

### Screenshot
<img width="926" alt="image"
src="https://github.com/user-attachments/assets/e393007c-639e-4383-922c-41fa67133da8"
/>

### Checklist 📋

#### For code changes:
- [x] I have clearly listed my changes in the PR description
- [x] I have made a test plan
- [x] I have tested my changes according to the test plan:

<details>
  <summary>Alert Message at Bottom of Library Page</summary>

- [ ] Visit the Library page and verify the alert appears fixed at the
bottom with 8px margin
- [ ] Resize browser window to various desktop sizes and confirm alert
remains centered
- [ ] Scroll through Library page content and verify the alert stays
fixed at the bottom
- [ ] Open developer tools and toggle to mobile view (width < 640px) to
confirm alert is hidden
- [ ] Test in both light and dark mode to ensure alert styling is
consistent with theme
- [ ] Click the "here" link in the alert and verify it navigates to the
monitoring page
- [ ] Verify that QuestionMarkCircled icon in the alert is properly
styled and visible

</details>

---------

Co-authored-by: Bentlybro <tomnoon9@gmail.com>

autogpt_platform/frontend/src/app/library/page.tsx

@@ -4,6 +4,7 @@ import {
   ArrowBottomRightIcon,
   QuestionMarkCircledIcon,
 } from "@radix-ui/react-icons";
+import { Alert, AlertDescription } from "@/components/ui/alert";
 
 import { LibraryPageStateProvider } from "./state-provider";
 import LibraryActionSubHeader from "@/components/library/library-action-sub-header";
@@ -17,7 +18,7 @@ import LibraryAgentList from "@/components/library/library-agent-list";
 
 export default function LibraryPage() {
   return (
-    <main className="mx-auto w-screen max-w-[1600px] space-y-4 bg-neutral-50 p-4 px-2 dark:bg-neutral-900 sm:px-8 md:px-12">
+    <main className="container min-h-screen space-y-4 sm:px-8 md:px-12">
       <LibraryPageStateProvider>
         {/* Header section containing notifications, search functionality and upload mechanism */}
         <LibraryActionHeader />
@@ -29,8 +30,11 @@ export default function LibraryPage() {
         <LibraryAgentList />
       </LibraryPageStateProvider>
 
-      <div className="!mb-8 !mt-12 flex w-full justify-center">
-        <p className="rounded-xl bg-white p-4 text-neutral-600">
+      <Alert
+        variant="default"
+        className="fixed bottom-2 left-1/2 hidden max-w-4xl -translate-x-1/2 md:block"
+      >
+        <AlertDescription className="text-center">
           Prefer the old experience? Click{" "}
           <Link href="/monitoring" className="underline">
             here
@@ -38,8 +42,8 @@ export default function LibraryPage() {
           to go to it. Please do let us know why by clicking the{" "}
           <QuestionMarkCircledIcon className="inline-block size-6 rounded-full bg-[rgba(65,65,64,1)] p-1 align-bottom text-neutral-50" />{" "}
           in the bottom right corner <ArrowBottomRightIcon className="inline" />
-        </p>
-      </div>
+        </AlertDescription>
+      </Alert>
     </main>
   );
 }