show local date on hover

ui/src/components/admins/AdminUpsertPanel.svelte

@@ -3,12 +3,12 @@
     import { slide } from "svelte/transition";
     import CommonHelper from "@/utils/CommonHelper";
     import ApiClient from "@/utils/ApiClient";
-    import tooltip from "@/actions/tooltip";
     import { setErrors } from "@/stores/errors";
     import { confirm } from "@/stores/confirmation";
     import { addSuccessToast } from "@/stores/toasts";
     import Field from "@/components/base/Field.svelte";
     import Toggler from "@/components/base/Toggler.svelte";
+    import ModelDateIcon from "@/components/base/ModelDateIcon.svelte";
     import OverlayPanel from "@/components/base/OverlayPanel.svelte";
     import SecretGeneratorButton from "@/components/base/SecretGeneratorButton.svelte";
 
@@ -148,13 +148,7 @@
                     <span class="txt">id</span>
                 </label>
                 <div class="form-field-addon">
-                    <i
-                        class="ri-calendar-event-line txt-disabled"
-                        use:tooltip={{
-                            text: `Created: ${admin.created}\nUpdated: ${admin.updated}`,
-                            position: "left",
-                        }}
-                    />
+                    <ModelDateIcon model={admin} />
                 </div>
                 <input type="text" id={uniqueId} value={admin.id} readonly />
             </Field>

ui/src/components/base/FormattedDate.svelte

@@ -1,13 +1,24 @@
 <script>
+    import tooltip from "@/actions/tooltip";
+    import CommonHelper from "@/utils/CommonHelper";
+
     export let date = "";
 
     $: dateOnly = date ? date.substring(0, 10) : null;
 
     $: timeOnly = date ? date.substring(10, 19) : null;
+
+    const tooltipData = {
+        // generate the tooltip text as getter to speed up the initial load
+        // in case the component is used with large number of items
+        get text() {
+            return CommonHelper.formatToLocalDate(date) + " Local";
+        },
+    };
 </script>
 
 {#if date}
-    <div class="datetime">
+    <div class="datetime" use:tooltip={tooltipData}>
         <div class="date">{dateOnly}</div>
         <div class="time">{timeOnly} UTC</div>
     </div>
@@ -17,8 +28,9 @@
 
 <style>
     .datetime {
-        width: 100%;
-        display: block;
+        display: inline-block;
+        vertical-align: top;
+        white-space: nowrap;
         line-height: var(--smLineHeight);
     }
     .time {

ui/src/components/base/ModelDateIcon.svelte

@@ -0,0 +1,38 @@
+<script>
+    import tooltip from "@/actions/tooltip";
+    import CommonHelper from "@/utils/CommonHelper";
+
+    const detailedDateFormat = "yyyy-MM-dd HH:mm:ss.SSS";
+
+    export let model;
+
+    let tooltipDates = [];
+
+    $: if (model) {
+        refreshTooltipDates();
+    }
+
+    function refreshTooltipDates() {
+        tooltipDates = [];
+
+        if (model.created) {
+            tooltipDates.push(
+                "Created: " + CommonHelper.formatToLocalDate(model.created, detailedDateFormat) + " Local"
+            );
+        }
+
+        if (model.updated) {
+            tooltipDates.push(
+                "Updated: " + CommonHelper.formatToLocalDate(model.updated, detailedDateFormat) + " Local"
+            );
+        }
+    }
+</script>
+
+<i
+    class="ri-calendar-event-line txt-disabled"
+    use:tooltip={{
+        text: tooltipDates.join("\n"),
+        position: "left",
+    }}
+/>

ui/src/components/records/RecordUpsertPanel.svelte

@@ -10,6 +10,7 @@
     import { addSuccessToast } from "@/stores/toasts";
     import Field from "@/components/base/Field.svelte";
     import Toggler from "@/components/base/Toggler.svelte";
+    import ModelDateIcon from "@/components/base/ModelDateIcon.svelte";
     import OverlayPanel from "@/components/base/OverlayPanel.svelte";
     import AuthFields from "@/components/records/fields/AuthFields.svelte";
     import TextField from "@/components/records/fields/TextField.svelte";
@@ -539,13 +540,7 @@
                 </label>
                 {#if !isNew}
                     <div class="form-field-addon">
-                        <i
-                            class="ri-calendar-event-line txt-disabled"
-                            use:tooltip={{
-                                text: `Created: ${record.created}\nUpdated: ${record.updated}`,
-                                position: "left",
-                            }}
-                        />
+                        <ModelDateIcon model={record} />
                     </div>
                 {/if}
                 <input

ui/src/components/records/RecordsList.svelte

@@ -17,7 +17,7 @@
 
     const dispatch = createEventDispatcher();
     const sortRegex = /^([\+\-])?(\w+)$/;
-    const perPage = 40;
+    const perPage = 45;
 
     export let collection;
     export let sort = "";

ui/src/scss/_layout.scss

@@ -231,6 +231,7 @@
 
 .page-header {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     width: 100%;
     min-height: var(--btnHeight);