hikmettan/ihaleist
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Fix list and header overflow on mobile and tablet widths

Browse Source
This commit is contained in:
hikmettan
2026-09-06 09:54:48 +03:00
parent af250c0980
commit 3550f1a9bc
6 changed files with 62 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/Header.jsx
+10 -8
View File
@@ -36,26 +36,26 @@ export const Header = () => {
return (
<header className="bg-[#1f2937] text-white border-b border-slate-700 sticky top-0 z-40 shadow-sm">
<div className="max-w-[1600px] mx-auto px-4 h-16 flex items-center justify-between gap-4">
<div className="max-w-[1600px] mx-auto px-3 sm:px-4 py-2 xl:py-0 xl:h-16 flex flex-wrap xl:flex-nowrap items-center justify-between gap-2 sm:gap-4">
{/* Logo */}
<div
onClick={() => { setActiveTab('list'); clearAllFilters(); }}
className="flex items-center gap-2.5 cursor-pointer select-none group"
className="flex shrink-0 items-center gap-1.5 sm:gap-2.5 cursor-pointer select-none group"
>
<div className="w-10 h-10 rounded-xl bg-blue-600 flex items-center justify-center shadow-md group-hover:bg-blue-500 transition-colors">
<div className="w-8 h-8 sm:w-10 sm:h-10 rounded-xl bg-blue-600 flex items-center justify-center shadow-md group-hover:bg-blue-500 transition-colors">
<Bot className="w-6 h-6 text-white" />
</div>
<div className="flex flex-col">
<span className="font-black text-2xl tracking-tight text-white flex items-center gap-1">
<span className="font-black text-xl sm:text-2xl tracking-tight text-white flex items-center gap-1">
İhale<span className="text-blue-400 font-extrabold">ist</span>
</span>
</div>
</div>
{/* Search Bar */}
<form onSubmit={handleSearchSubmit} className="flex-1 min-w-0 max-w-2xl flex items-center gap-2">
<div className="relative flex-1">
<form onSubmit={handleSearchSubmit} className="order-3 xl:order-none w-full xl:w-auto xl:flex-1 min-w-0 xl:max-w-2xl flex items-center gap-2">
<div className="relative flex-1 min-w-0">
<input
type="text"
value={searchQuery}
@@ -100,7 +100,7 @@ export const Header = () => {
</form>
{/* Right Action Icons */}
<div className="flex items-center gap-2 sm:gap-3 shrink-0">
<div className="ml-auto flex items-center gap-1 sm:gap-3 shrink-0">
{/* Real Live EKAP Mode Badge */}
<button
@@ -142,6 +142,7 @@ export const Header = () => {
{/* Notifications Dropdown */}
<div className="relative">
<button
aria-label="Bildirimler"
onClick={() => setShowNotifications(!showNotifications)}
className="relative p-2 text-slate-300 hover:text-white hover:bg-slate-700 rounded-lg transition-colors"
>
@@ -175,6 +176,7 @@ export const Header = () => {
{/* User Profile */}
<div className="relative">
<button
aria-label="Hesap menüsü"
onClick={() => setShowUserMenu(!showUserMenu)}
className="bg-slate-700 hover:bg-slate-600 text-white px-3 py-1.5 rounded-lg text-xs font-semibold flex items-center gap-2 transition-colors border border-slate-600"
>
@@ -185,7 +187,7 @@ export const Header = () => {
{(authUser?.name || userProfile.username).charAt(0).toUpperCase()}
</div>
)}
<span>{(authUser?.name || userProfile.username).split(' ')[0]}</span>
<span className="hidden sm:inline">{(authUser?.name || userProfile.username).split(' ')[0]}</span>
<ChevronDown className="w-3.5 h-3.5 text-slate-400" />
</button>
src/components/SummaryCards.jsx
+1 -1
View File
@@ -77,7 +77,7 @@ export const SummaryCards = () => {
setQuickFilter(card.id);
setActiveTab('list');
}}
className={`bg-white rounded-xl p-4 border transition-all cursor-pointer select-none shadow-xs flex items-center justify-between group hover:shadow-md ${
className={`bg-white rounded-xl p-4 border transition-all cursor-pointer select-none shadow-xs flex flex-wrap gap-2 items-center justify-between group hover:shadow-md ${
isSelected
? 'border-blue-600 ring-2 ring-blue-500/20 bg-blue-50/20'
: 'border-slate-200 hover:border-slate-300'
src/components/TenderList.jsx
+2 -2
View File
@@ -126,7 +126,7 @@ export const TenderList = () => {
};
return (
<div className="flex-1 space-y-4">
<div className="w-full min-w-0 flex-1 space-y-4">
{/* Header bar above list */}
<div className="bg-white rounded-xl border border-slate-200 p-4 shadow-xs flex flex-col sm:flex-row items-center justify-between gap-3">
@@ -137,7 +137,7 @@ export const TenderList = () => {
</h2>
</div>
<div className="flex items-center gap-3 w-full sm:w-auto">
<div className="flex flex-wrap items-center gap-3 w-full sm:w-auto">
{/* Varsayılan: yalnızca ihale tarihi geçmemiş ilanlar */}
<label
className="flex items-center gap-1.5 text-xs font-semibold text-slate-700 cursor-pointer select-none whitespace-nowrap"