Polish Workbench UI
>>> [!note] Migrated issue <!-- Drupal.org comment --> <!-- Migrated from issue #3580394. --> Reported by: [balintbrews](https://www.drupal.org/user/613760) Related to !766 >>> <h3>Overview</h3> <p>Canvas Workbench (working name, see <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3576829" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3576829</a></span>) is a local developer tool, similar to Storybook, but focused on Drupal Canvas Code Components and Canvas pages. The initial version was introduced in <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3573867" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3573867</a></span>, then <span class="drupalorg-gitlab-issue-link drupalorg-gitlab-link-wrapper"><a href="https://git.drupalcode.org/project/canvas/-/work_items/3579801" class="drupalorg-gitlab-link">https://git.drupalcode.org/project/canvas/-/work_items/3579801</a></span> took it further. Now it's time to clean up the UI.</p> <h3>Proposed resolution</h3> <ul> <li>Remove "Reload frame" button</li> <li>Clean up header, display path to component/page</li> <li>Use tabs for mocks instead of buttons</li> <li>Support dark mode via a settings menu</li> <li>Clean up preview layout</li> <li>Show preview render errors inline</li> <li>Clean up sidebar, show pages first</li> <li>Remove loading text</li> <li>Show warnings as toasts</li> </ul> <h3>User interface changes</h3> <p><img src="https://www.drupal.org/files/issues/2026-03-19/workbench-ui-polish.png" alt="Canvas Workbench UI with a warning"></p>
issue