Secondary toolbar menu goes off screen
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3264657. --> Reported by: [finex](https://www.drupal.org/user/40413) Related to !98 >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>Some secondary toolbar menus goes off-screen.</p> <p><img src="https://www.drupal.org/files/issues/2022-02-16/secondary%20menu%20off-screen.png" alt="menu cutted"></p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Open all secondary menu on the left.</p> <p>I propose the following change to the toolbar_meta.scss:</p> <pre>diff --git a/styles/components/toolbar_meta.scss b/styles/components/toolbar_meta.scss<br>index f005d3f..81c0ad5 100644<br>--- a/styles/components/toolbar_meta.scss<br>+++ b/styles/components/toolbar_meta.scss<br>@@ -246,11 +246,12 @@<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .toolbar-tray {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; position: absolute;<br>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: 0;<br>+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: auto;<br>+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; right: 0;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; width: 170px;<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; background-color: var(--colorGinLayer3Background);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-bottom: 0 none;<br>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: 0 var(--ginBorderMedium) var(--ginBorderMedium) var(--ginBorderMedium);<br>+&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--ginBorderMedium) 0 var(--ginBorderMedium) var(--ginBorderMedium);<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; box-shadow: var(--ginShadowLevel2);<br><br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; a {<br>@@ -293,13 +294,6 @@<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br><br>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; .toolbar-tray {<br>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; left: auto;<br>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; right: 0;<br>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; border-radius: var(--ginBorderMedium) 0 var(--ginBorderMedium) var(--ginBorderMedium);<br>-&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; }<br>-<br>-<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; // If custom user image<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &amp;:not(.has-user-icon) {<br>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; margin-right: -1.333em;</pre><p>What do you think?</p>
issue