>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3372697. --> Reported by: [karlshea](https://www.drupal.org/user/294283) >>> <h3 id="summary-problem-motivation">Problem/Motivation</h3> <p>I'm not sure if this is the right issue queue or not so maybe it needs to move to core, but since Gin is doing a lot of overrides I thought I'd try here first.</p> <p>The close button on dialogs is invisible inside Layout Builder because the <code>--jui-dialog-close-button-size</code> (and also <code>--jui-dialog-close-button-border-radius</code>) CSS variable from Claro isn't making it into the frontend theme, so its width and height are zero.</p> <p>This was not an issue in Drupal 9 because its version of Claro didn't use CSS vars for the close button height/width.</p> <h4 id="summary-steps-reproduce">Steps to reproduce</h4> <p>Use Layout Builder to edit a node with Layout Builder iFrame Modal enabled, then add or edit a block which opens up a modal using Dialog.</p> <h3 id="summary-proposed-resolution">Proposed resolution</h3> <p>Default the values in CSS? Or somehow get Claro's vars into the frontend theme?</p> <h3 id="summary-workaround">Workaround</h3> <p>Add this to your frontend theme:</p> <pre>:root {<br>&nbsp; // Claro vars don't make it to Layout Builder.<br>&nbsp; --jui-dialog-close-button-size: 2em;<br>&nbsp; --jui-dialog-close-button-border-radius: 50%;<br>}</pre><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>