OPDS: fix overflow and accommodate long metadata values

johnfactotum · Dec 6, 2023 · 6e674ae · 6e674ae
1 parent 86a622d
commit 6e674ae
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 0 deletions.
diff --git a/src/opds/opds.html b/src/opds/opds.html
@@ -3,6 +3,7 @@
 <meta name="color-scheme" content="light dark">
 <style>
 :root {
+    overflow-wrap: anywhere;
     font-size: 11pt;
     font-family: system-ui;
     --shade: rgba(0, 0, 0, .1);
@@ -230,6 +231,9 @@
     grid-template-rows: subgrid;
     margin-bottom: 18px;
 }
+opds-pub-full > [slot="details"] tr.long {
+    grid-column: span 2;
+}
 opds-pub-full > [slot="details"] [role="listitem"] {
     display: inline-flex;
     gap: 1ex;

diff --git a/src/opds/opds.js b/src/opds/opds.js
@@ -172,6 +172,7 @@ customElements.define('opds-pub-full', class extends HTMLElement {
                 color-scheme: light dark;
                 font-family: system-ui;
                 margin: 0;
+                overflow-wrap: anywhere;
             }
             a:any-link {
                 color: highlight;
@@ -360,6 +361,7 @@ const renderEntry = async (entry, filter, getHref, baseURL) => {
         tr.append(th, td)
         th.textContent = globalThis.uiText.metadata[k]
         td.textContent = v
+        if (v.length > 30) tr.classList.add('long')
         table.append(tr)
     }