titlebar of box can "stick" out of titlebar in firefox - documentation problem?

[graf0]

Hi,

we have following code:

<div class="box">
  <div class="block titlebar">
    <strong>pike</strong>
  </div>
  <p>
    node is git
    <span class="float:right">
      <a href="#">ssh</a> |
      <a href="/systems/1/nodes/2">→ goto</a>
    </span>
  </p>
</div>

This is how it looks on Edge - as it should:

And this is how it looks on Firefox:

Notice how letter "p" goes just a little bit out of titlebar. There is also more shadow under it.

[graf0]

After adding to head of my page this (copied from missing.style):

<link rel="stylesheet" href="https://fonts.bunny.net/css?family=source-sans-3:400,700|m-plus-code-latin:400,700">

Now it display box titlebar correctly in all browsers.
It seems to be documentation problem - maybe you should add this line to installation instructions?

[dz4k]

not a documentation problem -- missing.css should (within reason) work with any font. this seems to be an issue with the box shadow on the text, i'll look for a solution

[geoffrey-eisenbarth]

When adding the dimensional border variables, the translation of the titlebar as calc(1px + var(--gap)) got set to just var(--gap) and it's causing issues. Need to decide if that 1px is the --border-block-start value or the --border-block-end value.

[geoffrey-eisenbarth]

Possible fixes:

• overflow-y:clip
• Increase titlebar to 1.5rlh and modify box's padding-block-start by .5rlh when it has a titlebar to keep things rhythm-aligned

As an aside, is there a particular reason why .titlebar does not have display: block by default?

[geoffrey-eisenbarth]

Upcoming PR will use overflow-y:clip to address this issue. We are also using the .box:has(.titlebar) selector to remove padding-inline-start and placing a .titlebar { margin-block-end: var(--gap) } rule in there instead of the old .titlebar { translate: 0 calc(0px - var(--gap) } rule.

This means that if you have any markup like

<div class=box>
  <strong class=titlebar>My title</strong>
  Text that's not in a <p>
</div>

you will need to put your text in a <p> to have proper spacing. This is probably best practices for accessibility anyways.