From 495706d7a9fab6fb84f9d663e2cb3b49467fac61 Mon Sep 17 00:00:00 2001
From: alma <alma@governance-labs.org>
Date: Sun, 4 May 2025 21:16:54 +0200
Subject: [PATCH] observatory

---
 components/observatory/observatory-view.tsx | 65 +++++++++++----------
 1 file changed, 33 insertions(+), 32 deletions(-)

diff --git a/components/observatory/observatory-view.tsx b/components/observatory/observatory-view.tsx
index 066c33b5..2e7006b3 100644
--- a/components/observatory/observatory-view.tsx
+++ b/components/observatory/observatory-view.tsx
@@ -213,13 +213,13 @@ export function ObservatoryView() {
   const countriesMap = extractCountries(news);
 
   return (
-    <div className="w-full h-screen bg-[#f5f4ef]">
+    <div className="w-full h-screen bg-[#f5f4ef] flex flex-col">
       {/* Main Content */}
-      <div className="grid grid-cols-2 gap-6 h-screen p-6">
+      <div className="grid grid-cols-2 gap-6 p-6 flex-1 overflow-hidden">
         {/* News Feed Section */}
-        <div>
-          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col">
-            <div className="px-4 py-3 border-b border-gray-100">
+        <div className="h-full overflow-hidden">
+          <div className="bg-white rounded-lg shadow-md h-full flex flex-col">
+            <div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
               <div className="flex items-center justify-between">
                 <h2 className="text-lg font-medium">
                   Latest News
@@ -264,47 +264,48 @@ export function ObservatoryView() {
                 </div>
               </div>
             </div>
-            <div className="flex-grow overflow-y-auto">
+            <div className="flex-1 overflow-y-auto">
               {filteredNews.length === 0 ? (
                 <div className="flex flex-col items-center justify-center h-full text-gray-500">
                   <Globe className="h-12 w-12 mb-2 text-gray-300" />
                   <p>{selectedCountry ? `No news found for ${selectedCountry}` : 'No news found'}</p>
                 </div>
               ) : (
-                <div>
+                <ul className="divide-y divide-gray-100">
                   {filteredNews.map((item) => (
-                    <a 
-                      key={item.id} 
-                      href={item.url} 
-                      target="_blank" 
-                      rel="noopener noreferrer"
-                      className="block border-b border-gray-100 hover:bg-gray-50 transition-colors"
-                    >
-                      <div className="p-4">
-                        <div className="flex justify-between items-start mb-1">
-                          <h3 className="font-medium text-gray-900 flex-grow">{item.title}</h3>
-                          <span className="text-xs text-gray-500 whitespace-nowrap ml-2">{item.displayDate}</span>
+                    <li key={item.id}>
+                      <a 
+                        href={item.url} 
+                        target="_blank" 
+                        rel="noopener noreferrer"
+                        className="block hover:bg-gray-50 transition-colors"
+                      >
+                        <div className="p-4">
+                          <div className="flex justify-between items-start mb-1">
+                            <h3 className="font-medium text-gray-900 flex-grow">{item.title}</h3>
+                            <span className="text-xs text-gray-500 whitespace-nowrap ml-2">{item.displayDate}</span>
+                          </div>
+                          
+                          <div className="flex justify-between items-center mb-1">
+                            <span className="text-xs font-medium text-gray-500">{item.source}</span>
+                            {item.category && <span className="text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{item.category}</span>}
+                          </div>
+                          
+                          <p className="text-sm text-gray-600 mt-1 line-clamp-2">{item.description}</p>
                         </div>
-                        
-                        <div className="flex justify-between items-center mb-1">
-                          <span className="text-xs font-medium text-gray-500">{item.source}</span>
-                          {item.category && <span className="text-xs bg-gray-100 text-gray-600 rounded-full px-2 py-0.5">{item.category}</span>}
-                        </div>
-                        
-                        <p className="text-sm text-gray-600 mt-1 line-clamp-2">{item.description}</p>
-                      </div>
-                    </a>
+                      </a>
+                    </li>
                   ))}
-                </div>
+                </ul>
               )}
             </div>
           </div>
         </div>
 
         {/* Map Section */}
-        <div>
-          <div className="bg-white rounded-lg shadow-md overflow-hidden h-full flex flex-col">
-            <div className="px-4 py-3 border-b border-gray-100">
+        <div className="h-full overflow-hidden">
+          <div className="bg-white rounded-lg shadow-md h-full flex flex-col">
+            <div className="px-4 py-3 border-b border-gray-100 flex-shrink-0">
               <div className="flex justify-between items-center">
                 <h2 className="text-lg font-medium">
                   World Map
@@ -336,7 +337,7 @@ export function ObservatoryView() {
                 </div>
               </div>
             </div>
-            <div className="flex-grow relative overflow-hidden">
+            <div className="flex-1 relative">
               {isBrowser && (
                 <ObservatoryMap
                   countries={Object.entries(countriesMap).map(([name, items]) => ({