Calendar: Panel width too small with default Tailwind

[zawasp]

Describe the bug

Calendar panel is too small.

Reproducer

https://stackblitz.com/edit/ewd4me?file=src%2FApp.jsx

PrimeReact version

10.3.3

React version

18.x

Language

TypeScript

Build / Runtime

Next.js

Browser(s)

No response

Steps to reproduce the behavior

Added simple Calendar with default Tailwind styling.

Expected behavior

Panel extends the full width of its children

[melloware]

I simplified your reproducer: https://stackblitz.com/edit/ewd4me?file=src%2FApp.jsx Definitely an issue I can't quite tell why though or what TailWind CSS is causing that

[melloware]

I see the issue data-pc-section="panel" is calculating to short of a width.

[melloware]

Looks like a bug with width calculation that is not happening on styled mode.

            if (!props.touchUI && overlayRef && overlayRef.current && inputRef && inputRef.current && !appendDisabled()) {
                let inputWidth = DomHandler.getOuterWidth(inputRef.current);

                // #5435 must have reasonable width if input is too small
                if (inputWidth < 220) {
                    inputWidth = 220;
                }

                if (props.view === 'date') {
                    overlayRef.current.style.width = DomHandler.getOuterWidth(overlayRef.current) + 'px';
                    overlayRef.current.style.minWidth = inputWidth + 'px';
                } else {
                    overlayRef.current.style.minWidth = inputWidth + 'px';
                    overlayRef.current.style.width = inputWidth + 'px';
                }
            }

[zawasp]

Any updates?

[zawasp]

@melloware thanks, however this doesn't seem to be fixed yet:
https://stackblitz.com/edit/stackblitz-starters-36rdqj

Please reopen.

[melloware]

Weird if you inspect the CSS and uncheck min-width it works but that is is exactly what my PR did. Do not add minWidth in unstyled mode.

So I have no idea where that min-width is coming from?

[zawasp]

Could be from here:
https://github.com/primefaces/primereact/blob/master/components/lib/passthrough/tailwind/index.js#L1150

I replaced min-w-[350px] with min-w-full and it looks ok. See here:
https://stackblitz.com/edit/stackblitz-starters-36rdqj?file=app%2Flayout.tsx%3AL63

[melloware]

@zawasp can you submit a PR and update the doc page as well like you did for the separator?

[melloware]

@zawasp according to @vaelu this is still not working in 10.5.2?

[vaelu]

@melloware *10.5.1. Version 10.5.2 is not out yet, or is it?

[melloware]

10.5.1