[BUG] - DateInput problems displaying long descriptions

[rettimo]

NextUI Version

2.4.5

Describe the bug

The approach to separating input and help text was chosen incorrectly. Since it is fixed and does not react to overflow. Thus, help text that has two or more lines will be displayed under the bottom block.

In fact, all inputs with label have the same problem (margin top problem)

Your Example Website or App

No response

Steps to Reproduce the Bug or Issue

1. Use DateInput with the long description (two or more lines)
2. Expect problems displaying long descriptions

Expected behavior

The help text has its own styles to separate from the main block. How this is done in the Input component.

Input:

Screenshots or Videos

No response

Operating System Version

macOs Sonoma 14.5

Browser

Chrome

[linear]

ENG-1163 [BUG] - DateInput problems displaying long descriptions

[awesome-pro]

@rettimo can you explain more about what you want
it seems fine to me

[rettimo]

If the input width is small and the description text is longer than one line, you will be able to see a bug. For example, if the description takes up 2-3 lines, and there is another element under this input, the description will overlap the bottom block.
I also show an example of this behavior:

[awesome-pro]

@rettimo I tried even with gap-0 in div, but things look fine to me
Kindly provide reproducible environment, it will be better

<div>
      <DateInput
        {...args}
        description="Please enter your birth date Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem beatae libero sint quisquam quasi eos? Animi eum libero labore. Optio. Please enter your birth date Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quidem beatae libero sint quisquam quasi eos? Animi eum libero labore. Optio."
        name="date"
      />
      <h1>
        Please enter your birth date Lorem ipsum dolor sit amet consectetur, adipisicing elit.
        Quidem beatae libero sint quisquam quasi eos? Animi eum liber
      </h1>
      <button className={button({className: "max-w-fit"})} type="submit">
        Submit
      </button>
    </div>

[rettimo]

Code example