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

[YuSuBH]

🔍 Description

This PR significantly improves the search bar UX and mobile responsiveness across the blog and simulations pages, addressing several usability issues and implementing modern mobile UI patterns.

Motivation

The existing search implementation had several UX issues:

• On mobile, the "New Blog" button cluttered the header and competed for space with the search bar
• Selected filter tags displayed inline with the search input, reducing available typing space and causing layout shifts
• Icons and buttons had inconsistent vertical alignment when tags were selected
• The filter tag menu used a rigid 3-column grid on mobile, causing overflow issues
• Search bar width was inconsistent between pages
• Overall mobile experience felt cramped and difficult to navigate

Changes

Search Bar Layout Redesign:

• Restructured tag input area to display selected tags on a separate row above the search input field
• Tags now always appear above the input, providing consistent layout and maximum typing space
• Aligned search icon, filter icon, and action buttons to bottom baseline for visual consistency
• Maintained "Search..." placeholder visibility even when tags are selected

Mobile-First Improvements:

• Implemented floating action button (FAB) for "New Blog" on mobile (≤768px), positioned in bottom-right
• FAB stacks vertically above the existing "Back to Top" button with proper spacing
• Matched button diameters (56px) for visual consistency
• Replaced rigid 3-column filter grid with flexible wrap layout for better mobile experience
• Disabled search bar expansion on focus for mobile to prevent layout issues

Impact

• ✅ Better use of screen real estate on mobile devices
• ✅ Improved typing experience with dedicated input space
• ✅ Modern, familiar FAB pattern for primary actions
• ✅ Consistent visual hierarchy and alignment
• ✅ More intuitive filter tag selection and management
• ✅ Responsive design that adapts gracefully to different screen sizes

Closes #133

---

🎨 Visual Changes

Floating action button (FAB) for "New Blog" and new filter tags layout on mobile New search bar layout

---

📂 Type of Change

• 🐛 Bug fix (non-breaking change that fixes an issue)
• 🎨 UI/UX enhancement

[physicshub]

Hey thank you so much for this!

[physicshub]

🎉 This PR is included in version 3.24.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[YuSuBH]

Thanks for the review and merge! Happy to contribute—looking forward to more improvements.

[mattqdev]

I'm happy to hear this! Thank again for your help