You will have to wait for 6 to 8 weeks until this is resolved. In the meantime, you can take solace in the fact that this is fixable. Below are several potential approaches to how this issue could be mitigated - choose your poison.
1. Remove max-width restriction
The following rulesets reset the max-width
rule on the element and move the grid cell with the date downwards in case of a very long tag name (up to the current maximum of 35 characters) via the flex-wrap
rule:
.profile-badges .badge-tag {
max-width: unset;
}
.profile-badges .grid {
flex-wrap: wrap;
}
This is how the result looks like (the badge could be stretched to fill the row, but it is omitted for the sake of consistency with how normal badges look like):
2. Use a userscript
The following is a script for hiding the overflow characters with overflow: hidden
and making the badge expandable on hover. Of course, everything done by the script could be also done in pure CSS (coming soon).
Credit for the initial idea goes to Scratte:
Moving the date is not a good idea. Overlay is better :) Hide the darn thing behind the date.
The following is a preview of the script (see the source and minified distribution below):
TypeScript source:
interface MouseEvent extends Event {
readonly target: HTMLElement;
}
interface Document
extends Node,
DocumentAndElementEventHandlers,
DocumentOrShadowRoot,
GlobalEventHandlers,
NonElementParentNode,
ParentNode,
XPathEvaluatorBase {
getElementsByClassName<T extends Element>(
classNames: string
): HTMLCollectionOf<T>;
}
((_w, d) => {
const grid_cell = ".grid--cell";
const badge_tag = "badge-tag";
const badges = [...d.getElementsByClassName<HTMLElement>(badge_tag)];
const toggleOverflow = (
{ style: columnStyle }: HTMLElement,
{ style: badgeStyle }: HTMLElement,
state: "on" | "off"
) => {
const isOn = state === "on";
badgeStyle.overflow = isOn ? "hidden" : "unset";
//@see https://stackoverflow.com/a/20566810/11407695
badgeStyle.verticalAlign = isOn ? "bottom" : "unset";
badgeStyle.maxWidth = isOn ? "150px" : "unset";
columnStyle.zIndex = isOn ? "unset" : "2";
};
const getBadgeItem = (badge: HTMLElement) =>
badge.classList.contains(badge_tag) &&
badge.closest<HTMLElement>(grid_cell);
badges.forEach((badge) => {
const badgeitem = badge.closest<HTMLElement>(grid_cell);
if (!badgeitem) return;
const { nextElementSibling: dateitem } = badgeitem;
if (!dateitem) return;
(dateitem as HTMLElement).style.zIndex = "1";
badgeitem.style.maxWidth = "50%";
toggleOverflow(badgeitem, badge, "on");
});
d.addEventListener("mouseover", ({ target }) => {
const badgeitem = getBadgeItem(target);
badgeitem && toggleOverflow(badgeitem, target, "off");
});
d.addEventListener("mouseout", ({ target }) => {
const badgeitem = getBadgeItem(target);
badgeitem && toggleOverflow(badgeitem, target, "on");
});
})(window, document);
Minified JavaScript (polyfill for closest
not included):
"use strict";var __read=this&&this.__read||function(t,e){var n="function"==typeof Symbol&&t[Symbol.iterator];if(!n)return t;var r,o,a=n.call(t),i=[];try{for(;(void 0===e||0<e--)&&!(r=a.next()).done;)i.push(r.value)}catch(t){o={error:t}}finally{try{r&&!r.done&&(n=a.return)&&n.call(a)}finally{if(o)throw o.error}}return i},__spread=this&&this.__spread||function(){for(var t=[],e=0;e<arguments.length;e++)t=t.concat(__read(arguments[e]));return t};!function(t){function r(t,e,n){t=t.style,e=e.style,n="on"===n,e.overflow=n?"hidden":"unset",e.verticalAlign=n?"bottom":"unset",e.maxWidth=n?"150px":"unset",t.zIndex=n?"unset":"2"}function n(t){return t.classList.contains(e)&&t.closest(o)}var o=".grid--cell",e="badge-tag",a=__spread(t.getElementsByClassName(e));a.forEach(function(t){var e,n=t.closest(o);!n||(e=n.nextElementSibling)&&(e.style.zIndex="1",n.style.maxWidth="50%",r(n,t,"on"))}),t.addEventListener("mouseover",function(t){var e=t.target,t=n(e);t&&r(t,e,"off")}),t.addEventListener("mouseout",function(t){var e=t.target,t=n(e);t&&r(t,e,"on")})}((window,document));
max-width
works well regardless of viewport size - not sure what you are talking about (but I may be missing something, you're the SME)?