10

Don't know they are called tiles or whatever, but I refer to this.

I'm new to CSS, but I guess this is a very rookie bug, ahahah.

Considering that the problem does not occur here, where the same plate (better than tile?) is shown, I guess there are some reusability issues in the code.

enter image description here

19
  • 10
    -1 (Not really) for not using freehand red circles¬
    – Paulie_D
    May 15, 2021 at 12:32
  • @Paulie_D, what are freehand red circles??? (And I +1 your comment!)
    – Enlico
    May 15, 2021 at 12:34
  • 4
    Freehand Circles1 , Freehand Circles2
    – 4b0
    May 15, 2021 at 12:47
  • Guess it'll take about 6 to 8 weeks for @Enlico to add freehand circles...
    – 10 Rep
    May 15, 2021 at 15:47
  • @10Rep what does that mean? :D
    – Enlico
    May 15, 2021 at 15:48
  • 1
    @Enlico 6 to 8 weeks meme on meta :)
    – 10 Rep
    May 15, 2021 at 15:49
  • Oh, come on, let's not unfocus from the fact that the site has bugs :P
    – Enlico
    May 15, 2021 at 15:51
  • 1
    The community is upvoting your meta post, so they know that it is actually a bug. The comments are just as a joke :).
    – 10 Rep
    May 15, 2021 at 16:35
  • I didn't get one, ahahah. Anyway, yeah, I'm becoming famous, I believe, ahahah.
    – Enlico
    May 15, 2021 at 16:37
  • they are missing overflow:hidden there May 15, 2021 at 18:35
  • 1
    No, why should they cut the text out?
    – Enlico
    May 15, 2021 at 18:37
  • so what should they do? (1) cut the text (2) shrink the date (3) keep the overflow (4) rework the whole page to have more space for some specific tags May 15, 2021 at 18:39
  • More space. Space to accommodate the longest tag.
    – Enlico
    May 15, 2021 at 18:40
  • @TemaniAfif - removing 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)? May 15, 2021 at 18:41
  • 1
    @OlegValter removing the max-width will get you the (2) shrink the date: i.stack.imgur.com/FDnoF.png May 15, 2021 at 19:15

1 Answer 1

4

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):

max-width and flex-wrap solution screenshot


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):

preview of the script

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));

Not the answer you're looking for? Browse other questions tagged .