Spin height change during rotation will cause the browser display scrollbars

[bbaa-bbaa]

TuSimple/naive-ui version (版本)

2.35.0

Vue version (Vue 版本)

3.3.6

Browser and its version (浏览器及其版本)

Chrome(118.0.5993.88)

System and its version (系统及其版本)

Linux 6.5.7 (Archlinux)

Reappearance steps (重现步骤)

<n-layout>
    <n-layout-content content-style="width:200px">
      <n-card title="Spin overflow">
        <n-spin :show="true">
          <template></template>
        </n-spin>
      </n-card>
    </n-layout-content>
  </n-layout>

Expected results (期望的结果)

不会出现滚动条

Actual results (实际的结果)

https://codesandbox.io/p/sandbox/vite-skxwpj

Remarks (补充说明)

Spin 旋转时元素高度改变会使 n-layout 出现滚动条 是否可以给 n-spin-content 添加一个 min-height (根号二倍 Spin 大小？) 来避免这个问题

[jahnli]

Provide a based on CodeSandbox or stackblitz [Minimal, Reproducible Example] (https://stackoverflow.com/help/minimal-reproducible-example)

[bbaa-bbaa]

Provide a based on CodeSandbox or stackblitz [Minimal, Reproducible Example] (https://stackoverflow.com/help/minimal-reproducible-example)

https://codesandbox.io/p/sandbox/vite-skxwpj

[jahnli]

It looks fine, because the loading icon is a rectangle, when rotated to four corners, because the height is too low, the four corners are convex, so there will be a scroll bar, you can adjust the height or overflow

[jahnli]

[bbaa-bbaa]

We could perhaps add a min-height (sqrt(2) times of element height) to n-spin to avoid this issue.

[jahnli]

Welcome PR :tada: