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