fix navbar drop down going off the screen and move messages button to the drop down

database/db_init.py

@@ -127,7 +127,6 @@ def init_database():
             photoid TEXT
         )
         """)
-    init_accounts_database()
     print("Database initialised.")
     seed_species()
 

static/styles.css

@@ -544,7 +544,7 @@ input:focus {
   display: none;
   position: absolute;
   top: 100%;
-  left: 0;
+  right: 0;
   background-color: rgb(0, 0, 0);
   min-width: 160px;
   box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);

templates/navbar.jinja

@@ -24,11 +24,14 @@
         </div>
         <a href="/admin">Admin</a>
         {% endif %}
-        
+
-        <!-- Messages link with unread badge -->
+        <a href="/about">About</a>
-        <a href="/messages" class="messages-link" style="position: relative;">
+
-            Messages
+        <div class="dropdown">
-            <span id="unread-badge" style="
+            <a class="dropbtn">{{user["username"]}} ▾</a>
+            <div class="dropdown-content">
+                <a href="/messages">Messages
+                    <span id="unread-badge" style="
                 background: #e74c3c;
                 color: white;
                 border-radius: 10px;
@@ -36,14 +39,7 @@
                 font-size: 0.7rem;
                 margin-left: 5px;
                 display: none;
-            ">0</span>
+            ">0</span></a>
-        </a>
-        
-        <a href="/about">About</a>
-        
-        <div class="dropdown">
-            <a class="dropbtn">{{user["username"]}} ▾</a>
-            <div class="dropdown-content">
                 <a href="/dashboard">Dashboard</a>
                 <a href="/settings">Settings</a>
                 <a href="/logout">Logout</a>
@@ -57,24 +53,24 @@
 </div>
 
 <script>
-function updateUnreadCount() {
+    function updateUnreadCount() {
-    fetch('/messages/unread-count')
+        fetch('/messages/unread-count')
-        .then(response => response.json())
+            .then(response => response.json())
-        .then(data => {
+            .then(data => {
-            const badge = document.getElementById('unread-badge');
+                const badge = document.getElementById('unread-badge');
-            if (data.count > 0) {
+                if (data.count > 0) {
-                badge.textContent = data.count;
+                    badge.textContent = data.count;
-                badge.style.display = 'inline-block';
+                    badge.style.display = 'inline-block';
-            } else {
+                } else {
-                badge.style.display = 'none';
+                    badge.style.display = 'none';
-            }
+                }
-        })
+            })
-        .catch(error => console.error('Error fetching unread count:', error));
+            .catch(error => console.error('Error fetching unread count:', error));
-}
+    }
 
-// Update immediately on page load
+    // Update immediately on page load
-updateUnreadCount();
+    updateUnreadCount();
 
-// Then update every 30 seconds
+    // Then update every 30 seconds
-setInterval(updateUnreadCount, 30000);
+    setInterval(updateUnreadCount, 30000);
-</script>
+</script>