From 0c6623bf06d2ebbf7353592fd11e6399db2de7a5 Mon Sep 17 00:00:00 2001
From: Henk <henk@spaaij.net>
Date: Mon, 26 Aug 2024 14:40:44 -0700
Subject: [PATCH] Dashboard layout improvements.

---
 bindings/hiveoview/src/views/base.gohtml      |   7 -
 .../dashboard/RenderDashboardPage.gohtml      |  64 +++++++--
 .../directory/RenderConfirmDeleteTD.gohtml    |  27 ++--
 .../views/history/RenderHistoryPage.gohtml    |  97 ++++++-------
 .../hiveoview/src/views/login/login.gohtml    |   2 +-
 .../views/thing/RenderActionRequest.gohtml    |  83 ++++++-----
 .../src/views/thing/RenderEditProperty.gohtml |  66 +++++----
 .../src/views/thing/RenderThingDetails.go     |   5 +-
 .../src/views/thing/RenderThingDetails.gohtml |   6 +-
 .../src/views/thing/eventList.gohtml          |   3 +-
 .../src/views/tile/RenderEditTile.gohtml      |  47 +++---
 .../src/views/tile/RenderTile.gohtml          |  41 ++----
 .../src/views/tile/widgets/TextCard.gohtml    |  28 ++--
 bindings/hiveoview/src/webcomp/h-classes.css  |  70 ++++-----
 bindings/hiveoview/src/webcomp/h-modal.js     |  90 +++++++-----
 bindings/hiveoview/src/webcomp/h-theme.css    | 134 +++++++++++++++++-
 bindings/hiveoview/src/webcomp/h-timechart.js |  15 +-
 bindings/hiveoview/src/webcomp/h-toast.js     |   2 +-
 bindings/hiveoview/test/components.html       |   4 +-
 bindings/hiveoview/test/test-dialog1.html.sav |   2 +-
 20 files changed, 479 insertions(+), 314 deletions(-)

diff --git a/bindings/hiveoview/src/views/base.gohtml b/bindings/hiveoview/src/views/base.gohtml
index 7689abfc..57b1af5b 100644
--- a/bindings/hiveoview/src/views/base.gohtml
+++ b/bindings/hiveoview/src/views/base.gohtml
@@ -87,11 +87,4 @@
         height: 100%;
     }
 
-    /*!* show a pointer for checkboxes and their labels*/
-    /*credits: https://stackoverflow.com/questions/41614446/change-pointer-for-checkbox-html*/
-    /**!*/
-    /*input[type="checkbox"], input[type="checkbox"] + label {*/
-    /*    cursor: pointer;*/
-    /*}*/
-
 </style>
\ No newline at end of file
diff --git a/bindings/hiveoview/src/views/dashboard/RenderDashboardPage.gohtml b/bindings/hiveoview/src/views/dashboard/RenderDashboardPage.gohtml
index 8eb3acb8..46ddc560 100644
--- a/bindings/hiveoview/src/views/dashboard/RenderDashboardPage.gohtml
+++ b/bindings/hiveoview/src/views/dashboard/RenderDashboardPage.gohtml
@@ -14,7 +14,7 @@
 
 
 {{/*Show the dashboard. Reload when tiles are deleted*/}}
-<main class="dashboard container-fluid"
+<main class="dashboard"
       hx-get=""
       hx-trigger="sse:{{.DashboardUpdatedEvent}}"
       hx-swap="outerHTML"
@@ -45,7 +45,8 @@
              hx-swap="none"
         >
             {{range $k,$v := .Dashboard.Tiles }}
-            <div class="grid-stack-item" gs-id="{{$k}}" gs-min-h="4"
+            <div class="grid-stack-item "gs-id="{{$k}}"
+                 gs-min-h="4"
                  gs-size-to-content="false">
                 <div class="grid-stack-item-content" style="overflow:unset">
                    {{template "RenderTile.gohtml" $.GetTileTemplateData $k}}
@@ -67,6 +68,11 @@
         // debugger;
         var options = { // put in gridstack options here
             animate:true,
+            draggable: {
+                // handle: ".drag-target",
+                cancel: ".no-drag"
+            },
+            nomove:true,
             float: true,        // allow cells to move anywhere
             cellHeight: 30,     // fix the row height to avoid scaling content
             staticGrid:false,   // allow resize in edit mode
@@ -102,15 +108,17 @@
 
 
 <style>
+
     .dashboard {
         width: 100%;
         height: 100%;
         overflow: auto;
         display: flex;
         flex-direction: column;
+        padding-left: var(--pico-spacing);
+        padding-right: var(--pico-spacing);
+        /*background-color: var(--pico-background-color);*/
     }
-
-
     .grid-stack-item {
     }
     .grid-stack-item-content {
@@ -120,16 +128,54 @@
 
         display:flex;
         flex-direction:column;
-        background-color: var(--pico-form-element-background-color);
-        border-color: var(--pico-background-color);
-        border: var(--pico-background-color) 1px solid;
-        border-radius: 5px;
-        box-shadow: var(--pico-box-shadow);
+        border-radius: var(--pico-card-border-radius);
     }
+    /*fix: resize handle should not appear in popup dialog*/
     .ui-resizable-handle {
         z-index:6 !important;
     }
 
+    /*Dashboard tile styles */
+    .tile-panel {
+        display:flex;
+        flex-direction:column;
+        height:100%;
+        border: var(--pico-card-border);
+        border-radius: var(--pico-card-border-radius);
+        padding:0;
+        margin:0;
+        /*z-index:1;*/
+    }
+    /* remove section header bunch of padding/margin offsets*/
+    .tile-header {
+        display: flex;
+        flex-direction: row;
+        font-size: 1.1em;
+        min-height: 20px;
+        /*header top corner must match the panel radius*/
+        border-top-left-radius: 8px;
+        border-top-right-radius: 8px;
+        padding: 6px; /* reduce padding*/
+        align-items: center;
+        background-color: var(--pico-header-background-color);
+        border-bottom: var(--pico-card-border);
+    }
+    .tile-content{
+        flex-grow:1;
+        background-color: var(--pico-card-background-color);
+        border-bottom-left-radius: 8px;
+        border-bottom-right-radius: 8px;
+    }
+    .tile-content table {
+        margin: 0;
+        height: 100%;
+    }
+    .tile-content tr:last-child td:first-child {
+        border-bottom-left-radius: var(--pico-card-border-radius);
+    }
+    .tile-content tr:last-child td:last-child {
+        border-bottom-right-radius: var(--pico-card-border-radius);
+    }
 </style>
 <!--end of dashboard-->
 {{end}}
diff --git a/bindings/hiveoview/src/views/directory/RenderConfirmDeleteTD.gohtml b/bindings/hiveoview/src/views/directory/RenderConfirmDeleteTD.gohtml
index eb7d088a..88b186c1 100644
--- a/bindings/hiveoview/src/views/directory/RenderConfirmDeleteTD.gohtml
+++ b/bindings/hiveoview/src/views/directory/RenderConfirmDeleteTD.gohtml
@@ -20,22 +20,23 @@
 				<input id="last-updated" readonly value="{{.TD.GetAge}} ago"/>
 			</fieldset>
 		</form>
+
+		<footer class="h-row">
+        {{- /*close-modal is handled by h-modal component*/ -}}
+			<button id="cancelBtn"
+			        onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
+			        class="secondary">Cancel
+			</button>
+			<button type="submit"
+			        hx-delete="{{.SubmitDeleteTDPath}}"
+			        hx-swap="none"
+			        hx-on::after-request="onSubmitCompleted(event, this)"
+			        style="margin-bottom: 0">Submit
+			</button>
+		</footer>
 	</article>
 
 
-	<footer class="h-row" style="width:100%">
-    {{- /*close-modal is handled by h-modal component*/ -}}
-		<button id="cancelBtn"
-		        onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
-		        class="secondary">Cancel
-		</button>
-		<button type="submit"
-		        hx-delete="{{.SubmitDeleteTDPath}}"
-		        hx-swap="none"
-		        hx-on::after-request="onSubmitCompleted(event, this)"
-		        style="margin-bottom: 0">Submit
-		</button>
-	</footer>
 </h-modal>
 
 
diff --git a/bindings/hiveoview/src/views/history/RenderHistoryPage.gohtml b/bindings/hiveoview/src/views/history/RenderHistoryPage.gohtml
index 4c5aeae1..95a4029c 100644
--- a/bindings/hiveoview/src/views/history/RenderHistoryPage.gohtml
+++ b/bindings/hiveoview/src/views/history/RenderHistoryPage.gohtml
@@ -14,66 +14,63 @@
 
 {{else}}
 
-<main class="container-fluid" style="height:100%">
 
-		<article  style="width:100%; height: 100%"
-				class="h-panel container-fluid"
-		>
-       {{/*	History header section with Thing title, date and nr of history values in the last 24 hours*/}}
-				<ul class="h-grid-table history-header" style="grid-column-gap: 10px;  align-items: baseline">
-						<label for="histDeviceName">History of:</label>
-						<input id="histDeviceName" readonly
-						       title="{{.ThingID}}/{{.Key}}"
-						       style="margin: 0; text-overflow: ellipsis; background:none;"
-						       value="{{.Title}}"/>
+	<article style="height: 100%">
 
-						<label for="histDate">Date:</label>
-								<div class="h-row">
-										<input id="histDate" readonly
-										       style="margin: 0; text-overflow: ellipsis; background:none; width:auto"
-										       value="{{.Timestamp.Format "Mon, 02 Jan 2006"}}"/>
+     {{/*	History header section with Thing title, date and nr of history values in the last 24 hours*/}}
+			<ul class="h-grid-table history-header" style="grid-column-gap: 10px;  align-items: baseline">
+					<label for="histDeviceName">History of:</label>
+					<input id="histDeviceName" readonly
+					       title="{{.ThingID}}/{{.Key}}"
+					       style="margin: 0; text-overflow: ellipsis; background:none;"
+					       value="{{.Title}}"/>
 
-										<a href="{{.PrevDayPath}}"
-											   hx-get="{{.PrevDayPath}}"
-											   hx-target="#historyPage"
-											   hx-swap="innerHTML"
-											>
-												Previous Day
-										</a>
-									{{if eq .CompareToday -1}}
-										<a href="{{.NextDayPath}}"
-											   hx-get="{{.NextDayPath}}"
-											   hx-target="#historyPage"
-											   hx-swap="innerHTML"
+					<label for="histDate">Date:</label>
+							<div class="h-row">
+									<input id="histDate" readonly
+									       style="margin: 0; text-overflow: ellipsis; background:none; width:auto"
+									       value="{{.Timestamp.Format "Mon, 02 Jan 2006"}}"/>
+
+									<a href="{{.PrevDayPath}}"
+										   hx-get="{{.PrevDayPath}}"
+										   hx-target="#historyPage"
+										   hx-swap="innerHTML"
 										>
-												Next Day
-										</a>
-									{{end}}
-									{{if ne .CompareToday 0}}
-									<a href="{{.TodayPath}}"
-										   hx-get="{{.TodayPath}}"
+											Previous Day
+									</a>
+								{{if eq .CompareToday -1}}
+									<a href="{{.NextDayPath}}"
+										   hx-get="{{.NextDayPath}}"
 										   hx-target="#historyPage"
 										   hx-swap="innerHTML"
 									>
-										Today
+											Next Day
 									</a>
-									{{end}}
-								</div>
+								{{end}}
+								{{if ne .CompareToday 0}}
+								<a href="{{.TodayPath}}"
+									   hx-get="{{.TodayPath}}"
+									   hx-target="#historyPage"
+									   hx-swap="innerHTML"
+								>
+									Today
+								</a>
+								{{end}}
+							</div>
 
-						<label for="nrItems">Nr of entries:</label>
-						<input id="nrItems" readonly
-						       style="margin: 0; text-overflow: ellipsis; background:none;"
-						       value="{{len .Values}} in the previous 24 hours"/>
-				</ul>
+					<label for="nrItems">Nr of entries:</label>
+					<input id="nrItems" readonly
+					       style="margin: 0; text-overflow: ellipsis; background:none;"
+					       value="{{len .Values}} in the previous 24 hours"/>
+			</ul>
 
-				{{/* Show a chart besides the table */}}
-			<div class="h-row" style="align-items:start; flex-grow:1; overflow:auto">
-            {{template "historyTable.gohtml" .}}
-					<div style="height:100%; flex-grow:1">
-            {{template "historyChart.gohtml" .}}
-					</div>
+			{{/* Show a chart besides the table */}}
+		<div class="h-row" style="align-items:start; flex-grow:1; overflow:auto">
+          {{template "historyTable.gohtml" .}}
+				<div style="height:100%; flex-grow:1">
+          {{template "historyChart.gohtml" .}}
 				</div>
-		</article>
-</main>
+			</div>
+	</article>
 
 {{end}}
diff --git a/bindings/hiveoview/src/views/login/login.gohtml b/bindings/hiveoview/src/views/login/login.gohtml
index e32ce73e..2ca0bc22 100644
--- a/bindings/hiveoview/src/views/login/login.gohtml
+++ b/bindings/hiveoview/src/views/login/login.gohtml
@@ -50,7 +50,7 @@
           border: solid;
           border-width: 1px;
           border-color: var(--pico-dropdown-border-color);
-          border-radius: 10px;
+          border-radius: var(--pico-card-border-radius);
       }
 
 	</style>
diff --git a/bindings/hiveoview/src/views/thing/RenderActionRequest.gohtml b/bindings/hiveoview/src/views/thing/RenderActionRequest.gohtml
index 59ee7b66..011ac15d 100644
--- a/bindings/hiveoview/src/views/thing/RenderActionRequest.gohtml
+++ b/bindings/hiveoview/src/views/thing/RenderActionRequest.gohtml
@@ -8,61 +8,70 @@
 {{- /*gotype:github.com/hiveot/hub/bindings/hiveoview/src/views/thing.ActionRequestTemplateData*/ -}}
 
 <h-modal show showClose showCancel showSubmit>
-    <article  style="min-width: 400px">
+    <article  style="min-width: 410px;max-width:80vw">
         <header class="h-row-centered" style="height: 60px">
             <h3>{{.Action.Title}}</h3>
         </header>
 
-        <label for="actionDescription">Description</label>
-        <textarea  readonly id="actionDescription"
-                  placeholder="{{.Action.Description}}"></textarea>
+        <main>
+            <form id="action-input-form">
+                <label for="actionDescription">Action</label>
+                {{/* textarea doesnt resize so do this instead*/}}
+                <div id="actionDescription"
+                     style="color:gray;
+                     border:1px solid var(--pico-form-element-border-color);
+                     padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+                     margin-bottom: var(--pico-spacing);"
+                ><i>{{.Action.Description}}</i></div>
 
-        {{if .PrevValue}}
-            <label for="actionUpdated">Previous Action</label>
-            <input id="actionUpdated" readonly placeholder="{{.LastUpdated}} ({{.LastUpdatedAge}} ago)"/>
-            {{if .Input }}
-                <label for="prevValueInput">Previous Action Value</label>
-                <input id="prevValueInput" readonly  placeholder="{{.Input.Value}}"/>
-            {{end}}
-        {{end}}
+                {{if .PrevValue}}
+                    <label for="actionUpdated">Previous Action Time</label>
+                    <input id="actionUpdated" readonly
+                           placeholder="{{.LastUpdated}} ({{.LastUpdatedAge}} ago)"/>
+                    {{if .Input }}
+                        <label for="prevValueInput">Previous Action Value</label>
+                        <input id="prevValueInput" readonly  placeholder="{{.Input.Value}}"/>
+                    {{end}}
+                {{end}}
+
+                {{if .Input}}
+                    <label>New value</label>
+                    {{template "schemaValue.gohtml" .Input}}
+                {{end}}
+            </form>
 
-        <form id="action-input-form">
-            {{if .Input}}
-                <label>New value</label>
-                {{template "schemaValue.gohtml" .Input}}
+            {{if .Status.Progress}}
+            <div>status {{.Status.Progress}}</div>
             {{end}}
-        </form>
+        </main>
 
-        {{if .Status.Progress}}
-        <div>status {{.Status.Progress}}</div>
-        {{end}}
+        <footer>
+            {{- /*close-modal is handled by h-modal component*/ -}}
+            <button id="cancelBtn"
+                    onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
+                    class="secondary">Cancel
+            </button>
+            <button type="submit"
+                    hx-post="{{.SubmitActionRequestPath}}"
+                    hx-include="#action-input-form"
+                    hx-swap="none"
+                    hx-on::after-request="onSubmitCompleted(event, this)"
+                    >Submit
+            </button>
+        </footer>
 
     </article>
-
-    <footer class="h-row" style="width:100%">
-        {{- /*close-modal is handled by h-modal component*/ -}}
-        <button id="cancelBtn"
-                onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
-                class="secondary">Cancel
-        </button>
-        <button type="submit"
-                hx-post="{{.SubmitActionRequestPath}}"
-                hx-include="#action-input-form"
-                hx-swap="none"
-                hx-on::after-request="onSubmitCompleted(event, this)"
-                style="margin-bottom: 0">Submit
-        </button>
-    </footer>
 </h-modal>
 
 <script>
+
     // The dialog remains active until completed
     function onSubmitCompleted(ev, btn) {
         ev.stopImmediatePropagation()
         let details = ev.detail
         if (details.successful) {
-            modal = btn.parentElement.parentElement
-            modal.closeModal()
+            let closeEv = new Event('close-modal',{bubbles:true})
+            btn.dispatchEvent(closeEv)
         }
     }
 </script>
\ No newline at end of file
diff --git a/bindings/hiveoview/src/views/thing/RenderEditProperty.gohtml b/bindings/hiveoview/src/views/thing/RenderEditProperty.gohtml
index 9cbe0bd2..d31e9b51 100644
--- a/bindings/hiveoview/src/views/thing/RenderEditProperty.gohtml
+++ b/bindings/hiveoview/src/views/thing/RenderEditProperty.gohtml
@@ -2,42 +2,46 @@
 {{- /*gotype:github.com/hiveot/hub/bindings/hiveoview/src/views/thing.RenderEditPropertyTemplateData*/ -}}
 
 
-<h-modal show showClose showCancel showSubmit>
+<h-modal show showClose shadow>
 	<article>
 		<header class="h-row-centered" style="height: 60px">
-			<h3>Edit Configuration</h3>
+			<h3 style="margin:0">Edit Configuration</h3>
 		</header>
-		<main>
-			<form id="edit-config-form">
 
-				<fieldset>
-					<label for="thing-id">Thing ID: </label>
-					<input id="thing-id"  readonly placeholder="{{.ThingID}}"/>
+		<form id="edit-config-form">
+
+			<label for="propertyDescription">Property</label>
+        {{/* textarea doesnt resize so do this instead*/}}
+			<div id="propertyDescription"
+			     style="color:gray;
+                     border:1px solid var(--pico-form-element-border-color);
+                     padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
+                     margin-bottom: var(--pico-spacing);"
+			><i>{{.DataSchema.Description}}</i></div>
+
+				<label for="config-input">{{.DataSchema.Title}}</label>
+
+        {{template "schemaValue.gohtml" .}}
+
+		</form>
+
+		<footer>
+        {{- /*close-modal is handled by h-modal component*/ -}}
+			<button id="cancelBtn"
+			        onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
+			        class="secondary">Cancel
+			</button>
+			<button type="submit"
+			        hx-post="{{.SubmitPropertyPath}}"
+			        hx-include="#edit-config-form"
+			        hx-swap="none"
+			        hx-on::after-request="onSubmitCompleted(event, this)"
+			        style="margin-bottom: 0">Submit
+			</button>
+		</footer>
 
-					<label for="config-input">{{.DataSchema.Title}}</label>
-
-   				{{template "schemaValue.gohtml" .}}
-
-				</fieldset>
-			</form>
-		</main>
 	</article>
 
-	<footer class="h-row" style="width:100%">
-    {{- /*close-modal is handled by h-modal component*/ -}}
-		<button id="cancelBtn"
-		        onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
-		        class="secondary">Cancel
-		</button>
-		<button type="submit"
-		        hx-post="{{.SubmitPropertyPath}}"
-		        hx-include="#edit-config-form"
-		        hx-swap="none"
-		        hx-on::after-request="onSubmitCompleted(event, this)"
-		        style="margin-bottom: 0">Submit
-		</button>
-	</footer>
-
 </h-modal>
 
 <script>
@@ -46,8 +50,8 @@
         ev.stopImmediatePropagation()
         let details = ev.detail
         if (details.successful) {
-            modal = btn.parentElement.parentElement
-            modal.closeModal()
+            let closeEv = new Event('close-modal',{bubbles:true})
+            btn.dispatchEvent(closeEv)
         }
     }
 </script>
\ No newline at end of file
diff --git a/bindings/hiveoview/src/views/thing/RenderThingDetails.go b/bindings/hiveoview/src/views/thing/RenderThingDetails.go
index a7169293..fc6709e8 100644
--- a/bindings/hiveoview/src/views/thing/RenderThingDetails.go
+++ b/bindings/hiveoview/src/views/thing/RenderThingDetails.go
@@ -21,7 +21,8 @@ import (
 const TemplateFile = "RenderThingDetails.gohtml"
 const RenderActionRequestPath = "/action/{thingID}/{key}/request"
 const RenderEditPropertyPath = "/property/{thingID}/{key}/edit"
-const RenderConfirmDeleteTDPath = "/directory/{thingID}/confirmDelete"
+const RenderConfirmDeleteTDPath = "/directory/{thingID}/confirmDeleteTD"
+const RenderRawTDPath = "/thing/{thingID}/raw"
 
 type ThingDetailsTemplateData struct {
 	Title      string
@@ -43,6 +44,7 @@ type ThingDetailsTemplateData struct {
 
 	// URLs
 	RenderConfirmDeleteTDPath string
+	RenderRawTDPath           string
 }
 
 // GetHistory returns the 24 hour history for the given key
@@ -82,6 +84,7 @@ func RenderThingDetails(w http.ResponseWriter, r *http.Request) {
 		ThingID:                   thingID,
 		Title:                     "details of thing",
 		RenderConfirmDeleteTDPath: utils.Substitute(RenderConfirmDeleteTDPath, pathParams),
+		RenderRawTDPath:           utils.Substitute(RenderRawTDPath, pathParams),
 	}
 
 	// Read the TD being displayed and its latest values
diff --git a/bindings/hiveoview/src/views/thing/RenderThingDetails.gohtml b/bindings/hiveoview/src/views/thing/RenderThingDetails.gohtml
index 95315b09..cf8b72dc 100644
--- a/bindings/hiveoview/src/views/thing/RenderThingDetails.gohtml
+++ b/bindings/hiveoview/src/views/thing/RenderThingDetails.gohtml
@@ -19,7 +19,7 @@
 		hx-get=""
 		hx-swap="innerHTML"
 		hx-target="#detailsPage"
-		class="h-panel container-fluid">
+		>
 
 	<!--===Thing Summary header===-->
 
@@ -59,8 +59,8 @@
 					      value="{{.ThingID}}"/>
 
 						<!--=== button to open the raw TD in a new tab ===-->
-						<button for="agentID" title="view raw TD document"  class="h-icon-button outline">
-								<a href="/thing/raw/{{.ThingID}}" target="_blank">
+						<button title="view raw TD document"  class="h-icon-button outline">
+								<a href="{{.RenderRawTDPath}}" target="_blank">
 								<iconify-icon icon="mdi:text-box-outline"></iconify-icon>
 								</a>
 						</button>
diff --git a/bindings/hiveoview/src/views/thing/eventList.gohtml b/bindings/hiveoview/src/views/thing/eventList.gohtml
index c4ba2423..0a43c28e 100644
--- a/bindings/hiveoview/src/views/thing/eventList.gohtml
+++ b/bindings/hiveoview/src/views/thing/eventList.gohtml
@@ -49,6 +49,8 @@
 					{{end}}
 				</a>
 			</div>
+
+			{{/*Description*/}}
 			<div class="h-show-lg">{{$v.Description}}</div>
 
       {{/*	Updated*/}}
@@ -62,7 +64,6 @@
 	    {{/*	history*/}}
 			<div class="h-show-lg" style="height:200px">
 				{{template "historyChart.gohtml" $.GetHistory $k }}
-				hist
 			</div>
 		</li>
 	{{end}}
diff --git a/bindings/hiveoview/src/views/tile/RenderEditTile.gohtml b/bindings/hiveoview/src/views/tile/RenderEditTile.gohtml
index 5b451006..7e6f4d76 100644
--- a/bindings/hiveoview/src/views/tile/RenderEditTile.gohtml
+++ b/bindings/hiveoview/src/views/tile/RenderEditTile.gohtml
@@ -2,11 +2,10 @@
 
 {{- /*gotype:github.com/hiveot/hub/bindings/hiveoview/src/views/tile.EditTileTemplateData*/ -}}
 
-<h-modal show showClose showCancel showSubmit
->
-		<article class="edit-tile">
+<h-modal show showClose shadow>
+		<article>
 				<header class="h-row-centered" style="height: 60px">
-						<h3>Edit Tile</h3>
+						<h3 style="margin:0">Edit Tile</h3>
 				</header>
 			<main>
 				<form id="edit-tile-form" style="overflow:auto">
@@ -29,7 +28,7 @@
 						</select>
 						<small>Current value: {{.GetTypeLabel .Tile.TileType}}</small>
 
-						<label for="edit-tile-sources" class="h-row">Sources:
+						<label  class="h-row">Sources:
 							<button type="button" class="outline h-icon-button"
 							        title="Add Source"
 							        hx-target="#selectSourcesDialog"
@@ -59,6 +58,7 @@
 			                <iconify-icon icon="mdi:delete"></iconify-icon>
 		                </button>
 				            <input name="sourceTitles" value="{{$v.Title}}"
+				                   style="margin:0"
 				                       title="{{$v.ThingID}}/{{$v.Key}}"/>
 		                <div class="h-row">{{$.GetValue $v.ThingID $v.Key}}</div>
 		                <div class="h-row">{{$.GetUpdated  $v.ThingID $v.Key}}</div>
@@ -69,33 +69,27 @@
 					</fieldset>
 				</form>
 			</main>
-		</article>
 
-		<footer class="h-row" style="width:100%">
-      {{- /*close-modal is handled by h-modal component*/ -}}
-		<button id="cancelBtn"
-		        onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
-		        class="secondary">Cancel
-		</button>
-		<button type="submit"
-		        hx-post="{{.SubmitEditTilePath}}"
-		        hx-include="#edit-tile-form"
-		        hx-swap="none"
-		        hx-on::after-request="onSubmitCompleted(event, this)"
-		        style="margin-bottom: 0">Submit
-		</button>
-	</footer>
+			<footer>
+	      {{- /*close-modal is handled by h-modal component*/ -}}
+			<button id="cancelBtn"
+			        onclick="this.dispatchEvent(new Event('close-modal',{bubbles:true}))"
+			        class="secondary">Cancel
+			</button>
+			<button type="submit"
+			        hx-post="{{.SubmitEditTilePath}}"
+			        hx-include="#edit-tile-form"
+			        hx-swap="none"
+			        hx-on::after-request="onSubmitCompleted(event, this)"
+			        >Submit
+			</button>
+		</footer>
+	</article>
 </h-modal>
 
 <div id="selectSourcesDialog"></div>
 
 <style>
-		.edit-tile {
-				min-width: 400px;
-				max-width:90vw;
-				max-height:90vh;
-				overflow-y: auto;
-    }
     .tile-sources-table {
         grid-template-columns:
           max-content /*delete icon*/
@@ -103,6 +97,7 @@
 	        minmax(200px, 1fr) /*Value*/
 	        minmax(100px, max-content); /*value*/
     }
+
 </style>
 
 
diff --git a/bindings/hiveoview/src/views/tile/RenderTile.gohtml b/bindings/hiveoview/src/views/tile/RenderTile.gohtml
index df81c095..6a176cec 100644
--- a/bindings/hiveoview/src/views/tile/RenderTile.gohtml
+++ b/bindings/hiveoview/src/views/tile/RenderTile.gohtml
@@ -1,32 +1,36 @@
 <!--Tile renderer-->
 
 {{- /*gotype:github.com/hiveot/hub/bindings/hiveoview/src/views/tile.RenderTileTemplateData*/ -}}
+{{/*Tile CSS is defined in RenderDashboardPage.gohtml*/}}
+
 
 {{if not .Tile.ID}}
 {{/*	hx-params="none" hides hx-vals defined in parent*/}}
 <div  hx-trigger="intersect once"
       hx-swap="outerHTML"
       hx-params="none"
-      hx-get="{{.ReRenderTilePath}}">
+      hx-get="{{.ReRenderTilePath}}"
+>
 	<p>reloading tile fragment...</p>
 	<h-loading></h-loading>
 </div>
 
 {{else}}
-<div id="{{.Tile.ID}}" class="tile-panel"
+
+<section id="{{.Tile.ID}}" class="tile-panel"
      hx-trigger="sse:{{.TileUpdatedEvent}}"
      hx-swap="outerHTML"
      hx-params="none"
      hx-get="{{.ReRenderTilePath}}"
      >
-
-	<header class="tile-header h-row">
+	<header class="tile-header drag-target"
+	>
 		<span></span>
 		<div style="cursor:move; flex-grow:1; text-align:center"
 						title="{{.Tile.ID}}">{{.Tile.Title}}</div>
     {{template "tileMenu.gohtml" .}}
 	</header>
-	<div class="tile-content">
+	<main class="tile-content no-drag">
 
     {{if eq .Tile.TileType "lineChart"}}
       {{template "LineChart.gohtml" .}}
@@ -42,30 +46,7 @@
 			{{template "TextCard.gohtml" .}}
 		{{end}}
 
-	</div>
-</div>
-
-<style>
-		.tile-panel {
-				display:flex;
-				flex-direction:column;
-				height:100%;
-		}
-    .tile-header {
-        background-color: var(--pico-background-color);
-        color: var(--pico-color);
-        font-size: 1.1em;
-        min-height: 20px;
-        padding: 6px;
-    }
-    .tile-content{
-        /*display:flex;*/
-        flex-grow:1;
-        /*overflow:auto;*/
-        /*padding:0;*/
-        /*justify-content:center;*/
-        /*align-items:center;*/
-    }
+	</main>
+</section>
 
-</style>
 {{end}}
\ No newline at end of file
diff --git a/bindings/hiveoview/src/views/tile/widgets/TextCard.gohtml b/bindings/hiveoview/src/views/tile/widgets/TextCard.gohtml
index 59e52e19..a5b0c1fb 100644
--- a/bindings/hiveoview/src/views/tile/widgets/TextCard.gohtml
+++ b/bindings/hiveoview/src/views/tile/widgets/TextCard.gohtml
@@ -3,24 +3,32 @@
 {{- /*gotype:github.com/hiveot/hub/bindings/hiveoview/src/views/tile.RenderTileTemplateData*/ -}}
 
 {{if eq (len .Tile.Sources) 1 }}
+
 		{{/* A single source is displayed as large text*/}}
     {{$s := (index $.Tile.Sources 0)}}
-		<div class="h-col-centered h-grow" style="height:100%;font-size:1.5em; justify-content:center">
+		<div class="h-col-centered h-grow"
+		     style="height:100%;font-size:1.5em; justify-content:center"
+		>
 			{{$.GetValue $s.ThingID $s.Key}}
 		</div>
+
 {{else}}
+
 		{{/* A list of sources is displayed as a table*/}}
 		<div class="h-col-centered h-grow"
-		     style="width:100%; height:100%; overflow:auto;color:gray; margin:0">
+		     style="width:100%; height:100%; overflow:auto; margin:0">
+
 		<table aria-label="GridTable" class="h-grid-table striped"
-		        style="margin:0;height:100%;grid-template-columns:1fr max-content">
+		        style="grid-template-columns:1fr max-content">
 			<tbody style="display:contents">
 			{{range .Tile.Sources}}
 				<tr style="display:contents;">
-				<td>{{.Title}}</td>
-				<td style="text-wrap:nowrap; color:gray;
-				    "
-				>{{$.GetValue .ThingID .Key}}</td>
+				<td>
+					<div>{{.Title}}</div>
+				</td>
+				<td style="text-wrap:nowrap; color:gray;">
+					<div>{{$.GetValue .ThingID .Key}}</div>
+				</td>
 				</tr>
 			{{end}}
 			</tbody>
@@ -28,9 +36,3 @@
 		</div>
 {{end}}
 
-<style>
-	.h-grid-table td{
-      border-top: 1px solid var(--pico-table-border-color);
-      border-left:1px solid var(--pico-table-border-color);
-	}
-</style>
\ No newline at end of file
diff --git a/bindings/hiveoview/src/webcomp/h-classes.css b/bindings/hiveoview/src/webcomp/h-classes.css
index ff69c234..19806d01 100644
--- a/bindings/hiveoview/src/webcomp/h-classes.css
+++ b/bindings/hiveoview/src/webcomp/h-classes.css
@@ -32,33 +32,9 @@
     background: linear-gradient(to right, var(--pico-background-color), var(--pico-color), var(--pico-background-color));
 }
 
-/* apply to a table to show using CSS grid
- */
-/*.h-grid-table {*/
-/*    display: grid;*/
-/*    border-collapse: collapse;*/
-/*    min-width: 100%;*/
-/*    border: 1px solid gray;*/
-
-/*    td {*/
-/*        overflow: hidden;*/
-/*        text-overflow: ellipsis;*/
-/*    }*/
-
-/*    thead, tbody, tr {*/
-/*        display: contents;*/
-/*    }*/
-
-/*    !*show an ellipsis in a span element that is using a flexbox parent*!*/
-
-/*    span {*/
-/*        display: block;*/
-/*        overflow: hidden;*/
-/*        white-space: nowrap;*/
-/*        text-overflow: ellipsis*/
-/*    }*/
-/*}*/
-
+/* h-grid-table is a simple table using grid layout and ul/li list items
+ * the first row is the table header.
+*/
 .h-grid-table {
     display: grid;
     padding: 0;
@@ -75,22 +51,28 @@
 
 .h-grid-table li div {
     font-weight: var(--pico-font-weight);
-    background-color: var(--pico-card-sectioning-background-color);
+    background-color: var(--pico-card-background-color);
     padding: calc(var(--pico-spacing) / 2) var(--pico-spacing);
 }
 
+.h-grid-table[striped] li:nth-child(even) div {
+    background-color: var(--pico-form-element-active-background-color);
+}
+/* table header override*/
 .h-grid-table li:first-child div {
     font-variant-caps: small-caps;
-    background-color: var(--pico-form-element-background-color);
     --pico-font-weight: 600;
-    /*border-bottom: 1px solid var(--pico-form-element-border-color);*/
     border-bottom: 1px solid var(--pico-form-element-active-border-color);
 }
 
-.h-grid-table[striped] li:nth-child(odd) div {
-    background-color: var(--pico-background-color);
+/* h-grid-table as a table instead of list. Use thead for th title*/
+.h-grid-table td {
+    background-color: var(--pico-backround-color);
+    border-bottom: 1px solid var(--pico-form-element-border-color);
+}
+.h-grid-table[striped] td:nth-child(even) div {
+    background-color: var(--pico-table-row-stripped-background-color);
 }
-
 
 .h-grow {
     flex-grow: 1;
@@ -147,11 +129,11 @@
 
 /* panel with background color and flex col*/
 .h-panel {
-    background-color: var(--pico-background-color);
-    display: flex;
-    flex-direction: column;
-    border: 1px solid var(--pico-border-color);
-    padding: var(--pico-block-spacing-horizontal) var(--pico-block-spacing-vertical);
+    /*background-color: var(--pico-background-color);*/
+    /*display: flex;*/
+    /*flex-direction: column;*/
+    /*border: 1px solid var(--pico-border-color);*/
+    /*padding: var(--pico-block-spacing-horizontal) var(--pico-block-spacing-vertical);*/
 }
 
 /* flexbox row with items centered */
@@ -210,17 +192,22 @@ ul li:hover{
     background-color: var(--pico-dropdown-hover-background-color);
 }
 
+/* modal with mask settings */
 h-modal {
     /*The opacity of the modal mask*/
-    --mask-opacity: 70%;
+    --mask-opacity: 80%;
     /*The background color of the modal mask*/
-    --mask-background: #dfe5e7;
+    --mask-background: var(--pico-background-color);
     /* the animation timing of opening and closing the modal */
     --animation-duration: 500ms;
 }
 
+/* the top level article (panel) inside a model has no bottom margin */
+h-modal > article {
+    margin:0;
+}
 /* Horizontal navigation bar
- * navbar highlights the tab with the href matching the url.
+ * h-navbar highlights the tab with the href matching the url.
  * this requires that
  */
 .h-navbar {
@@ -250,7 +237,6 @@ h-modal {
     text-transform: uppercase;
 
     transition: border .3s ease-in-out;
-    /*border-bottom: 2px solid var(--pico-form-element-border-color);*/
     border-bottom: 2px solid var(--pico-form-element-border-color);
 }
 
diff --git a/bindings/hiveoview/src/webcomp/h-modal.js b/bindings/hiveoview/src/webcomp/h-modal.js
index 00aa0501..d62a9df4 100644
--- a/bindings/hiveoview/src/webcomp/h-modal.js
+++ b/bindings/hiveoview/src/webcomp/h-modal.js
@@ -28,34 +28,38 @@
 const closeIconSvg = "M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z"
 const template = document.createElement('template')
 template.innerHTML = `
-<div class="modal">  
+<div id="h-modal" class="h-modal">  
     
-    <div id="modal-mask" class="modal-mask"></div>
-    
-    <div modalContentSel class="modal-content ">
-    
-        <button id="modal-close-button" closeIconSel title="close me"
-                class="modal-close-button"
-               >
+    <div id="h-modal-mask" class="h-modal-mask"></div>
+
+    <div id="h-modal-content" modalContentSel class="h-modal-content ">
+        <button id="h-modal-close-button" closeIconSel title="close me"
+            class="h-modal-close-button"
+           >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="14px">
                 <title>close</title>
                 <path d=${closeIconSvg} />
             </svg>
         </button>
-        
-        <slot>modal empty slot content</slot>
+        <div class="h-modal-slot">
+            <slot>modal empty slot content</slot>
+        </div>
+      
     </div>
+   
+
 </div>
 
 <style>
   
- .modal {
+ .h-modal {
     position: fixed;
     top: 0;
     left: 0;
     bottom: 0;
     right: 0;
     display: none;
+    z-index:10;
     
     flex-direction: column; 
     align-items: center;
@@ -63,11 +67,11 @@ template.innerHTML = `
 }
   
   /*if the component has a show attribute set then show modal and fade in*/
-  :host([show]) .modal {
+  :host([show]) .h-modal {
     display: flex;
   }
     /* if animation is enabled then fade out */
-  :host([animate]) .modal {
+  :host([animate]) .h-modal {
     /*  fadeOut sets display:flex while animating, keeping the transition visible.*/
     animation-name: fadeOut;
     animation-duration: var(--animation-duration);
@@ -75,14 +79,14 @@ template.innerHTML = `
   }
 
   /*if animation is enabled then fade in*/
-  :host([show][animate]) .modal {
+  :host([show][animate]) .h-modal {
     animation-name: fadeIn;
     animation-duration: var(--animation-duration);
     animation-timing-function: ease;
     }
 
   /* mask closing when clicking outside the modal content */
-  .modal-mask {
+  .h-modal-mask {
     display: block;
     position: fixed;
     cursor: pointer;
@@ -90,11 +94,9 @@ template.innerHTML = `
     left: 0;
     bottom: 0;
     right: 0;
-    z-index: 1;
-    /*tabindex: -1;*/
+    z-index: 3;  /*same as h-modal-content*/
     opacity: var(--mask-opacity);
-    /*background-color: var(--mask-background);*/
-    background-color: var(--pico-background-color);
+    background-color: var(--mask-background);
 
   }
 
@@ -102,7 +104,7 @@ template.innerHTML = `
 /*The close button is show if the 'showclose' attribute is set
  it is placed relative to the model content div
 */
-.modal-close-button {
+.h-modal-close-button {
     display: none; /* hidden unless 'showclose' attr is set */
     position:absolute;
     z-index:4;
@@ -113,42 +115,53 @@ template.innerHTML = `
     align-items: center;
     justify-content: center;
     padding: 0px;
-    border-radius: 15px;
+    border-radius: 16px;  /* round button */
     border: 1px solid gray;
     cursor: pointer;
     transition: top 0.5s, right 0.5s ease;
 }
  /* show the close button if the h-modal element has the 'showclose' attr set*/
- :host([showclose]) .modal-close-button {
+ :host([showclose]) .h-modal-close-button {
       display: flex;
   } 
   /*On show of the modal, move the close button in position*/
-  :host([show]) .modal-close-button {
+  :host([show]) .h-modal-close-button {
     transition: top 1.5s, right 1.5s ease;
     top: -10px;
     right: -10px;
+    z-index:5; /*cover modal-content*/
   }
   
-.modal-content {
+.h-modal-content {
     /*position the content relative for the close button and the z-index to work*/
     position: relative;
+    z-index: 3; /* same as mask */
+  }
+  /*The slot has the border with rounded corners. This requires overflow
+   set to hidden otherwise the corners are cut off.
+   Unfortunately this will cut off the close button so the close button
+   must be set outside the div with overflow hidden*/
+.h-modal-slot {
+    /*position: relative;*/
     align-items: center;
     justify-content: center;
-    padding: var(--pico-form-element-spacing-vertical) var(--pico-form-element-spacing-horizontal);
-    z-index: 3;
     display: flex;
+    overflow:hidden; /*don't cut off rounded corners*/
     flex-direction: column;
     opacity: 1;
     background-color: var(--pico-background-color);
-    border: solid 1px #999;
-    border-radius: 8px;
-  }
+    border: 1px solid var(--pico-secondary-border);
+
+    border-radius: var(--pico-card-border-radius);
+}
+
 /*Show a box-shadow around the content if the modal has the 'shadow' attribute set */
-:host([shadow]) .modal-content {
-    box-shadow: 0px 5px 5px -3px rgba(0, 0, 0, 0.2),
-       0px 8px 10px 1px rgba(0, 0, 0, 0.14),
-       0px 3px 14px 2px rgba(0, 0, 0, 0.12);
-    } 
+:host([shadow]) .h-modal-content {
+
+  /*box-shadow: 0px 4px 8px -2px rgba(9, 30, 66, 0.35),*/
+  /*      0px 0px 0px 1px rgba(37,64,111,0.59);*/
+   box-shadow: var(--pico-box-shadow);
+    
 
 @keyframes fadeIn {
     0% {
@@ -209,6 +222,7 @@ class HModal extends HTMLElement {
         const shadowRoot = this.attachShadow({mode: "open"});
         // clone the template to support multiple instances
         shadowRoot.append(template.content.cloneNode(true));
+        this.classList.add("shadow")
 
     }
 
@@ -232,10 +246,10 @@ class HModal extends HTMLElement {
     connectedCallback() {
         // console.log("h-modal connectedCallback")
 
-        this.modalEl = this.shadowRoot.querySelector(".modal")
-        this.modalMaskEl = this.shadowRoot.getElementById("modal-mask")
-        this.modalCloseEl = this.shadowRoot.getElementById("modal-close-button")
-        this.modalContentEl = this.shadowRoot.querySelector(".modal-content")
+        this.modalEl = this.shadowRoot.getElementById("h-modal")
+        this.modalMaskEl = this.shadowRoot.getElementById("h-modal-mask")
+        this.modalCloseEl = this.shadowRoot.getElementById("h-modal-close-button")
+        this.modalContentEl = this.shadowRoot.getElementById("h-modal-content")
 
         this.modalCloseEl.addEventListener("click", this.closeModal.bind(this))
         this.modalMaskEl.addEventListener("click", this.closeModal.bind(this))
diff --git a/bindings/hiveoview/src/webcomp/h-theme.css b/bindings/hiveoview/src/webcomp/h-theme.css
index fca867d9..819eb34d 100644
--- a/bindings/hiveoview/src/webcomp/h-theme.css
+++ b/bindings/hiveoview/src/webcomp/h-theme.css
@@ -28,6 +28,138 @@
 
 [data-theme=light],
 :root:not([data-theme=dark]) {
-    --pico-background-color: #eee;
+    /*okay, not really pico styles but it should be*/
+    --pico-header-background-color: #dce9f2;
 
+    --pico-card-border: 1px solid var(--pico-table-border-color);
+    --pico-card-border-color: green;
+    --pico-card-border-radius: 8px;
 }
+
+:root[data-theme=dark] {
+    --pico-header-background-color: #151722;
+    --pico-border-color: gray;
+    --pico-card-border: 1px solid var(--pico-table-border-color);
+    --pico-card-border-color: var(--pico-table-border-color);
+    --pico-card-border-radius: 8px;
+
+}
+
+/* Fix: element/icons within <a> are not vertically aligned */
+a {
+    display: flex;
+    align-items: center;
+}
+
+/* Fix: use article as card with header, footer and full width */
+article {
+    display:flex;
+    flex-direction: column;
+    width: 100%;
+    margin:0; /* allow header to be 100% */
+    box-sizing: border-box;  /*tbd use content box for header/footer? */
+}
+
+/* Fix: headers and footers are full width and should stand out */
+article header, article footer, footer  {
+    display: flex;
+    flex-direction: row;
+    background-color: var(--pico-header-background-color);
+    width: auto; /* 100% doesn't work due to box-sizing ?:(  */
+    gap: var(--pico-grid-row-gap);
+}
+/* Fix: submit button in a footer has no extra bottom margin as it isnt a form */
+article footer button[type=submit] {
+    margin:0;
+}
+/* Fix: article main should have the card background color */
+article main {
+    background-color: var(--pico-card-background-color)
+}
+
+/*---
+   Picocss's doesn't educate on what to use when and where. The intent is missing.
+   Below some notes and thoughts
+
+picocss container classes, when to use what:
+    class="container"
+        - fixed width with breakpoints slightly smaller than viewport size.
+        * usage ? no applicable use-cases
+    class="container-fluid"
+        - full width width container
+        - padding: pico spacing
+        - margin: auto
+        - background: form element background
+        * usage: centered content in a form
+
+picocss container elements
+    <section>
+        - add bottom margin
+        - display: block
+        * why use it: screen readers
+    <header>, <footer>, <main>
+        - display: block
+        * why use it: screen readers; semantic separation
+        * usage inside article
+        * pitfall: no visual indication for building page, eg background color
+    <article> (use as card) - this is the main work horse container
+        - padding pico block spacing vertical/horizontal
+        - border radius;
+        - background: pico-card-background-color
+        - box-shadow: pico-card-box-shadown
+        * article > header:
+            - margin top and bottom --pico-block-spacing-vertical
+            - margin left/right --pico-block-spacing-horizontal
+            - padding -- pico-block-spacing-vertical/horizontal
+            - border: top left/right --pico-border-radius
+            - background color --pico-card-sectioning-background-color
+        * use as a card with header and footer, main and border
+            - dialogs, popups
+    <form>
+        - display block;
+        - margin-top: 0
+        * usage: container for posting form data
+    <fieldset>
+        - display block
+        - width 100%, margin 0, padding 0; border: 0
+        - margin-inline start/end 2px
+        - padding block start, inline start, inline end
+        - min inline size: min content
+        - margin-bottom for stacking fieldsets
+        * use to group elements in a form
+        * with role="group" for horizontal fields in a vertical form
+
+
+Hiveoview layouts:
+    naming conventions in picocss are weird:
+        cards: use article
+        accordion: use '<details> <summary></summary> <p>...</p></details>
+
+
+    main body has header, main and footer
+    each page is a section containing articles (cards)
+    each dialog is an article (card) with header, main and footer
+        forms with fieldset
+    tiles are articles with header and main
+    dropdown menu are divs
+
+ PicoCss style issues:
+    1. picocss uses a lot of bottom padding/margin to separate elements
+       an element doesnt know what comes behind it so it shouldn't do this.
+       instead use grid spacing. We'll work with it for now but you might
+       see padding/margin resets in various places
+    1. <main> has no width/height by default
+    1. article is display block, but mostly flex is more useful for managing height
+        solution: set article to display flex col with 100% width
+    1. vertical alignment inside an <a> element is off as it is display block.
+        solution: set <a> display to flex and align-items center
+    1. footer width is not 100%
+    1. article with header don't work together
+       article has box-sizing border box with padding which misaligns header 100%
+
+    1. dialog has no border, rounded
+    2. tile header/footer background doesn't stand out
+    3. directory page layout is flex; can be block (faster render?)
+       (https://developer.chrome.com/blog/flexbox-layout-isn-t-slow)
+*/
+
diff --git a/bindings/hiveoview/src/webcomp/h-timechart.js b/bindings/hiveoview/src/webcomp/h-timechart.js
index 1ad84416..d8ee7341 100644
--- a/bindings/hiveoview/src/webcomp/h-timechart.js
+++ b/bindings/hiveoview/src/webcomp/h-timechart.js
@@ -174,7 +174,7 @@ export class HTimechart extends HTMLElement {
             let tableData = JSON.parse(dataEl.innerText)
             let tableTitle = dataEl.getAttribute('title')
             let steppedProp = dataEl.getAttribute(PropStepped)
-            let stepped = (steppedProp.toLowerCase()==="true")
+            let stepped = (steppedProp?.toLowerCase()==="true")
             if (tableData) {
                 this.setTimeSeries(0, tableTitle, tableData, stepped)
             }
@@ -270,24 +270,25 @@ export class HTimechart extends HTMLElement {
     setTimeSeries = (nr, label, timePoints, stepped) => {
         // construct a replacement dataset
         console.log("setTimeSeries", timePoints.length, "items", "label=",label)
-        let ds = {
+        let dataset = {
             // label: label,
             data: timePoints,
             borderWidth: 1
         }
         if (stepped) {
-            ds.stepped = "after"
-            ds.fill = false
+            dataset.stepped = "after"
+            dataset.fill = false
         } else {
-            ds.tension = 1 // bezier curve tension
+            dataset.tension = 0.4 // bezier curve tension
+            // ds.fill = false
         }
         if (label) {
-            ds.label = label;
+            dataset.label = label;
             this.config.options.plugins.legend.display = true
         } else {
             this.config.options.plugins.legend.display = false
         }
-        this.setDataSet(nr, ds);
+        this.setDataSet(nr, dataset);
     }
 
 }
diff --git a/bindings/hiveoview/src/webcomp/h-toast.js b/bindings/hiveoview/src/webcomp/h-toast.js
index 70821264..47e3fa63 100644
--- a/bindings/hiveoview/src/webcomp/h-toast.js
+++ b/bindings/hiveoview/src/webcomp/h-toast.js
@@ -83,7 +83,7 @@ h-toast .toast{
     position: relative;
     overflow:hidden;
     list-style: none;
-    border-radius: 10px;
+    border-radius: var(--pico-card-border-radius);
     padding: 16px;
     margin-bottom: 10px;
     background: var(--toast-background);
diff --git a/bindings/hiveoview/test/components.html b/bindings/hiveoview/test/components.html
index e7a6c049..59a9ff09 100644
--- a/bindings/hiveoview/test/components.html
+++ b/bindings/hiveoview/test/components.html
@@ -64,7 +64,7 @@
                     <button slot="button" class="outline  h-row">Menu
                         <iconify-icon icon="mdi:menu"></iconify-icon>
                     </button>
-                    <div class="h-shadow h-panel">
+                    <div class="h-shadow ">
                         <ul style="list-style: none">
                             <li><a href="#">This is the "bottomleft" dropdown</a></li>
                             <li>Use position="bottom" or "bottomright", "bottomleft" to place it below the button
@@ -110,7 +110,7 @@
                         onclick="hShow('modal2')">Modal with inline content
                 </button>
                 <h-modal id="modal2" shadow showclose animate>
-                    <article class="h-panel">
+                    <article >
                         Modal slot inline content
                     </article>
                 </h-modal>
diff --git a/bindings/hiveoview/test/test-dialog1.html.sav b/bindings/hiveoview/test/test-dialog1.html.sav
index b1048476..068eb93f 100644
--- a/bindings/hiveoview/test/test-dialog1.html.sav
+++ b/bindings/hiveoview/test/test-dialog1.html.sav
@@ -64,7 +64,7 @@
         opacity: 1;
         background: #e3e2e1;
         border: solid 1px #999;
-        border-radius: 8px;
+        border-radius: var(--pico-card-border-radius);
 
     }