From aa6ed9963704a20a1e88a2f179391f4b4789fb37 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Wed, 18 Sep 2024 14:12:06 +0300
Subject: [PATCH] Add wrapping for smaller screens

---
 apps/showcase/doc/floatlabel/InvalidDoc.vue   | 6 +++---
 apps/showcase/doc/inputmask/FloatLabelDoc.vue | 6 +++---
 apps/showcase/doc/inputtext/FloatLabelDoc.vue | 6 +++---
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/apps/showcase/doc/floatlabel/InvalidDoc.vue b/apps/showcase/doc/floatlabel/InvalidDoc.vue
index 1caec97c9..0ac618180 100644
--- a/apps/showcase/doc/floatlabel/InvalidDoc.vue
+++ b/apps/showcase/doc/floatlabel/InvalidDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>When the form element is invalid, the label is also highlighted.</p>
     </DocSectionText>
-    <div class="card flex justify-center items-end gap-4">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
             <InputText id="value1" v-model="value1" autocomplete="off" :invalid="!value1" />
             <label for="value1">Username</label>
@@ -47,7 +47,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center items-end gap-4">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
             <InputText id="value1" v-model="value1" :invalid="!value1" />
             <label for="value1">Username</label>
@@ -80,7 +80,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center items-end gap-4">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
             <InputText id="value1" v-model="value1" :invalid="!value1" />
             <label for="value1">Username</label>
diff --git a/apps/showcase/doc/inputmask/FloatLabelDoc.vue b/apps/showcase/doc/inputmask/FloatLabelDoc.vue
index 66078df52..e0e6a8afc 100644
--- a/apps/showcase/doc/inputmask/FloatLabelDoc.vue
+++ b/apps/showcase/doc/inputmask/FloatLabelDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <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 items-end gap-4">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
             <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
             <label for="over_label">Over Label</label>
@@ -47,7 +47,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center items-end gap-4">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
             <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
             <label for="over_label">Over Label</label>
@@ -80,7 +80,7 @@ export default {
 `,
                 composition: `
 <template>
-    <div class="card flex justify-center items-end gap-4">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
             <InputMask id="over_label" v-model="value1" mask="999-99-9999" />
             <label for="over_label">Over Label</label>
diff --git a/apps/showcase/doc/inputtext/FloatLabelDoc.vue b/apps/showcase/doc/inputtext/FloatLabelDoc.vue
index 12a357177..00b6e3e2f 100644
--- a/apps/showcase/doc/inputtext/FloatLabelDoc.vue
+++ b/apps/showcase/doc/inputtext/FloatLabelDoc.vue
@@ -2,7 +2,7 @@
     <DocSectionText v-bind="$attrs">
         <p>FloatLabel visually integrates a label with its form element. Visit <PrimeVueNuxtLink to="/floatlabel">FloatLabel</PrimeVueNuxtLink> documentation for more information.</p>
     </DocSectionText>
-    <div class="card flex justify-center items-end gap-4">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
             <InputText id="over_label" v-model="value1" autocomplete="off" />
             <label for="over_label">Over Label</label>
@@ -47,7 +47,7 @@ export default {
 `,
                 options: `
 <template>
-    <div class="card flex justify-center items-end gap-4">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
             <InputText id="over_label" v-model="value1" />
             <label for="over_label">Over Label</label>
@@ -79,7 +79,7 @@ export default {
 `,
                 composition: `
 <template>
-   <div class="card flex justify-center items-end gap-4">
+    <div class="card flex flex-wrap justify-center items-end gap-4">
         <FloatLabel>
             <InputText id="over_label" v-model="value1" />
             <label for="over_label">Over Label</label>