From 72f8fd971dfae775e2416ee7b74cb04e0e52700a Mon Sep 17 00:00:00 2001
From: Tobias <t@tobiasjordans.de>
Date: Wed, 22 Dec 2021 14:47:22 +0100
Subject: [PATCH 1/3] CSS: Fix cut of text in table of popup content

Whenever the key or value is too long, the table was pushed being wider than the given container. And the overflow rules cut off the content of the table.

Fixes
- Remove overflow rules (reset to defaults, which is `auto`), which makes a scroll bar show up if content is too wide
- Let long text break in lines instead of pushing the table (which in turn prevents the scroll bar from showing up)
---
 umap/static/umap/map.css | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)

diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 45e1cd2a..4e71d6da 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -1283,8 +1283,6 @@ a.add-datalayer:hover,
 .umap-popup-content {
     max-height: 500px;
     flex-grow: 1;
-    overflow-y: auto;
-    overflow-x: hidden;
     margin-bottom: 4px;
     display: flex;
     flex-direction: column;
@@ -1292,6 +1290,10 @@ a.add-datalayer:hover,
 .umap-popup-content iframe {
     min-width: 310px;
 }
+.umap-popup-content th,
+.umap-popup-content td {
+    word-break: break-word;
+}
 .umap-popup-container {
     flex-grow: 1;
     padding: 0 10px;

From b3ad642a068b9da1a220e05c439c8b27ad65d1ed Mon Sep 17 00:00:00 2001
From: Tobias <t@tobiasjordans.de>
Date: Tue, 28 Dec 2021 21:29:31 +0100
Subject: [PATCH 2/3] CSS: Fix cut of text popup content

The overflow that was removed in 72f8fd971dfae775e2416ee7b74cb04e0e52700a did cut off long URLs and such which where now visible overflowing the popup content. However, we do want the visible but using `break-word`.
---
 umap/static/umap/map.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index 4e71d6da..c8a43ce1 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -1297,6 +1297,7 @@ a.add-datalayer:hover,
 .umap-popup-container {
     flex-grow: 1;
     padding: 0 10px;
+    word-break: break-word;
 }
 .leaflet-popup-content h3 {
     margin-bottom: 0;

From 00890aabde18cd85a87b535324d6d85eb7fdb0f5 Mon Sep 17 00:00:00 2001
From: Tobias <t@tobiasjordans.de>
Date: Wed, 29 Dec 2021 14:17:22 +0100
Subject: [PATCH 3/3] CSS: Fix cut of text in iframes of popup content

The overflow hidden removed in 72f8fd971dfae775e2416ee7b74cb04e0e52700a did cut of iframes and their content. However, it did introduce a scrollbar when the iframe is too big. Which is fixed here by adding a max-width of 100%.

There was a max-width but one with fixed pixel values before, which was removed in https://github.com/umap-project/umap/commit/345283782c45e3f565132f1ad0c2fa5c4b7d4043#diff-5470058378896897263b7a99e4226772660e09d5e9e51b530fffc6075b8e07bfL1299.

The stylesheet-style's max-width will overwrite any width-specification given via the width-attribute on the iframe as well as width-conditions set as inline-styles. However, adding a inline max-width-style will overwrite the css-file specification due to higher css specificity.
---
 umap/static/umap/map.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/umap/static/umap/map.css b/umap/static/umap/map.css
index c8a43ce1..a9c0a746 100644
--- a/umap/static/umap/map.css
+++ b/umap/static/umap/map.css
@@ -1289,6 +1289,7 @@ a.add-datalayer:hover,
 }
 .umap-popup-content iframe {
     min-width: 310px;
+    max-width: 100%;
 }
 .umap-popup-content th,
 .umap-popup-content td {