news design correction padding 4

This commit is contained in:
alma 2025-04-15 14:08:50 +02:00
parent 5f0df65f93
commit 4a19269894

View File

@ -73,7 +73,7 @@ export function News() {
<CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle> <CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
</CardHeader> </CardHeader>
<CardContent className="p-4"> <CardContent className="p-4">
<div className="flex items-center justify-center h-[360px]"> <div className="flex items-center justify-center h-[420px]">
<RefreshCw className="h-5 w-5 animate-spin text-gray-400" /> <RefreshCw className="h-5 w-5 animate-spin text-gray-400" />
</div> </div>
</CardContent> </CardContent>
@ -99,17 +99,17 @@ export function News() {
{error ? ( {error ? (
<p className="text-center text-red-500">{error}</p> <p className="text-center text-red-500">{error}</p>
) : ( ) : (
<div className="space-y-1.5 h-[360px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent"> <div className="space-y-3 h-[420px] overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
{news.length === 0 ? ( {news.length === 0 ? (
<p className="text-center text-gray-500">No news available</p> <p className="text-center text-gray-500">No news available</p>
) : ( ) : (
news.map((item) => ( news.map((item) => (
<div <div
key={item.id} key={item.id}
className="p-2 hover:bg-gray-50/50 rounded-lg transition-colors cursor-pointer border border-gray-100 shadow-sm" className="p-4 hover:bg-gray-50/50 rounded-lg transition-colors cursor-pointer border border-gray-100 shadow-sm"
onClick={() => window.open(item.url, '_blank')} onClick={() => window.open(item.url, '_blank')}
> >
<div className="flex items-center justify-between mb-1"> <div className="flex items-center justify-between mb-2">
<span className="text-xs text-gray-500">{formatDate(item.date)}</span> <span className="text-xs text-gray-500">{formatDate(item.date)}</span>
{item.category && ( {item.category && (
<span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600"> <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600">
@ -117,7 +117,7 @@ export function News() {
</span> </span>
)} )}
</div> </div>
<h3 className="text-sm font-medium text-gray-800 mb-1 line-clamp-2" title={item.title}> <h3 className="text-sm font-medium text-gray-800 mb-2 line-clamp-2" title={item.title}>
{item.title} {item.title}
</h3> </h3>
{item.description && ( {item.description && (