From 87fe4cc451894cb464e1322f8a1f3f867b9df8b7 Mon Sep 17 00:00:00 2001
From: Jen Jones Arnesen <jennifer@dhis2.org>
Date: Thu, 14 Sep 2023 11:10:03 +0200
Subject: [PATCH] fix: force table cell content to wrap to prevent overly wide
 modal (DHIS2-5920) (#2961)

Fixes: https://dhis2.atlassian.net/browse/DHIS2-5920

* Adding a max-width to the event popup results in table cell content wrapping when needed.
* Event popup styles migrated from maps-gl. Styles are still in maps-gl as well so as not to break 2.38 and 2.39.
* Removed unused styles in Popup.css
---
 src/components/map/layers/EventPopup.js       |  3 ++-
 .../map/layers/styles/EventPopup.module.css   | 20 +++++++++++++++++++
 src/components/map/styles/Popup.css           |  8 ++------
 3 files changed, 24 insertions(+), 7 deletions(-)
 create mode 100644 src/components/map/layers/styles/EventPopup.module.css

diff --git a/src/components/map/layers/EventPopup.js b/src/components/map/layers/EventPopup.js
index c74069b33..1e48cf6d6 100644
--- a/src/components/map/layers/EventPopup.js
+++ b/src/components/map/layers/EventPopup.js
@@ -5,6 +5,7 @@ import React, { useEffect } from 'react'
 import { EVENT_ID_FIELD } from '../../../util/geojson.js'
 import { formatTime, formatCoordinate } from '../../../util/helpers.js'
 import Popup from '../Popup.js'
+import classes from './styles/EventPopup.module.css'
 
 // Returns true if value is not undefined or null;
 const hasValue = (value) => value !== undefined || value !== null
@@ -87,7 +88,7 @@ const EventPopup = ({
         <Popup
             coordinates={coordinates}
             onClose={onClose}
-            className="dhis2-map-popup-event"
+            className={classes.eventPopup}
         >
             {error && <span>{i18n.t('Could not retrieve event data')}</span>}
             {!error && (
diff --git a/src/components/map/layers/styles/EventPopup.module.css b/src/components/map/layers/styles/EventPopup.module.css
new file mode 100644
index 000000000..2b0976f80
--- /dev/null
+++ b/src/components/map/layers/styles/EventPopup.module.css
@@ -0,0 +1,20 @@
+.eventPopup {
+    max-height: 300px;
+    overflow: auto;
+    line-height: 14px;
+    max-width: 400px;
+}
+
+.eventPopup th, .eventPopup td {
+    text-align: left;
+    vertical-align: top;
+}
+
+.eventPopup tr th {
+    font-weight: 500;
+    padding-right: var(--spacers-dp4);
+}
+
+.eventPopup tr td {
+    min-width: 120px;
+}
diff --git a/src/components/map/styles/Popup.css b/src/components/map/styles/Popup.css
index 854912430..d2e1ee13f 100644
--- a/src/components/map/styles/Popup.css
+++ b/src/components/map/styles/Popup.css
@@ -7,10 +7,6 @@
     min-width: 150px;
 }
 
-.dhis2-map-popup-event {
-    overflow-x: auto;
-}
-
-.dhis2-map-popup-event th {
-    text-align: left;
+.maplibregl-popup-close-button:focus {
+    outline: none;
 }