domma-cms 0.76.0 → 0.77.0

package/admin/js/templates/api-endpoint-editor.html

@@ -1,72 +1,87 @@
-<div class="page-header">
-    <h2><span data-icon="code"></span> <span id="ep-title">API Endpoint</span></h2>
-    <div class="header-actions">
-        <a class="btn btn-ghost" href="#/api-endpoints">All endpoints</a>
-        <button class="btn btn-primary" id="ep-save"><span data-icon="save"></span> Save</button>
+<!-- API Builder - endpoint editor. See admin/js/views/api-endpoint-editor.js. No page heading: the Tool banner
+     ("API Builder › <endpoint>") is the heading, with All endpoints and Save in it. Parts are bound with
+     M.applyBindings - never the Query panel, whose hints show {{params.x}} literally. #endpoint-project and
+     #ep-editor-tabs are relied on by app.js (?project= pre-fill) and admin.css (full-width view). -->
+<div class="epx">
+    <div class="epx-bar" id="ep-bar" data-bind-hidden="!dirty.value">
+        <span class="epx-chip is-warn">Unsaved</span>
+        <span class="epx-bar-text" data-bind-text="barText.value"></span>
+        <span class="epx-spacer"></span>
+        <button type="button" class="btn btn-sm btn-ghost" data-on-click="discard">Discard</button>
+        <button type="button" class="btn btn-sm btn-primary" data-on-click="save" data-bind-disabled="saving.value">
+            <span data-icon="save" data-icon-size="13"></span> Save</button>
     </div>
-</div>
 
-<div class="ep-editor-grid">
-    <div>
-        <div class="tabs" id="ep-editor-tabs">
-            <div class="tab-list">
-                <button class="tab-item active">Definition</button>
-                <button class="tab-item">Query</button>
-                <button class="tab-item">Response fields</button>
-            </div>
+    <div class="ep-editor-grid">
+        <div>
+            <div class="tabs" id="ep-editor-tabs">
+                <div class="tab-list">
+                    <button class="tab-item active">Definition <span class="epx-dot" id="ep-def-dot" hidden></span></button>
+                    <button class="tab-item">Query <span class="epx-dot" id="ep-query-dot" hidden></span></button>
+                    <button class="tab-item">Response fields</button>
+                </div>
 
-            <div class="tab-panel active">
-                <div class="card">
-                    <div class="card-body">
+                <div class="tab-panel active" id="ep-def-panel">
+                    <div class="epx-card">
                         <div class="form-group">
-                            <label class="form-label" for="ep-name">Name</label>
-                            <input type="text" class="form-input" id="ep-name" placeholder="e.g. Fixtures by day">
+                            <label class="form-label" for="ep-name">Name
+                                <span data-help="For you and your team - shown in the API Builder list. Callers never see it."></span></label>
+                            <input type="text" class="form-input" id="ep-name" placeholder="e.g. Fixtures by day" maxlength="120">
+                            <small class="epx-err" data-bind-hidden="!err.value.name" data-bind-text="err.value.name"></small>
                         </div>
                         <div class="form-group">
-                            <label class="form-label" for="endpoint-project">Project</label>
+                            <label class="form-label" for="endpoint-project">Project
+                                <span data-help="The first part of the address, after /api/x/. It is the endpoint's namespace, so it cannot change once saved. The endpoint may only expose collections from this project or Core."></span></label>
                             <select class="form-input" id="endpoint-project"></select>
-                            <p class="text-muted" style="font-size:.8rem;margin:.25rem 0 0;">The first URL segment. Fixed once saved.</p>
+                            <small class="epx-err" data-bind-hidden="!err.value.project" data-bind-text="err.value.project"></small>
                         </div>
                         <div class="form-group">
-                            <label class="form-label" for="ep-path">Path</label>
-                            <input type="text" class="form-input" id="ep-path" placeholder="/fixtures-day/:date">
-                            <p class="text-muted" style="font-size:.8rem;margin:.25rem 0 0;">Lowercase segments or <code>:param</code> placeholders. Full URL: <code id="ep-url-preview">/api/x/…</code></p>
+                            <label class="form-label" for="ep-path">Path
+                                <span data-help-title="Path" data-help="Lowercase letters, numbers and hyphens, one segment at a time, or :name for a value the caller supplies (/fixtures-day/:date). Two endpoints in a project cannot have the same shape - /a/:x and /a/:y clash."></span></label>
+                            <input type="text" class="form-input font-mono" id="ep-path" placeholder="/fixtures-day/:date">
+                            <small class="epx-err" data-bind-hidden="!pathErr.value" data-bind-text="pathErr.value"></small>
+                            <small class="epx-hint">Full address: <code id="ep-url-preview">/api/x/…</code></small>
                         </div>
                         <div class="form-group">
-                            <label class="form-label" for="ep-collection">Collection</label>
+                            <label class="form-label" for="ep-collection">Collection
+                                <span data-help="Where the answers come from. Only collections in this project or Core are offered; system collections (users, tokens…) can never be exposed."></span></label>
                             <select class="form-input" id="ep-collection"></select>
+                            <small class="epx-err" data-bind-hidden="!err.value.collection" data-bind-text="err.value.collection"></small>
                         </div>
-                        <div style="display:grid;grid-template-columns:1fr 1fr;gap:.75rem;">
+                        <div class="epx-grid2">
                             <div class="form-group">
-                                <label class="form-label" for="ep-auth">Access</label>
+                                <label class="form-label" for="ep-auth">Access
+                                    <span data-help-title="Access" data-help="Public: anyone. Token: only a project API token (System › API Tokens) for this project - never a signed-in session. A role: a signed-in user holding that role or a more senior one."></span></label>
                                 <select class="form-input" id="ep-auth"></select>
                             </div>
                             <div class="form-group">
-                                <label class="form-label" for="ep-mode">Mode</label>
+                                <label class="form-label" for="ep-mode">Mode
+                                    <span data-help="List answers an array of entries. Single answers the first match, or 404 when there is none - for /thing/:id style addresses."></span></label>
                                 <select class="form-input" id="ep-mode">
                                     <option value="list">List - array of entries</option>
                                     <option value="single">Single - first match or 404</option>
                                 </select>
                             </div>
                         </div>
-                        <label style="display:flex;align-items:center;gap:.5rem;cursor:pointer;margin-top:.5rem;padding-top:.75rem;border-top:1px solid rgba(127,127,127,.18);">
-                            <input type="checkbox" id="ep-enabled" checked> <strong>Enabled</strong>
-                            <span class="text-muted" style="font-size:.85rem;">- disabled endpoints return 404</span>
-                        </label>
+                        <div class="epx-setting">
+                            <label class="form-label" for="ep-enabled">Enabled
+                                <span data-help="Off answers 404 to every caller, as if the endpoint did not exist. The definition is kept."></span></label>
+                            <input type="checkbox" class="form-switch" id="ep-enabled" checked>
+                        </div>
                     </div>
                 </div>
-            </div>
 
-            <div class="tab-panel">
-                <div class="card">
-                    <div class="card-header">
-                        <h2>Query</h2>
-                        <button class="btn btn-sm btn-ghost" id="ep-add-filter"><span data-icon="plus"></span> Add filter</button>
-                    </div>
-                    <div class="card-body">
-                        <div id="ep-filter-rows"></div>
-                        <p class="text-muted" style="font-size:.8rem;margin:.5rem 0 0;">Values may use <code>{{params.name}}</code> (from a <code>:name</code> path segment, required) or <code>{{query.name}}</code> (optional - the filter is skipped when absent).</p>
-                        <div style="display:grid;grid-template-columns:2fr 1fr 1fr;gap:.75rem;margin-top:1rem;">
+                <div class="tab-panel">
+                    <div class="epx-card">
+                        <div class="epx-card-title">Filters
+                            <span data-help-title="Filters" data-help="Every filter must match. A value can be a literal, {{params.name}} (from a :name segment - required) or {{query.name}} (from ?name= - optional: the filter is dropped when the caller leaves it out). Right-click a filter (or ⋮) to move, duplicate or remove it."></span>
+                            <span class="epx-spacer"></span>
+                            <button type="button" class="btn btn-sm btn-ghost" id="ep-add-filter"><span data-icon="plus" data-icon-size="13"></span> Add filter</button>
+                        </div>
+                        <div id="ep-filter-rows" class="epx-list"></div>
+                        <p class="epx-note" id="ep-filter-empty">No filters - every entry matches.</p>
+                        <small class="epx-err" id="ep-filter-err" hidden></small>
+                        <div class="epx-grid3">
                             <div class="form-group">
                                 <label class="form-label" for="ep-sort">Sort field</label>
                                 <select class="form-input" id="ep-sort"></select>
@@ -79,99 +94,139 @@
                                 </select>
                             </div>
                             <div class="form-group">
-                                <label class="form-label" for="ep-limit">Limit</label>
+                                <label class="form-label" for="ep-limit">Limit
+                                    <span data-help="At most this many entries per answer (0 = no limit, up to 500). A caller may ask for fewer with ?limit=, never more."></span></label>
                                 <input type="number" class="form-input" id="ep-limit" min="0" max="500" value="50">
+                                <small class="epx-err" id="ep-limit-err" hidden></small>
                             </div>
                         </div>
-                        <p class="text-muted" style="font-size:.8rem;margin:0;">Limit 0 = no limit.</p>
                     </div>
                 </div>
-            </div>
 
-            <div class="tab-panel">
-                <div class="card">
-                    <div class="card-header"><h2>Response fields</h2></div>
-                    <div class="card-body">
-                        <p class="text-muted" style="font-size:.85rem;margin:0 0 .5rem;">Tick fields to return only those - none ticked returns everything.</p>
-                        <div id="ep-fields-list" style="display:flex;flex-wrap:wrap;gap:.5rem 1.25rem;"></div>
+                <div class="tab-panel">
+                    <div class="epx-card">
+                        <div class="epx-card-title">Response fields
+                            <span data-help-title="Response fields" data-help="Tick the fields callers get back - none ticked returns every field. Anything not ticked cannot be read or filtered on through this endpoint. Right-click the list (or ⋮) to tick all, none, or invert."></span>
+                            <span class="epx-spacer"></span>
+                            <button type="button" class="epx-kebab" id="ep-fields-more" aria-label="Field actions" title="Actions">⋮</button>
+                        </div>
+                        <div id="ep-fields-list" class="epx-fields" tabindex="0"></div>
+                        <p class="epx-note" id="ep-fields-note"></p>
                     </div>
                 </div>
             </div>
         </div>
-    </div>
 
-    <div class="ep-tryit-col">
-    <div class="card">
-        <div class="card-header">
-            <h2><span data-icon="zap"></span> Try it</h2>
-            <span class="text-muted" style="font-size:.75rem;">⌘/Ctrl+↵ send · ⌘/Ctrl+S save</span>
-        </div>
-        <div class="card-body">
-            <div id="tryit-dirty-note" class="text-muted" style="display:none;font-size:.85rem;margin-bottom:.75rem;">
-                <span data-icon="info"></span> Save to test your changes.
-            </div>
-            <div id="tryit-params"></div>
-            <div id="tryit-query-params"></div>
-            <div class="form-group" id="tryit-token-group" style="display:none;">
-                <label class="form-label" for="tryit-token">API token</label>
-                <input type="text" class="form-input" id="tryit-token" placeholder="dcms_…">
-            </div>
-            <div class="form-group">
-                <label class="form-label" for="tryit-query">Extra query string (optional)</label>
-                <input type="text" class="form-input" id="tryit-query" placeholder="nation=France&status=published">
-                <p class="text-muted" style="font-size:.8rem;margin:.25rem 0 0;">Applied as extra filters <em>on top of</em> the definition's own filters (which always win). Only fields this endpoint returns can be filtered; operators work too - e.g. <code>title_contains=cup</code>. <code>page</code>, <code>limit</code>, <code>sort</code> and <code>order</code> control pagination/sort instead (<code>limit</code> is capped at the endpoint's own limit); <code>search</code> is reserved.</p>
-            </div>
-            <button class="btn btn-primary" id="tryit-send" style="width:100%;"><span data-icon="play"></span> Send</button>
-            <div id="tryit-result" style="display:none;margin-top:.75rem;">
-                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem;">
-                    <span class="form-label" style="margin:0;">Request</span>
-                    <button class="btn btn-sm btn-ghost" id="tryit-copy-curl" data-tooltip="Copy as curl"><span data-icon="copy"></span> Copy curl</button>
+        <div class="ep-tryit-col">
+            <div class="epx-card">
+                <div class="epx-card-title"><span data-icon="zap" data-icon-size="15"></span> Try it
+                    <span data-help-title="Try it" data-help="Calls the SAVED endpoint exactly as an outside caller would - no admin sign-in is sent, so what you see is what they get. Ctrl+Enter sends. Unsaved changes are not tested until you save."></span></div>
+                <div id="tryit-dirty-note" class="epx-alert" style="display:none;">
+                    <span>Save to test your changes.</span>
+                    <button type="button" class="btn btn-sm btn-primary" id="tryit-save-send">Save and send</button>
                 </div>
-                <pre id="tryit-curl" style="max-height:180px;overflow:auto;font-size:.8rem;padding:.6rem;margin:0 0 .75rem;white-space:pre-wrap;word-break:break-all;"></pre>
-
-                <div style="display:flex;align-items:center;justify-content:space-between;margin-bottom:.4rem;">
-                    <span class="form-label" style="margin:0;">Response</span>
-                    <span id="tryit-status" class="badge badge-secondary">-</span>
+                <div id="tryit-params"></div>
+                <div id="tryit-query-params"></div>
+                <div class="form-group" id="tryit-token-group" style="display:none;">
+                    <label class="form-label" for="tryit-token">API token
+                        <span data-help="A dcms_… token for this endpoint's project. Used for this request only - never stored, and not kept in the history."></span></label>
+                    <input type="password" class="form-input font-mono" id="tryit-token" placeholder="dcms_…" autocomplete="new-password">
                 </div>
-                <div id="tryit-headers-group">
-                    <p class="text-muted" style="font-size:.78rem;margin:0 0 .2rem;text-transform:uppercase;letter-spacing:.03em;">Headers</p>
-                    <pre id="tryit-headers" style="max-height:160px;overflow:auto;font-size:.78rem;padding:.6rem;margin:0;white-space:pre-wrap;word-break:break-all;"></pre>
+                <div class="form-group">
+                    <label class="form-label" for="tryit-query">Extra query string
+                        <span data-help-title="Extra query string" data-help="Added as filters on top of the definition's own (which always win). Only fields this endpoint returns can be filtered; operators work too - title_contains=cup. page, limit, sort and order page and sort instead (limit is capped at the endpoint's own); search is reserved."></span></label>
+                    <input type="text" class="form-input font-mono" id="tryit-query" placeholder="nation=France&status=published">
+                </div>
+                <button type="button" class="btn btn-primary epx-wide" id="tryit-send"><span data-icon="play" data-icon-size="13"></span> Send</button>
+                <div id="tryit-result" style="display:none;">
+                    <div class="epx-subhead"><span class="form-label">Request</span>
+                        <button type="button" class="btn btn-sm btn-ghost" id="tryit-copy-curl"><span data-icon="copy" data-icon-size="13"></span> Copy curl</button></div>
+                    <pre id="tryit-curl" class="epx-pre"></pre>
+                    <div class="epx-subhead"><span class="form-label">Response</span>
+                        <span id="tryit-status" class="epx-chip">-</span></div>
+                    <div id="tryit-headers-group">
+                        <p class="epx-mini">Headers</p>
+                        <pre id="tryit-headers" class="epx-pre"></pre>
+                    </div>
                 </div>
             </div>
         </div>
-    </div>
-    </div>
 
-    <div class="ep-results-col">
-    <div class="card" id="tryit-results-placeholder">
-        <div class="card-body" style="text-align:center;color:var(--dm-text-muted,#8a94a6);padding:2rem 1rem;">
-            <div data-icon="zap" style="font-size:1.5rem;opacity:.5;"></div>
-            <p style="margin:.5rem 0 0;font-size:.9rem;">Send a request to see the response here.</p>
-        </div>
-    </div>
-    <div class="card" id="tryit-response-card" style="display:none;">
-        <div class="card-header">
-            <h2><span data-icon="code"></span> Response body</h2>
-            <div style="display:flex;gap:.35rem;">
-                <button class="btn btn-sm btn-ghost" id="tryit-json-toggle">Raw</button>
-                <button class="btn btn-sm btn-ghost" id="tryit-body-copy" data-tooltip="Copy body"><span data-icon="copy"></span></button>
+        <div class="ep-results-col">
+            <div class="epx-card" id="tryit-results-placeholder">
+                <p class="epx-note epx-center"><span data-icon="zap" data-icon-size="20"></span><br>Send a request to see the response here.</p>
+            </div>
+            <div class="epx-card" id="tryit-response-card" style="display:none;">
+                <div class="epx-card-title"><span data-icon="code" data-icon-size="15"></span> Response body
+                    <span class="epx-spacer"></span>
+                    <button type="button" class="btn btn-sm btn-ghost" id="tryit-json-toggle">Raw</button>
+                    <button type="button" class="btn btn-sm btn-ghost" id="tryit-body-copy" title="Copy the body" aria-label="Copy the body"><span data-icon="copy" data-icon-size="13"></span></button>
+                </div>
+                <div id="tryit-json" class="epx-json"></div>
+                <pre id="tryit-body" class="epx-pre epx-tall" style="display:none;"></pre>
             </div>
-        </div>
-        <div class="card-body" style="padding-top:.5rem;">
-            <div id="tryit-json" style="max-height:460px;overflow:auto;font-family:var(--dm-font-mono,ui-monospace,monospace);font-size:.8rem;line-height:1.5;padding:.6rem;"></div>
-            <pre id="tryit-body" style="display:none;max-height:460px;overflow:auto;font-size:.8rem;padding:.6rem;margin:0;white-space:pre-wrap;word-break:break-word;"></pre>
-        </div>
-    </div>
 
-    <div class="card" id="tryit-history-card" style="display:none;">
-        <div class="card-header">
-            <h2><span data-icon="history"></span> Test history</h2>
-            <button class="btn btn-sm btn-ghost" id="tryit-history-clear" data-tooltip="Clear history"><span data-icon="trash"></span></button>
-        </div>
-        <div class="card-body" style="padding-top:.5rem;">
-            <p class="text-muted" style="font-size:.8rem;margin:0 0 .5rem;">Click a request to re-run it.</p>
-            <div id="tryit-history-list" style="display:flex;flex-direction:column;gap:.35rem;"></div>
+            <div class="epx-card" id="tryit-history-card" style="display:none;">
+                <div class="epx-card-title"><span data-icon="clock" data-icon-size="15"></span> Test history
+                    <span data-help="The last requests you sent from this editor, kept in this browser (never a token). Click one to run it again; right-click (or ⋮) to copy its address or remove it."></span>
+                    <span class="epx-spacer"></span>
+                    <button type="button" class="btn btn-sm btn-ghost" id="tryit-history-clear" title="Clear the history" aria-label="Clear the history"><span data-icon="trash" data-icon-size="13"></span></button>
+                </div>
+                <div id="tryit-history-list" class="epx-list"></div>
+            </div>
         </div>
     </div>
-    </div>
 </div>
+
+<style>
+.epx { display: flex; flex-direction: column; gap: .75rem; }
+.epx [hidden] { display: none !important; }
+.epx-bar { display: flex; align-items: center; gap: .5rem; padding: .5rem .75rem; border-radius: var(--dm-radius-md);
+    background: color-mix(in srgb, var(--dm-warning) 12%, transparent); position: sticky; top: 0; z-index: 5; }
+.epx-bar-text { color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.epx-spacer { flex: 1; }
+.epx-card { border: 1px solid var(--dm-border); border-radius: var(--dm-radius-md); padding: .75rem .9rem; display: flex; flex-direction: column;
+    gap: .6rem; margin-bottom: .75rem; background: var(--dm-surface); }
+.epx-card-title { display: flex; align-items: center; gap: .35rem; font-weight: 600; }
+.epx-card-title .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.epx-card .form-group { margin: 0; }
+.epx .form-label { display: flex; align-items: center; gap: .3rem; }
+.epx-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; }
+.epx-grid3 { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: .75rem; margin-top: .25rem; }
+.epx-setting { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding-top: .6rem; border-top: 1px solid var(--dm-border); }
+.epx-setting .form-label { margin: 0; }
+.epx-err { display: block; color: var(--dm-danger); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.epx-hint { display: block; color: var(--dm-text-muted); font-size: var(--dm-text-xs); margin-top: .25rem; }
+.epx-note { margin: 0; color: var(--dm-text-muted); font-size: var(--dm-text-sm); }
+.epx-center { text-align: center; padding: 1.5rem 0; }
+.epx-mini { margin: 0 0 .2rem; color: var(--dm-text-muted); font-size: var(--dm-text-xs); text-transform: uppercase; letter-spacing: .03em; }
+.epx-alert { display: flex; align-items: center; gap: .5rem; justify-content: space-between; padding: .45rem .6rem; border-radius: var(--dm-radius-sm);
+    background: color-mix(in srgb, var(--dm-warning) 12%, transparent); font-size: var(--dm-text-sm); }
+.epx-dot { display: inline-block; width: .45rem; height: .45rem; border-radius: 50%; background: var(--dm-warning); margin-left: .25rem; vertical-align: middle; }
+.epx-list { display: flex; flex-direction: column; gap: .35rem; }
+.epx-frow { display: grid; grid-template-columns: 2fr 1.2fr 2fr auto; gap: .5rem; align-items: center; border-radius: var(--dm-radius-sm); }
+.epx-frow:focus-within, .epx-frow:focus-visible { outline: none; box-shadow: 0 0 0 1px var(--dm-border); }
+.epx-kebab { border: 0; background: none; cursor: pointer; font-size: var(--dm-text-lg); color: var(--dm-text-muted); border-radius: var(--dm-radius-sm); padding: 0 .3rem; line-height: 1; }
+.epx-kebab:hover { color: var(--dm-primary); }
+.epx-fields { display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; outline: none; }
+.epx-fields label { display: inline-flex; align-items: center; gap: .35rem; cursor: pointer; font-size: var(--dm-text-sm); }
+.epx-chip { display: inline-flex; align-items: center; font-size: var(--dm-text-xs); font-weight: 600; padding: .1rem .5rem; border-radius: 999px; white-space: nowrap;
+    background: color-mix(in srgb, var(--dm-text) 10%, transparent); color: var(--dm-text-muted); }
+.epx-chip.is-ok { background: color-mix(in srgb, var(--dm-success) 16%, transparent); color: var(--dm-success); }
+.epx-chip.is-warn { background: color-mix(in srgb, var(--dm-warning) 18%, transparent); color: var(--dm-warning); }
+.epx-chip.is-danger { background: color-mix(in srgb, var(--dm-danger) 16%, transparent); color: var(--dm-danger); }
+.epx-subhead { display: flex; align-items: center; justify-content: space-between; margin: .6rem 0 .3rem; }
+.epx-subhead .form-label { margin: 0; }
+.epx-subhead .btn { display: inline-flex; align-items: center; gap: .3rem; }
+.epx-pre { max-height: 180px; overflow: auto; font-size: var(--dm-text-xs); padding: .6rem; margin: 0; white-space: pre-wrap; word-break: break-all;
+    background: var(--dm-surface-raised, var(--dm-background)); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); color: var(--dm-text); }
+.epx-tall { max-height: 460px; }
+.epx-json { max-height: 460px; overflow: auto; font-family: var(--dm-font-mono, ui-monospace, monospace); font-size: var(--dm-text-xs); line-height: 1.5; padding: .6rem;
+    background: var(--dm-surface-raised, var(--dm-background)); border: 1px solid var(--dm-border); border-radius: var(--dm-radius-sm); }
+.epx-wide { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: .3rem; }
+.epx-hrow { display: flex; align-items: center; gap: .5rem; width: 100%; text-align: left; border: 0; background: none; cursor: pointer; color: var(--dm-text);
+    font-family: var(--dm-font-mono, monospace); font-size: var(--dm-text-xs); padding: .35rem .45rem; border-radius: var(--dm-radius-sm); }
+.epx-hrow:hover, .epx-hrow:focus-visible { background: var(--dm-table-hover-bg, color-mix(in srgb, var(--dm-text) 6%, transparent)); outline: none; }
+.epx-hrow .epx-url { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+@media (max-width: 640px) { .epx-grid2, .epx-grid3, .epx-frow { grid-template-columns: 1fr; } }
+</style>