Calendar: Panel not resizing

[lagroms]

Describe the bug

When having a 100% input, the panel is also set to 100%. However if I want to set the panel width to a specific value (320px for example) by using the panelStyle prop or by using a css class, nothing happens (see below reproduction link).

The panel width is calculated based on the inputWidth, but there's no way of setting it manually:

if (!props.touchUI && overlayRef && overlayRef.current && inputRef && inputRef.current && !appendDisabled()) {
      var inputWidth = utils.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 = utils.DomHandler.getOuterWidth(overlayRef.current) + 'px';
      } else {
        overlayRef.current.style.width = inputWidth + 'px';
      }

      // #5830 Tailwind does not need a min width it breaks the styling
      if (!isUnstyled()) {
        overlayRef.current.style.minWidth = inputWidth + 'px';
      }
    }

Reproducer

https://stackblitz.com/edit/stackblitz-starters-zl7tsp?file=src%2FApp.js

PrimeReact version

10.6.2

React version

18.x

Language

ES6

Build / Runtime

Create React App (CRA)

Browser(s)

No response

Steps to reproduce the behavior

No response

Expected behavior

No response

[melloware]

Can you check the PrimeVue source to see what it is doing?

[lagroms]

Seems like it's the same on PrimeVue

[Khalil-Khaled]

Hello, it is the same on PrimeNG too.

The method alignOverlay is overriding the width and min-width properties provided in panelStyle. For panelStyleClass, you need to add !important to these properties.