refactor(Context.tsx): improve styling and readability of occurrence …

…context display by using flexbox and adding background color and shadows

feat(Context.tsx): add horizontal scrolling to occurrence context display to improve usability when displaying large objects

components/occurrence/Context.tsx

@@ -12,21 +12,22 @@ async function Context({ occurrenceId }: ContextProps) {
   }
 
   return (
-    <div className="px-4 text-white sm:px-6 lg:px-8">
-      <div className="mt-6 border-t border-white/10">
-        {isObjectWithKeys(occurrence.context) && (
-          <dl className="divide-y divide-white/10">
-            {flattenObject(occurrence.context).map((item: KeyValuePair) => (
-              <div className="px-4 py-6 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0" key={item.key}>
-                <dt className="text-sm font-medium leading-6 text-white">{item.key}</dt>
-                <dd className="mt-1 text-sm leading-6 text-gray-400 sm:col-span-2 sm:mt-0">
-                  {JSON.stringify(item.value)}
-                </dd>
+    <div className="overflow-x-auto rounded bg-gray-800 px-4 py-6 text-gray-200 shadow-lg sm:px-6 lg:px-8">
+      {isObjectWithKeys(occurrence.context) && (
+        <div className="space-y-4">
+          {flattenObject(occurrence.context).map((item: KeyValuePair, index) => (
+            <div
+              className="flex items-start space-x-2 rounded border border-gray-700 bg-gradient-to-r from-gray-700 to-gray-800 p-2 shadow-sm"
+              key={item.key}
+            >
+              <div className="flex-shrink-0 text-sm font-semibold text-indigo-200">{item.key}:</div>
+              <div className="flex-grow break-all rounded px-2 font-mono text-sm text-gray-300">
+                {JSON.stringify(item.value)}
               </div>
-            ))}
-          </dl>
-        )}
-      </div>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 }