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 7fcba67faf22972cad2b1b7e88fec42aca9287df..637159befb611b7e42b8cb5ca3b35a846b0d4cff 100644 (file)
--- 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 bbf2bf59a75af7e0da786d8c96a8cb9e30bdead5..bb72e14fd8800abccfec4cfbcaec181133b6525d 100644 (file)
--- 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;