From 43ec8064596d60b434d83e915dfb6dd2ac892b86 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Tue, 15 Apr 2025 14:48:35 +0200
Subject: [PATCH] news design correction padding 13

---
 components/news.tsx | 62 ++++++++++++++++++++++++---------------------
 1 file changed, 33 insertions(+), 29 deletions(-)

diff --git a/components/news.tsx b/components/news.tsx
index caecf66..69a73ca 100644
--- a/components/news.tsx
+++ b/components/news.tsx
@@ -68,13 +68,13 @@ export function News() {
 
   if (status === 'loading' || loading) {
     return (
-      <Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-[352px]">
-        <CardHeader className="flex flex-row items-center justify-between py-2 px-4 border-b border-gray-100">
+      <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg">
+        <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
           <CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
         </CardHeader>
-        <CardContent className="p-2">
-          <div className="flex items-center justify-center h-[308px]">
-            <RefreshCw className="h-5 w-5 animate-spin text-gray-400" />
+        <CardContent className="p-3">
+          <div className="flex items-center justify-center py-6">
+            <RefreshCw className="h-4 w-4 animate-spin text-gray-400" />
           </div>
         </CardContent>
       </Card>
@@ -82,49 +82,53 @@ export function News() {
   }
 
   return (
-    <Card className="bg-white/95 backdrop-blur-sm border-0 shadow-lg h-[352px]">
-      <CardHeader className="flex flex-row items-center justify-between py-2 px-4 border-b border-gray-100">
+    <Card className="transition-transform duration-500 ease-in-out transform hover:scale-105 bg-white/95 backdrop-blur-sm border-0 shadow-lg">
+      <CardHeader className="flex flex-row items-center justify-between pb-2 border-b border-gray-100">
         <CardTitle className="text-lg font-semibold text-gray-800">News</CardTitle>
         <Button
           variant="ghost"
           size="icon"
           onClick={() => fetchNews(true)}
           disabled={refreshing}
-          className={`${refreshing ? 'animate-spin' : ''} text-gray-600 hover:text-gray-900`}
+          className="h-7 w-7 p-0 hover:bg-gray-100/50 rounded-full"
         >
-          <RefreshCw className="h-4 w-4" />
+          <RefreshCw className="h-3.5 w-3.5 text-gray-600" />
         </Button>
       </CardHeader>
-      <CardContent className="p-2">
+      <CardContent className="p-3">
         {error ? (
-          <p className="text-center text-red-500">{error}</p>
+          <div className="text-xs text-red-500 text-center py-3">{error}</div>
         ) : (
-          <div className="space-y-2 h-[308px] overflow-y-auto scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
+          <div className="space-y-2 overflow-y-auto pr-1 scrollbar-thin scrollbar-thumb-gray-200 scrollbar-track-transparent">
             {news.length === 0 ? (
-              <p className="text-center text-gray-500">No news available</p>
+              <div className="text-xs text-gray-500 text-center py-6">No news available</div>
             ) : (
               news.map((item) => (
                 <div
                   key={item.id}
-                  className="p-3 bg-gray-50/50 hover:bg-gray-100/50 rounded-lg transition-colors cursor-pointer"
+                  className="p-2 rounded-lg bg-white shadow-sm hover:shadow-md transition-all duration-200 border border-gray-100"
                   onClick={() => window.open(item.url, '_blank')}
                 >
-                  <div className="flex items-center justify-between mb-2">
-                    <span className="text-xs text-gray-500">{formatDate(item.date)}</span>
-                    {item.category && (
-                      <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600">
-                        {item.category}
-                      </span>
-                    )}
+                  <div className="flex gap-2">
+                    <div className="flex-1 min-w-0 space-y-1">
+                      <h3 className="text-sm font-medium text-gray-800 line-clamp-2" title={item.title}>
+                        {item.title}
+                      </h3>
+                      <div className="flex items-center justify-between">
+                        <span className="text-xs text-gray-500">{formatDate(item.date)}</span>
+                        {item.category && (
+                          <span className="text-xs px-2 py-0.5 rounded-full bg-blue-50 text-blue-600">
+                            {item.category}
+                          </span>
+                        )}
+                      </div>
+                      {item.description && (
+                        <p className="text-xs text-gray-500 line-clamp-2" title={item.description}>
+                          {item.description}
+                        </p>
+                      )}
+                    </div>
                   </div>
-                  <h3 className="text-sm font-medium text-gray-800 mb-2 line-clamp-2" title={item.title}>
-                    {item.title}
-                  </h3>
-                  {item.description && (
-                    <p className="text-xs text-gray-500 line-clamp-2" title={item.description}>
-                      {item.description}
-                    </p>
-                  )}
                 </div>
               ))
             )}