diff --git a/apps/showcase/doc/cascadeselect/BasicDoc.vue b/apps/showcase/doc/cascadeselect/BasicDoc.vue
index 5c42dd695..cb3b96263 100644
--- a/apps/showcase/doc/cascadeselect/BasicDoc.vue
+++ b/apps/showcase/doc/cascadeselect/BasicDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -93,13 +93,13 @@ export default {
             code: {
                 basic: `
 <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
 </template>
 
@@ -191,7 +191,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/DisabledDoc.vue b/apps/showcase/doc/cascadeselect/DisabledDoc.vue
index c78733a85..7807ec8f3 100644
--- a/apps/showcase/doc/cascadeselect/DisabledDoc.vue
+++ b/apps/showcase/doc/cascadeselect/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect disabled placeholder="Disabled" class="w-full sm:w-56" />
+        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<CascadeSelect disabled placeholder="Disabled" class="w-full sm:w-56" />
+<CascadeSelect disabled placeholder="Disabled" class="w-56" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <CascadeSelect disabled placeholder="Disabled" class="w-full sm:w-56" />
+        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
     </div>
 </template>
 
@@ -30,7 +30,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <CascadeSelect disabled placeholder="Disabled" class="w-full sm:w-56" />
+        <CascadeSelect disabled placeholder="Disabled" class="w-56" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/FilledDoc.vue b/apps/showcase/doc/cascadeselect/FilledDoc.vue
index c430c8897..6795889ec 100644
--- a/apps/showcase/doc/cascadeselect/FilledDoc.vue
+++ b/apps/showcase/doc/cascadeselect/FilledDoc.vue
@@ -3,7 +3,7 @@
         <p>Specify the <i>variant</i> property as <i>filled</i> to display the component with a higher visual emphasis than the default <i>outlined</i> style.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+        <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -90,13 +90,13 @@ export default {
             code: {
                 basic: `
 <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
 </template>
 
@@ -188,7 +188,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" variant="filled" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City" />
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue b/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
index 54736da91..809e72b53 100644
--- a/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
+++ b/apps/showcase/doc/cascadeselect/FloatLabelDoc.vue
@@ -3,8 +3,8 @@
         <p>A floating label appears on top of the input field when focused. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <FloatLabel class="w-full sm:w-56">
-            <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" />
+        <FloatLabel>
+            <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
             <label for="cs-city">City</label>
         </FloatLabel>
     </div>
@@ -92,18 +92,18 @@ export default {
             ],
             code: {
                 basic: `
-<FloatLabel class="w-full sm:w-56">
+<FloatLabel>
     <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
-        :optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" />
+        :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
     <label for="cs-city">City</label>
 </FloatLabel>
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <FloatLabel class="w-full sm:w-56">
+        <FloatLabel>
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
-                :optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" />
+                :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
             <label for="cs-city">City</label>
         </FloatLabel>
     </div>
@@ -196,9 +196,9 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <FloatLabel class="w-full sm:w-56">
+        <FloatLabel>
             <CascadeSelect v-model="selectedCity" inputId="cs-city" :options="countries" optionLabel="cname" optionGroupLabel="name"
-                :optionGroupChildren="['states', 'cities']" fluid placeholder="Select a City" />
+                :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City" />
             <label for="cs-city">City</label>
         </FloatLabel>
     </div>
diff --git a/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue b/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
index d59293e6c..9be6b8849 100644
--- a/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
+++ b/apps/showcase/doc/cascadeselect/LoadingStateDoc.vue
@@ -3,7 +3,7 @@
         <p>Loading state can be used <i>loading</i> property.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" />
+        <CascadeSelect loading placeholder="Loading..." class="w-56" />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -14,12 +14,12 @@ export default {
         return {
             code: {
                 basic: `
-<CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" />
+<CascadeSelect loading placeholder="Loading..." class="w-56" />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" />
+        <CascadeSelect loading placeholder="Loading..." class="w-56" />
     </div>
 </template>
 
@@ -30,7 +30,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <CascadeSelect loading placeholder="Loading..." class="w-full sm:w-56" />
+        <CascadeSelect loading placeholder="Loading..." class="w-56" />
     </div>
 </template>
 
diff --git a/apps/showcase/doc/cascadeselect/TemplateDoc.vue b/apps/showcase/doc/cascadeselect/TemplateDoc.vue
index ab369ab83..83f3173d3 100644
--- a/apps/showcase/doc/cascadeselect/TemplateDoc.vue
+++ b/apps/showcase/doc/cascadeselect/TemplateDoc.vue
@@ -6,7 +6,7 @@
         </p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City">
+        <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name" :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
             <template #option="slotProps">
                 <div class="flex items-center">
                     <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="`flag flag-${slotProps.option.code.toLowerCase()} mr-2`" style="width: 18px" />
@@ -105,7 +105,7 @@ export default {
             code: {
                 basic: `
 <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-    :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City">
+    :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
     <template #option="slotProps">
         <div class="flex items-center">
             <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
@@ -123,7 +123,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City">
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
             <template #option="slotProps">
                 <div class="flex items-center">
                     <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
@@ -227,7 +227,7 @@ export default {
 <template>
     <div class="card flex justify-center">
         <CascadeSelect v-model="selectedCity" :options="countries" optionLabel="cname" optionGroupLabel="name"
-            :optionGroupChildren="['states', 'cities']" class="w-full sm:w-56" placeholder="Select a City">
+            :optionGroupChildren="['states', 'cities']" class="w-56" placeholder="Select a City">
             <template #option="slotProps">
                 <div class="flex items-center">
                     <img v-if="slotProps.option.states" :alt="slotProps.option.name" src="https://primefaces.org/cdn/primevue/images/flag/flag_placeholder.png" :class="\`flag flag-\${slotProps.option.code.toLowerCase()} mr-2\`" style="width: 18px"  />
diff --git a/apps/showcase/doc/inputmask/DisabledDoc.vue b/apps/showcase/doc/inputmask/DisabledDoc.vue
index f7b247741..c0cbb1a6f 100644
--- a/apps/showcase/doc/inputmask/DisabledDoc.vue
+++ b/apps/showcase/doc/inputmask/DisabledDoc.vue
@@ -3,7 +3,7 @@
         <p>When <i>disabled</i> is present, the element cannot be edited and focused.</p>
     </DocSectionText>
     <div class="card flex justify-center">
-        <InputMask mask="99-999999" placeholder="99-999999" disabled />
+        <InputMask mask="99-999999" placeholder="Disabled" disabled />
     </div>
     <DocSectionCode :code="code" />
 </template>
@@ -15,12 +15,12 @@ export default {
             value: '',
             code: {
                 basic: `
-<InputMask mask="99-999999" placeholder="99-999999" disabled />
+<InputMask mask="99-999999" placeholder="Disabled" disabled />
 `,
                 options: `
 <template>
     <div class="card flex justify-center">
-        <InputMask mask="99-999999" placeholder="99-999999" disabled />
+        <InputMask mask="99-999999" placeholder="Disabled" disabled />
     </div>
 </template>
 
@@ -38,7 +38,7 @@ export default {
                 composition: `
 <template>
     <div class="card flex justify-center">
-        <InputMask mask="99-999999" placeholder="99-999999" disabled />
+        <InputMask mask="99-999999" placeholder="Disabled" disabled />
     </div>
 </template>