Skip to content

39 · Hero title clips event names with long words
Project Event Horizon (theme of the Summit site template)
Component Components (site-hero-25)
Category Bug report
Priority Normal
Status Reported upstream as #3613749

Problem/Motivation

The front page shows the event name (event_details.field_event_name) as .site-hero__title in components/site-hero-25. The title is uppercase with font-size: clamp(4rem, 2.5rem + 10vw, 13rem) and has no hyphenation or word breaking. Any word wider than the grid column is cut off.

The sample name "Example Drupal Camp" just fits. Its German translation "Beispiel-Drupal-Camp" shows as "BEISPI…" on a 1440 px wide screen. The same happens with a real event name that contains a long word, in any language – site builders are expected to replace the sample name with their own.

Steps to reproduce

  1. Install Drupal CMS with the Summit site template.
  2. Change the event name to one with a long word, e.g. "Frontendkonferenz 2027", or install in German.
  3. Open the front page at 1440 px: the long word is cut off.

Proposed resolution

Let long words break or shrink:

.site-hero__title[class] {
  overflow-wrap: anywhere;
  hyphens: auto;
}

Or size the font relative to the hero container (cqi) instead of the viewport, so the longest word always fits.

Additional information

Found with Event Horizon 2.0.0 on Drupal CMS 2.2 (September 2026).

Copy to drupal.org

Issue title:

Hero title clips event names with long words

Issue summary (paste it into the "Issue summary" field; project, component, category and priority are in the table above):

<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>The front page shows the event name (<code>event_details.field_event_name</code>) as <code>.site-hero__title</code> in <code>components/site-hero-25</code>. The title is uppercase with <code>font-size: clamp(4rem, 2.5rem + 10vw, 13rem)</code> and has no hyphenation or word breaking. Any word wider than the grid column is cut off.</p>
<p>The sample name "Example Drupal Camp" just fits. Its German translation "Beispiel-Drupal-Camp" shows as "BEISPI…" on a 1440 px wide screen. The same happens with a real event name that contains a long word, in any language – site builders are expected to replace the sample name with their own.</p>
<h3 id="summary-steps-reproduce">Steps to reproduce</h3>
<ol>
<li>Install Drupal CMS with the Summit site template.</li>
<li>Change the event name to one with a long word, e.g. "Frontendkonferenz 2027", or install in German.</li>
<li>Open the front page at 1440 px: the long word is cut off.</li>
</ol>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<p>Let long words break or shrink:</p>
<code>.site-hero__title[class] {
  overflow-wrap: anywhere;
  hyphens: auto;
}</code>
<p>Or size the font relative to the hero container (<code>cqi</code>) instead of the viewport, so the longest word always fits.</p>
<h3>Additional information</h3>
<p>Found with Event Horizon 2.0.0 on Drupal CMS 2.2 (September 2026).</p>