TimeFormat: Improve overflow on reply timestamps (#1567)

Co-authored-by: April Sylph <[email protected]>
AprilSylph · Nov 23, 2024 · 46c6ad4 · 46c6ad4
1 parent 53c0858
commit 46c6ad4
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 21 deletions.
diff --git a/src/features/timeformat.css b/src/features/timeformat.css
diff --git a/src/features/timeformat.js b/src/features/timeformat.js
@@ -1,11 +1,43 @@
 import moment from '../lib/moment.js';
 import { keyToCss } from '../utils/css_map.js';
+import { buildStyle } from '../utils/interface.js';
 import { pageModifications } from '../utils/mutations.js';
 import { getPreferences } from '../utils/preferences.js';
 
 let format;
 let displayRelative;
 
+export const styleElement = buildStyle(`
+[data-formatted-time] {
+  font-size: 0px !important;
+}
+
+[data-formatted-time]::before {
+  content: attr(data-formatted-time);
+  font-size: .78125rem;
+}
+
+[data-formatted-relative-time]::after {
+  content: attr(data-formatted-relative-time);
+  font-size: .78125rem;
+  display: inline-block;
+}
+
+[data-formatted-time][title]::before,
+[data-formatted-time][title]::after {
+  cursor: help;
+}
+
+${keyToCss('blogLinkWrapper')}:has(+ [data-formatted-time]) {
+  flex: none;
+}
+
+${keyToCss('blogLinkWrapper')} + [data-formatted-time] {
+  white-space: nowrap;
+  overflow-x: hidden;
+}
+`);
+
 const relativeTimeFormat = new Intl.RelativeTimeFormat(document.documentElement.lang, { style: 'long' });
 const thresholds = [
   { unit: 'year', denominator: 31557600 },
@@ -53,5 +85,3 @@ export const clean = async function () {
   $('[data-formatted-time]').removeAttr('data-formatted-time');
   $('[data-formatted-relative-time]').removeAttr('data-formatted-relative-time');
 };
-
-export const stylesheet = true;