Header is getting cutoff on narrow (mobile) viewports

[jvgaultney]

We may not be able to use the CSS suggested as is, and we'd want to carefully restrict it to certain viewports, but this is worth fixing.

V

-------- Forwarded Message --------

Subject:	WSTech Resources Page header
Tue, 10 Mar 2026 10:18:57 -0700
James Post

As I was looking at the new WSTech Resources page (to see how the mobile menu operates), I noticed that the title disappears under the other elements in mobile view:

I think it would be helpful to have the full title visible, and some simple CSS changes could help this work:

Here's the relevant HTML:

<a href="/" class="site-title sl-flex astro-m46x6ez3">
  <img class="astro-m46x6ez3" alt="" src="/_astro/logo.CbG0-mBp.svg" width="1595" height="950">
  <span class="astro-m46x6ez3" translate="no"> Writing Systems Technical Resources </span> </a>

And the CSS that made it work:

span:where(.astro-m46x6ez3) {
    white-space: normal;
    display: block;
    overflow: visible;
    line-height: 1.5rem;
}

If the text needs to shrink for anything narrower, "clamp" could also be used.