AutoCrud with noNewButton renders wrong when nothing is selected

[Legioth]

Describe the bug

An AutoCrud with noNewButton loses the outer border and reduces the width of the grid when no item is selected.

With an item selected

Without selection

Expected-behavior

Expected that rendering remains consistent

Reproduction

return (
  <>
    <VerticalLayout className="p-m gap-m">
      <AutoCrud service={HelloWorldService} noNewButton model={PersonModel} />
    </VerticalLayout>
  </>
);

System Info

Vaadin 24.7.0.beta2

[Legioth]

The narrower grid looks similar to what's reported in #3323 even tough additionally the border is also missing.

[cromoteca]

Can also happen with the New Button enabled, it depends on the window size:

<section className="flex flex-col p-m gap-m">
  <AutoCrud service={VetService} model={VetModel} noNewButton />
</section>

works fine instead, with or without "New" button, no matter the window size.

[Legioth]

Can also happen with the New Button enabled, it depends on the window size

Yes. That what #3323 covers. But there's one key difference: the window size case doesn't also remove the border. We can treat the width issues as part of #3323 and focus only on the border in this issue.

There's no issue with the width in a layout context where the AutoCRUD is stretched to fit all available space but it becomes visible if using its natural width. This is maybe not a realistic "real" use case but it easily happens when you start using it and gives a broken impression.

[cromoteca]

Created #3335. It makes things more consistent.