From 2aff7512bc53273e14c0c72f5fd3a4d38b7500f4 Mon Sep 17 00:00:00 2001
From: covn <contact@covn.dev>
Date: Wed, 13 May 2026 11:08:30 +0200
Subject: [PATCH] [FIX] webui-templates: update time-elements library

The `@github/time-element` library is now deprecated. Its authors
recommend using `@github/relative-time-element` instead.

This commit was motivated by the fact that Runboat uses the `<time-ago>`
and `time-elements@latest` library, which currently points to version
4.0.0.
In this release, the `<time-ago>` component was removed in favor of
`<relative-time>`.

Alternatively, pin the `time-elements@3.6.0` instead of `latest`.
---
 src/runboat/webui-templates/runboat-build-element.js | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/runboat/webui-templates/runboat-build-element.js b/src/runboat/webui-templates/runboat-build-element.js
index 8308435..aa8d9ce 100644
--- a/src/runboat/webui-templates/runboat-build-element.js
+++ b/src/runboat/webui-templates/runboat-build-element.js
@@ -1,5 +1,5 @@
 import {LitElement, html, css} from 'https://esm.run/lit@2.1.2?module';
-import 'https://esm.run/@github/time-elements@latest?module';
+import 'https://esm.run/@github/relative-time-element@latest?module';
 
 class RunboatBuildElement extends LitElement {
     static get properties() {
@@ -36,9 +36,10 @@ class RunboatBuildElement extends LitElement {
         .build-status-failed {
             background-color: lightcoral;
         }
-        time-ago {
+        relative-time {
             color: gray;
             white-space: nowrap;
+            font-size: small
         }
         p {
             margin-top: 0.5em;
@@ -61,7 +62,7 @@ class RunboatBuildElement extends LitElement {
                 ${this.build.commit_info?.git_commit?
                     html`(<a href="${this.build.repo_commit_link}">${this.build.commit_info?.git_commit.substring(0, 8)}</a>)`:""
                 }
-                <time-ago datetime="${this.build.created}"></time-ago>
+                <relative-time datetime="${this.build.created}"></relative-time>
             </p>
             <p>
                 ${this.build.status || "undeployed"}