Fix public LDB Styling

src/lib/ldb/public-ldb.svelte

@@ -155,7 +155,7 @@
   {#if dataAge}
     <p id="timestamp">Updated: {dataAge.toLocaleTimeString()}</p>
     {#if services.length}
-      <table>
+      <table class="ldbTable">
         <tr>
           <th class="from">From</th>
           <th class="to">To</th>
@@ -215,7 +215,7 @@
       <br>
       <img class="transport-mode" src="/images/transport-modes/bus.svg" alt="Bus services"><br>
       <span class="table-head-text">Bus Services</span>
-      <table>
+      <table class="ldbTable">
         <tr>
           <th class="from">From</th>
           <th class="to">To</th>
@@ -252,7 +252,7 @@
       <br>
       <img class="transport-mode" src="/images/transport-modes/ferry.svg" alt="Bus services"><br>
       <span class="table-head-text">Ferry Services</span>
-      <table>
+      <table class="ldbTable">
         <tr>
           <th class="from">From</th>
           <th class="to">To</th>
@@ -289,6 +289,7 @@
 
 {#if serviceDetail}
   <OverlayIsland>
+    <div id="detailBox">
       <h6>Service Detail</h6>
       <button type="button" id="closeService" on:click={closeService}>X</button>
       <table id="detailTable">
@@ -329,7 +330,7 @@
               </tr>
             {/each}
           {:else}
-          <tr>
+            <tr class="detailRow">
               <td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.locationName}</td>
               <td>{serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.st}</td>
               <td class="time {parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).changed}">{parseTime(serviceDetail.subsequentCallingPoints.callingPointList.callingPoint.et).data}</td>
@@ -337,6 +338,7 @@
           {/if}
         {/if}
       </table>
+    </div>
   </OverlayIsland>
 {/if}
 
@@ -346,10 +348,12 @@
     text-align: left;
     font-size: 14px;
   }
-  table {
+  .ldbTable {
     width: 100%;
-    max-width: 800px;
+    min-width: 300px;
     margin: auto;
+    padding-right: 2px;
+    padding-left: 0px;
     color: white;
     font-size: 13px;
   }
@@ -368,7 +372,7 @@
     font-size: 14px;
   }
 @media (min-width: 800px) {
-    table {font-size: 15px;}
+    table {font-size: 15px; max-width: 850px;}
     .service-detail {font-size: 14px;}
     .transport-mode {width: 50px;}
     #timestamp {font-size: 16px;}
@@ -418,6 +422,9 @@
         color: var(--main-alert-color);
     }
 }
+#detailBox {
+  width: 100%;
+}
 h6 {
   position: absolute;
   top: -25px;
@@ -439,6 +446,8 @@ h6 {
 }
 #detailTable {
   margin-top: 40px;
+  color: white;
+  font-size: 15px;
 }
 .thisStop {
   color: yellow;

src/routes/more/data/+page.svelte

@@ -35,8 +35,9 @@
  
 <Header {title} />
 
-<p>OwlBoard stored as little data about you as possible to offer the service.</p>
-<p>Besides your randomly generated UUID which is used to authorise your staff access we store the following data:</p>
+<p>OwlBoard stores as little data about you as possible to offer the service.</p>
+<p>Your randomly generated UUID is not displayed, this is stored in your browser and on the OwlBoard server.</p>
+<p>The data below is the entirity of the data we hold about you and constitutes a response to a `Subject Access Request` under GDPR legislation.</p>
 <br><br>
 
 {#if isLoading}