Decrease Size of Primevue Calendar

Question

I am using PrimeVue 3.15 in Vue 3.2 PrimeVue popup Calendar takes its input width.(Image 1) How Can I make it smaller without decreasing the size of the input as in the second image? I tried all the props related to classes and styles but in vain.

<Calendar
   id="paid-on"
   dateFormat="yy-mm-dd"
   placeholder="yy-mm-dd"
   v-model="v$.paid_on.$model"
   :manualInput="false"
   :showIcon="true"
   @date-select="onDateChanged"
   />

Answer 1

Adding this property solved my problem

panelClass="min-w-min w-10rem"

Knowing that min-w-min => min-width: min-content; and w-10rem => width: 10rem; as per to primeflex.