Unscoped selector .menu-item-title breaks OpenAPI ReDoc navigation
>>> [!note] Migrated issue
<!-- Drupal.org comment -->
<!-- Migrated from issue #3274506. -->
Reported by: [kmbremner](https://www.drupal.org/user/2954253)
Related to !128
>>>
<h3 id="summary-problem-motivation">Problem/Motivation</h3>
<p>Menu items in OpenAPI Redoc interface have no label with Gin theme enabled.</p>
<p>This issue happens with "Horizontal, Modern Toolbar" and "Legacy, Classic Drupal Toolbar" but NOT "Sidebar, Vertical Toolbar (Default)".</p>
<p>As <code>.menu-item-title</code> selector is used unscoped in <strong>horizontal_toolbar.css</strong> it causes elements with the same class within the page body to be set to <code>display: none !important</code>. Redoc happens to use the same class names.</p>
<h4 id="summary-steps-reproduce">Steps to reproduce</h4>
<p>* Set Gin as admin theme<br>
* Set Toolbar to "Horizontal, Modern Toolbar"<br>
* Install OpenAPI Redoc modules:<br>
<code>composer require 'drupal/openapi_ui_redoc:^1.0@RC' 'drupal/openapi_jsonapi:^3.0' 'drupal/openapi:^2.0'</code><br>
* Enable OpenAPI Redoc modules (and core JSON:API) :<br>
<code>drush en openapi_ui_redoc openapi_jsonapi openapi jsonapi</code><br>
* Visit /admin/config/services/openapi/redoc/jsonapi<br>
Items in Redoc left menu have no label displaying</p>
<p><img src="https://www.drupal.org/files/issues/2022-04-10/3274506-with-curent-selector_0.png" alt="Screenshot of menu with missing labels"></p>
<h3 id="summary-proposed-resolution">Proposed resolution</h3>
<p>Add scope to <code>.menu-item-title</code> selector in <strong>horizontal_toolbar.css</strong>. E.g use <code>.toolbar .menu-item-title</code> instead.</p>
<h3 id="summary-remaining-tasks">Remaining tasks</h3>
<h3 id="summary-ui-changes">User interface changes</h3>
<h3 id="summary-api-changes">API changes</h3>
<h3 id="summary-data-model-changes">Data model changes</h3>
issue