starset-mirror/homepage
1
0
Fork 0
Code Issues 4 Pull requests Projects Releases Packages Wiki Activity Actions

fix: search bar too close to title on updates page in mobile view

Browse source
This commit is contained in:
CDN 2025-02-03 16:39:45 +08:00
parent 4ba16a7ddd
commit 7de33c3931
Signed by: CDN
GPG key ID: 0C656827F9F80080
2 changed files with 15 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

14
src/components/Timeline.tsx
View file

@ -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">

14
src/components/ui/TagFilter.tsx
View file

@ -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>