From 8ad6814b86dba278b3001f74c93b9edf42fc6d25 Mon Sep 17 00:00:00 2001
From: Phill Pover <phill@anatid.net>
Date: Sun, 6 Apr 2025 17:15:11 +0100
Subject: [PATCH] Moving modal outside of content

---
 frontend/src/app/album/page.tsx | 90 +++++++++++++++++----------------
 1 file changed, 47 insertions(+), 43 deletions(-)

diff --git a/frontend/src/app/album/page.tsx b/frontend/src/app/album/page.tsx
index 05684d2..fdd95e0 100644
--- a/frontend/src/app/album/page.tsx
+++ b/frontend/src/app/album/page.tsx
@@ -40,6 +40,7 @@ export default function Page() {
   if (!albums) return <div>Loading...</div>
 
   return (
+    <>
     <div className="container">
       <Button variant="primary" onClick={handleShow}>
         Add Album
@@ -74,49 +75,52 @@ export default function Page() {
         ))}
         </tbody>
       </table>
-      <Modal
-        show={show}
-        onHide={handleClose}
-        backdrop="static"
-        keyboard={false}
-      >
-        <Modal.Header closeButton>
-          <Modal.Title>Create Album</Modal.Title>
-        </Modal.Header>
-        <Modal.Body>
-          <div className="container">
-            <form onSubmit={onSubmit}>
-              <div className="row">
-                <div className="six columns">
-                  <label htmlFor="album-title">Album Title</label><input type="text" name="title" id="album-title" />
-                </div>
-                <div className="six columns">
-                  <label htmlFor="album-artist">Artist</label><input type="text" name="artist" id="album-artist" />
-                </div>
-              </div>
-              <div className="row">
-                <div className="six columns">
-                  <label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" />
-                </div>
-              </div>
-              <div className="row">
-                <div className="six columns">
-                  <button type="submit">Create</button>
-                </div>
-              </div>
-            </form>
-              <Link href={pathname}>
-                  <button type="button" className="bg-red-500 text-white p-2">Close Modal</button>
-              </Link>
-          </div>
-        </Modal.Body>
-        <Modal.Footer>
-          <Button variant="secondary" onClick={handleClose}>
-            Close
-          </Button>
-          <Button variant="primary">Create</Button>
-        </Modal.Footer>
-      </Modal>
+
     </div>
+
+    <Modal
+      show={show}
+      onHide={handleClose}
+      backdrop="static"
+      keyboard={false}
+    >
+      <Modal.Header closeButton>
+        <Modal.Title>Create Album</Modal.Title>
+      </Modal.Header>
+      <Modal.Body>
+        <div>
+          <form onSubmit={onSubmit}>
+            <div className="row">
+              <div className="six columns">
+                <label htmlFor="album-title">Album Title</label><input type="text" name="title" id="album-title" />
+              </div>
+              <div className="six columns">
+                <label htmlFor="album-artist">Artist</label><input type="text" name="artist" id="album-artist" />
+              </div>
+            </div>
+            <div className="row">
+              <div className="six columns">
+                <label htmlFor="album-genre">Genre</label><input type="text" name="genre" id="album-genre" />
+              </div>
+            </div>
+            <div className="row">
+              <div className="six columns">
+                <button type="submit">Create</button>
+              </div>
+            </div>
+          </form>
+            <Link href={pathname}>
+                <button type="button" className="bg-red-500 text-white p-2">Close Modal</button>
+            </Link>
+        </div>
+      </Modal.Body>
+      <Modal.Footer>
+        <Button variant="secondary" onClick={handleClose}>
+          Close
+        </Button>
+        <Button variant="primary">Create</Button>
+      </Modal.Footer>
+    </Modal>
+    </>
   );
 }