[app-layout] The button focus-ring outline is clipped when used in app-layout

[vursen]

Description

Expected outcome

The button focus-ring outline should be fully visible.

Actual outcome

The button focus-ring outline is clipped.

Minimal reproducible example

<script type="module">
  import '@vaadin/app-layout';
  import '@vaadin/app-layout/vaadin-drawer-toggle';
  import '@vaadin/tabs';
  import '@vaadin/button';
</script>

<vaadin-app-layout>
  <vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
  <h1 slot="navbar">MyApp</h1>
  <vaadin-button>Click me!</vaadin-button>
  <vaadin-tabs slot="drawer" orientation="vertical">
    <vaadin-tab><a>Dashboard</a></vaadin-tab>
    <vaadin-tab><a>Orders</a></vaadin-tab>
  </vaadin-tabs>
</vaadin-app-layout>

Environment

• Vaadin 23
• Mac OS Monterey 12.0.1

Browsers affected

• All browsers

[vursen]

A similar issue but in the board component:

• https://github.com/vaadin/web-components/issues/494

[jouni]

My assumption would be that it is caused by this overflow: auto on the [content] element: https://github.com/vaadin/web-components/blob/master/packages/app-layout/src/vaadin-app-layout.js#L149-L152

[jouni]

Seems like the [no-scroll] attribute is not documented at all.

[web-padawan]

Similar issue for vaadin-text-field was closed: https://github.com/vaadin/flow-components/issues/2456#issuecomment-1073568823