css

views/pages/index.ejs

@@ -4,9 +4,13 @@
 <div class="main-content">
   <div class="d-flex justify-content-between align-items-center mb-5">
     <h1 class="h2 fw-bold text-primary">All Posts</h1>
-    <form action="/index" method="GET" class="mb-4">
-      <label for="category" class="form-label">Filter by Category:</label>
-      <select name="category" id="category" class="form-select w-auto d-inline-block" onchange="this.form.submit()">
+    <div class="d-flex justify-content-between align-items-center mb-4 flex-wrap">
+      <h1 class="h2 fw-bold text-primary">All Posts</h1>
+      
+      <div class="d-flex align-items-center gap-3">
+        <label for="category" class="form-label mb-0 fw-semibold text-muted">Filter by Category:</label>
+        <form action="/index" method="GET" class="d-flex align-items-center gap-2">
+          <select name="category" id="category" class="form-select form-select-sm w-auto" onchange="this.form.submit()">
             <option value="">All Categories</option>
             <% categories.forEach(category => { %>
               <option value="<%= category.id %>" <%= selectedCategory == category.id ? 'selected' : '' %>>
@@ -15,6 +19,12 @@
             <% }) %>
           </select>
         </form>
+      </div>
+    
+      <div class="badge bg-primary rounded-pill px-3 py-2">
+        <%= posts.length %> posts
+      </div>
+    </div>
     
     <div class="badge bg-primary rounded-pill"><%= posts.length %> posts</div>
   </div>