Skip to content

38 · Google Translate component defaults to English and clips longer labels
Project Morphos (theme)
Component Components (google_translate)
Category Bug report
Priority Normal
Status Draft, not filed on drupal.org yet

Problem/Motivation

Two problems in components/google_translate (Morphos 1.3.2):

  1. The page language defaults to English. The language prop has default: 'en', the template falls back to language|default('en') and the JavaScript to el.dataset.language || 'en'. The value becomes Google's pageLanguage. On a site in any other language, Google treats the page as English and offers to translate it into the language it is already in.
  2. Longer labels are clipped. google_translate.css limits the select to max-w-[180px] and reserves pl-7 on the left for the icon. Google translates the select's label into the visitor's language; the German "Sprache auswählen" is cut to "Sprache auswähle".

Steps to reproduce

  1. Install Drupal CMS in German with a site template that uses the component, e.g. Convivial Gov.
  2. Open the front page: the selector reads "Sprache auswähle", and Google's bar says "Deaktivieren für: Englisch".

Proposed resolution

  1. Default to the language of the page instead of English: drop the 'en' defaults and use document.documentElement.lang in the JavaScript when no language is given.
  2. Let the select grow with its label, e.g. replace max-w-[180px] with max-w-none or a width in ch, or allow the text to wrap.

Additional information

Related: Convivial Gov sets the input to en explicitly (report #37). Found on Drupal CMS 2.2 (September 2026).

Copy to drupal.org

Issue title:

Google Translate component defaults to English and clips longer labels

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>Two problems in <code>components/google_translate</code> (Morphos 1.3.2):</p>
<ol>
<li><strong>The page language defaults to English.</strong> The <code>language</code> prop has <code>default: 'en'</code>, the template falls back to <code>language|default('en')</code> and the JavaScript to <code>el.dataset.language || 'en'</code>. The value becomes Google's <code>pageLanguage</code>. On a site in any other language, Google treats the page as English and offers to translate it into the language it is already in.</li>
<li><strong>Longer labels are clipped.</strong> <code>google_translate.css</code> limits the select to <code>max-w-[180px]</code> and reserves <code>pl-7</code> on the left for the icon. Google translates the select's label into the visitor's language; the German "Sprache auswählen" is cut to "Sprache auswähle".</li>
</ol>
<h3 id="summary-steps-reproduce">Steps to reproduce</h3>
<ol>
<li>Install Drupal CMS in German with a site template that uses the component, e.g. Convivial Gov.</li>
<li>Open the front page: the selector reads "Sprache auswähle", and Google's bar says "Deaktivieren für: Englisch".</li>
</ol>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<ol>
<li>Default to the language of the page instead of English: drop the <code>'en'</code> defaults and use <code>document.documentElement.lang</code> in the JavaScript when no language is given.</li>
<li>Let the select grow with its label, e.g. replace <code>max-w-[180px]</code> with <code>max-w-none</code> or a width in <code>ch</code>, or allow the text to wrap.</li>
</ol>
<h3>Additional information</h3>
<p>Related: Convivial Gov sets the input to <code>en</code> explicitly (report #37). Found on Drupal CMS 2.2 (September 2026).</p>