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 ( return (
<div className="container mx-auto px-8 md:px-20 lg:px-32 xl:px-48 2xl:px-64"> <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="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"> <div className="flex items-center gap-2">
<h2 className="text-3xl font-bold text-gray-900 dark:text-white"> <h2 className="text-3xl font-bold text-gray-900 dark:text-white">
{t('updates.title')} {t('updates.title')}
@ -137,11 +137,13 @@ const Timeline = () => {
</a> </a>
</div> </div>
<TagFilter <div className="w-full md:w-auto">
availableTags={availableTags} <TagFilter
selectedTags={selectedTags} availableTags={availableTags}
onChange={handleTagChange} selectedTags={selectedTags}
/> onChange={handleTagChange}
/>
</div>
</div> </div>
<div className="relative"> <div className="relative">

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

@ -59,26 +59,26 @@ const TagFilter: React.FC<TagFilterProps> = ({
return ( return (
<div className="relative" ref={dropdownRef}> <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 && ( {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 => ( {selectedTags.map(tag => (
<span <span
key={tag} 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}`)} {t(`updates.tags.${tag}`)}
<button <button
onClick={() => handleRemoveTag(tag)} onClick={() => handleRemoveTag(tag)}
className="text-blue-600 dark:text-blue-400 hover:text-blue-800 dark:hover:text-blue-300" 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> </button>
</span> </span>
))} ))}
<button <button
onClick={handleClearAll} 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')} {t('updates.filter.clear')}
</button> </button>
@ -86,13 +86,13 @@ const TagFilter: React.FC<TagFilterProps> = ({
)} )}
<button <button
onClick={() => setIsOpen(!isOpen)} 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 isOpen
? 'bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200' ? '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' : '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')} {t('updates.filter.title')}
</button> </button>
</div> </div>