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