优化 日期选择 daterange 类型在移动端的表现

[jerossh]

TuSimple/naive-ui version (版本)

2.34.4

Vue version (Vue 版本)

3.3.4

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

chrome 113

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

安卓11

Node version (Node 版本)

Reappearance link (重现链接)

https://www.naiveui.com/zh-CN/os-theme/components/date-picker#%E9%80%9A%E7%94%A8%E7%9A%84-Props

Reappearance steps (重现步骤)

官方案例上，日期选择器daterange类型移动端表现也不佳

Expected results (期望的结果)

daterange类型会由两个日期面板拼合成，在移动端只能完整看到一个日期面板，另一个只能看一部份。期望两个面板在移动端可以上下排列

Actual results (实际的结果)

移动端

Remarks (补充说明)

[SuperManito]

同求，这个组件当使用时间选择器（不是日期是时间）且使用小屏设备时这个菜单会溢出屏幕，由于不好写复现一直没提issue

[zhoushengdao]

给你们补个图：

[jahnli]

This issue does not have any recent activity. If you are still experiencing similar problems, open a new error, including a minimal copy of the problem

[jmni-cn]

其实 在这里支持一下单面板展示就行了，

export default defineComponent({
  name: 'DateRangePanel',
  props: useDualCalendarProps,
  setup(props) {
    if (__DEV__) {
      watchEffect(() => {
        if (props.actions?.includes('now')) {
          warnOnce(
            'date-picker',
            'The `now` action is not supported for n-date-picker of `daterange` type'
          )
        }
      })
    }
    return useDualCalendar(props, 'daterange')
  },
  render() {
    const { mergedClsPrefix, mergedTheme, shortcuts, onRender, $slots } = this
    onRender?.()

    return (
      <div
        ref="selfRef"
        tabindex={0}
        class={[
          `${mergedClsPrefix}-date-panel`,
          `${mergedClsPrefix}-date-panel--daterange`,
          !this.panel && `${mergedClsPrefix}-date-panel--shadow`,
          this.themeClass
        ]}
        onKeydown={this.handlePanelKeyDown}
        onFocus={this.handlePanelFocus}
      >
        <div
          ref="startDatesElRef"
          class={`${mergedClsPrefix}-date-panel-calendar ${mergedClsPrefix}-date-panel-calendar--start`}