WIP: text link, icon box and icon list element improvements

Bugs
1

Browser: Chrome 127.0.6533.73
OS: macOS / Windows / Linux / etc.

Hi,

Not sure if these are bugs or normal behavior…

1- If we consider a fixed width and height in the link text element, if the text is long and there is not enough space, the icon will lose its desired width and height and will be compressed (screenshot below). But we don’t have this problem in the icon box element.

2- If we consider a fixed width and height for the Icon box element, the icon will not be placed in the center (screenshot below). This works well in the text link element.

Screenshot
Screenshot1297Ă—644 40.3 KB

3- In the icon element of the list, if we have at least two items and the text is a bit long, the text will automatically break and continue on the second line. While the element has a lot of space to maintain a line. This problem exists when the direction of the icon list items is horizontal.

2
2837Ă—315 4.79 KB

thanks

2

Hi Hosein,
Thanks for your report(s) :v:

  1. Flex items can shrink by default (this is a flex default). However, preventing the icon from shrinking might be a good idea.
%root% .icon {
  flex-shrink: 0; 
}
  1. This solves the “problem”. Possibly also a potential default.
%root% .icon {
  align-items: center;
  justify-content: center;
}
  1. The flex-basis is currently 0. If you change it to auto, it’ll probably behave as expected.
%root% li {
  flex-basis: auto;
}

Best regards,
timmse

1 Like