fix: properly size icons in distribute/align

[barmac]

No description provided.

[marstamm]

Works on demo page 🚀

[nikku]

Is there no other way than hardcoding (to the parent height)?

For me this looks like duplicate magic numbering. We already define the entry height in diagram-js (cf. https://github.com/bpmn-io/diagram-js/blob/develop/assets/diagram-js.css#L512).

[barmac]

Hmm, perhaps we could just use 1.25em here (1em = 16px for that img). We need to set the image size explicitly because otherwise it shrinks.

[barmac]

But then the em value is also a magic number as it uses the line-height / font-size ratio 🙈

[barmac]

Other way would be to use box-sizing: content-box for the entries and not care about app-specific overrides.

[nikku]

Isn't the issue that width: 100% does not mean a thing? I#ll have a look.

[barmac]

<div>
  <style>
    .border { box-sizing: border-box; }
    .content { box-sizing: content-box; }

    .box {
      width:20px; height: 20px; padding: 4px 6px; background-color: aqua;
    }

    .box img {
      height: 100%; width: 100%; display: block; background-color: red;
    }
  </style>
  <div>
    <div class="box border">
      <img>
    </div>
  </div>
  <div>
    <div class="box content">
      <img>
    </div>
  </div>
</div>