From: Sarah Hoffmann <lonvia@denofr.de>
Date: Tue, 2 Mar 2021 12:52:47 +0000 (+0100)
Subject: make details information table responsive (#98)
X-Git-Url: https://git.openstreetmap.org/nominatim-ui.git/commitdiff_plain/eacd4882e8ba181eb4b02c8af729e041c60ec534

make details information table responsive (#98)

Restricts size of table when long are added. Also allow
arbitrary word wrap so that overly long values do not
require scrolling.

Fixes #97.
---

diff --git a/src/components/DetailsInfoRowList.svelte b/src/components/DetailsInfoRowList.svelte
index 7fcba67..637159b 100644
--- a/src/components/DetailsInfoRowList.svelte
+++ b/src/components/DetailsInfoRowList.svelte
@@ -3,8 +3,9 @@
 </script>
 
 <style>
-  .name{
+  .name {
     font-weight: bold;
+    overflow-wrap: anywhere;
   }
 </style>
 
diff --git a/src/pages/DetailsPage.svelte b/src/pages/DetailsPage.svelte
index bbf2bf5..bb72e14 100644
--- a/src/pages/DetailsPage.svelte
+++ b/src/pages/DetailsPage.svelte
@@ -80,7 +80,7 @@
     </div>
     <div class="row">
       <div class="col-md-6">
-        <table id="locationdetails" class="table table-striped">
+        <table id="locationdetails" class="table table-striped table-responsive">
           <tbody>
             <InfoRow title="Name"><InfoRowList items={aPlace.names} /></InfoRow>
             <InfoRow title="Type">{aPlace.category}:{aPlace.type}</InfoRow>
@@ -241,9 +241,6 @@
     padding-left: 0 !important;
   }
 
-  .table {
-    width: 100%;
-  }
   #map-wrapper {
     width:100%;
     min-height: auto;