From 7de33c39313569d7a2cdc61e000ac921cad34e37 Mon Sep 17 00:00:00 2001
From: cdn0x12 <git@cdn0x12.dev>
Date: Mon, 3 Feb 2025 16:39:45 +0800
Subject: [PATCH] fix: search bar too close to title on updates page in mobile
 view

---
 src/components/Timeline.tsx     | 14 ++++++++------
 src/components/ui/TagFilter.tsx | 14 +++++++-------
 2 files changed, 15 insertions(+), 13 deletions(-)

diff --git a/src/components/Timeline.tsx b/src/components/Timeline.tsx
index 121a531..fb4090f 100644
--- a/src/components/Timeline.tsx
+++ b/src/components/Timeline.tsx
@@ -121,7 +121,7 @@ const Timeline = () => {
   return (
     <div className="container mx-auto px-8 md:px-20 lg:px-32 xl:px-48 2xl:px-64">
       <div className="max-w-5xl">
-        <div className="flex flex-col md:flex-row md:items-center justify-between mb-12 pl-16">
+        <div className="flex flex-col md:flex-row md:items-center justify-between mb-12 pl-16 space-y-6 md:space-y-0">
           <div className="flex items-center gap-2">
             <h2 className="text-3xl font-bold text-gray-900 dark:text-white">
               {t('updates.title')}
@@ -137,11 +137,13 @@ const Timeline = () => {
             </a>
           </div>
           
-          <TagFilter
-            availableTags={availableTags}
-            selectedTags={selectedTags}
-            onChange={handleTagChange}
-          />
+          <div className="w-full md:w-auto">
+            <TagFilter
+              availableTags={availableTags}
+              selectedTags={selectedTags}
+              onChange={handleTagChange}
+            />
+          </div>
         </div>
 
         <div className="relative">
diff --git a/src/components/ui/TagFilter.tsx b/src/components/ui/TagFilter.tsx
index f1995f2..f7b8ecd 100644
--- a/src/components/ui/TagFilter.tsx
+++ b/src/components/ui/TagFilter.tsx
@@ -59,26 +59,26 @@ const TagFilter: React.FC<TagFilterProps> = ({
 
   return (
     <div className="relative" ref={dropdownRef}>
-      <div className="flex flex-wrap items-center gap-2">
+      <div className="flex flex-wrap items-center gap-2 max-w-full">
         {selectedTags.length > 0 && (
-          <div className="flex flex-wrap gap-2 items-center">
+          <div className="flex flex-wrap gap-2 items-center max-w-full">
             {selectedTags.map(tag => (
               <span
                 key={tag}
-                className="inline-flex items-center gap-1.5 px-3 py-1.5 rounded-full text-sm font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
+                className="inline-flex items-center gap-1.5 px-2.5 py-1 rounded-full text-sm font-medium bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200"
               >
                 {t(`updates.tags.${tag}`)}
                 <button
                   onClick={() => handleRemoveTag(tag)}
                   className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300"
                 >
-                  <X className="h-4 w-4" />
+                  <X className="h-3.5 w-3.5" />
                 </button>
               </span>
             ))}
             <button
               onClick={handleClearAll}
-              className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-sm"
+              className="text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 text-sm whitespace-nowrap"
             >
               {t('updates.filter.clear')}
             </button>
@@ -86,13 +86,13 @@ const TagFilter: React.FC<TagFilterProps> = ({
         )}
         <button
           onClick={() => setIsOpen(!isOpen)}
-          className={`inline-flex items-center gap-2 px-4 py-2 rounded-lg text-sm font-medium transition-colors ${
+          className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-sm font-medium transition-colors whitespace-nowrap ${
             isOpen
               ? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200'
               : 'bg-gray-100 dark:bg-gray-800 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-300 hover:bg-gray-200 dark:hover:bg-gray-700'
           }`}
         >
-          <Search className="h-4 w-4" />
+          <Search className="h-3.5 w-3.5" />
           {t('updates.filter.title')}
         </button>
       </div>