feat: improve search bar UX and mobile responsiveness - Redesign tag layout to separate row above input field - Add floating action button for New Blog on mobile - Improve alignment and spacing of search components - Fix mobile filter menu layout and readability - Maintain consistent UI across different screen sizes

app/(core)/components/Search.jsx

@@ -89,7 +89,7 @@ export function Search({ onSearch, extraButton }) {
             <input
               type="search"
               name="query"
-              placeholder={selectedTags.length > 0 ? "" : "Search..."}
+              placeholder="Search..."
               aria-label="Search"
               value={searchText}
               onChange={handleTextChange}

app/(core)/styles/index.css

@@ -244,7 +244,7 @@ nav a:hover::after {
 
 .search-container {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   border: 1px solid var(--border-color);
   border-radius: var(--border-radius);
   overflow: hidden;
@@ -278,8 +278,9 @@ nav a:hover::after {
 }
 
 .search-container > svg {
-  align-self: center;
+  align-self: flex-end;
   margin: 0 0.5rem;
+  padding-bottom: 0.7rem;
   color: var(--ph-fg-muted);
 }
 
@@ -294,7 +295,7 @@ nav a:hover::after {
 
 .search-header {
   display: flex;
-  align-items: center;
+  align-items: flex-end;
   gap: 0.5rem;
   width: 100%;
   justify-content: center;
@@ -304,15 +305,16 @@ nav a:hover::after {
   background: none;
   color: var(--text-color);
   padding: 0.5rem;
+  padding-bottom: 0.65rem;
   border-radius: var(--border-radius);
   cursor: pointer;
   transition:
     background 0.3s,
     border-color 0.3s;
-  height: 100%;
   display: flex;
   align-items: center;
   justify-content: center;
+  align-self: flex-end;
 }
 
 .filter-toggle:hover,
@@ -396,27 +398,29 @@ nav a:hover::after {
 .tag-input-area {
   display: flex;
   flex-wrap: wrap;
-  gap: 0.4rem;
-  align-items: center;
-  flex: 1;
-}
-
-.tag-input-area {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
   padding: 0 0.5rem;
   flex-grow: 1;
+  flex-basis: 100%;
   min-width: 10rem;
+  gap: 0.4rem;
+  align-content: flex-start;
 }
 
 .selected-tag-wrapper {
   display: flex;
   align-items: center;
-  margin: 0.2rem 0.2rem 0.2rem 0;
   padding: 0.1rem 0;
   border-radius: var(--border-radius);
   background-color: var(--secondary-bg-color);
+  margin-bottom: auto;
+  margin-top: 0.5rem;
+}
+
+.tag-input-area input {
+  flex: 1 1 100%;
+  min-width: 100%;
+  order: 999;
+  margin-top: auto;
 }
 
 .selected-tag-wrapper > .tag {
@@ -484,6 +488,11 @@ header.open nav ul {
     display: none;
   }
 
+  /* Disable search bar expansion on mobile */
+  .search-container input:focus {
+    width: 15rem;
+  }
+
   /* Horizontal filters container */
   .horizontal-menu-container {
     width: 100%;
@@ -496,17 +505,16 @@ header.open nav ul {
   }
 
   .horizontal-menu {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    display: flex;
+    flex-wrap: wrap;
     gap: 0.5rem;
     width: 100%;
-    white-space: normal; /* allow wrapping to multiple rows */
     overflow: visible;
   }
 
   .filter-button {
-    flex: none;
-    width: 100%;
+    flex: 0 0 auto;
+    width: auto;
     max-width: none;
     text-align: center;
     margin-bottom: 0;
@@ -1032,8 +1040,8 @@ footer {
 .back-to-top {
   position: fixed;
   right: 1.5rem;
-  width: 3rem;
-  height: 3rem;
+  width: 56px;
+  height: 56px;
   background: var(--accent-color);
   color: #000;
   border: none;
@@ -2796,6 +2804,54 @@ footer {
   width: 100%;
 }
 
+/* Blog page specific: match search wrapper to blog cards width */
+.blogs-container .header-controls {
+  padding: 0;
+}
+
+.blogs-container .search-wrapper {
+  max-width: 100%;
+  width: 100%;
+  padding: 0;
+}
+
+/* Match New Blog button height to search bar */
+.header-controls .ph-btn {
+  --pad-y: 0.5rem;
+  align-self: flex-end;
+  flex-shrink: 0;
+}
+
+/* Floating Action Button for New Blog (Mobile) */
+.fab-new-blog {
+  position: fixed;
+  bottom: 6.5rem;
+  right: 1.5rem;
+  width: 56px;
+  height: 56px;
+  border-radius: 50%;
+  background: var(--accent-color);
+  color: var(--bg-color);
+  border: none;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5rem;
+  transition: all 0.3s ease;
+  z-index: 1000;
+}
+
+.fab-new-blog:hover {
+  transform: scale(1.1);
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.4);
+}
+
+.fab-new-blog:active {
+  transform: scale(0.95);
+}
+
 /* Create a new Blog page */
 .create-blog-container {
   max-width: 1100px;

app/(pages)/blog/page.jsx

@@ -55,14 +55,16 @@ export default function Blog() {
         <Search
           onSearch={setSearchTerm}
           extraButton={
-            <button
-              onClick={handleCreateNewBlog}
-              className="ph-btn ph-btn--primary cursor-pointer"
-              aria-label="Create a new blog"
-            >
-              <FontAwesomeIcon icon={faPlus} />
-              {!isMobile && "New Blog"}
-            </button>
+            !isMobile ? (
+              <button
+                onClick={handleCreateNewBlog}
+                className="ph-btn ph-btn--primary cursor-pointer"
+                aria-label="Create a new blog"
+              >
+                <FontAwesomeIcon icon={faPlus} />
+                New Blog
+              </button>
+            ) : undefined
           }
         />
       </div>
@@ -120,6 +122,17 @@ export default function Blog() {
           )}
         </div>
       </main>
+
+      {/* Floating Action Button for Mobile */}
+      {isMobile && (
+        <button
+          onClick={handleCreateNewBlog}
+          className="fab-new-blog"
+          aria-label="Create a new blog"
+        >
+          <FontAwesomeIcon icon={faPlus} />
+        </button>
+      )}
     </div>
   );
 }