Demo update for overlay panel

Author: cagataycivici

src/views/overlaypanel/OverlayPanelDoc.vue

@@ -177,7 +177,7 @@ toggle(event) {
 <pre v-code><code><template v-pre>
 &lt;Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" /&gt;
 
-&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px"&gt;
+&lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px" :breakpoints="{'960px': '75vw'}"&gt;
     &lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect" responsiveLayout="scroll"&gt;
         &lt;Column field="name" header="Name" sortable style="width: 50%"&gt;&lt;/Column&gt;
         &lt;Column header="Image" style="width: 20%"&gt;
@@ -246,7 +246,7 @@ export default {
             <div class="card">
                 <Button type="button" icon="pi pi-search" :label="selectedProduct ? selectedProduct.name : 'Select a Product'" @click="toggle" aria:haspopup="true" aria-controls="overlay_panel" />
 
-                <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px">
+                <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" id="overlay_panel" style="width: 450px" :breakpoints="{'960px': '75vw'}">
                     <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @rowSelect="onProductSelect">
                         <Column field="name" header="Name" sortable style="width: 50%"></Column>
                         <Column header="Image"style="width: 20%">

src/views/responsive/ResponsiveDemo.vue

@@ -372,7 +372,7 @@
                     <div class="card p-fluid">
                         <h5>Overlay Panel</h5>
                         <Button type="button" label="Choose" @click="toggle" icon="pi pi-search" />
-                        <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px">
+                        <OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px" :breakpoints="{'960px':'75vw'}">
                             <DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect">
                                 <Column field="name" header="Name" sortable></Column>
                                 <Column header="Image">
@@ -884,7 +884,7 @@
         &lt;div class="card p-fluid"&gt;
             &lt;h5&gt;Overlay Panel&lt;/h5&gt;
             &lt;Button type="button" label="Choose" @click="toggle" icon="pi pi-search" /&gt;
-            &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px"&gt;
+            &lt;OverlayPanel ref="op" appendTo="body" :showCloseIcon="true" style="width: 450px" :breakpoints="{'960px':'75vw'}"&gt;
                 &lt;DataTable :value="products" v-model:selection="selectedProduct" selectionMode="single" :paginator="true" :rows="5" @row-select="onProductSelect"&gt;
                     &lt;Column field="name" header="Name" sortable&gt;&lt;/Column&gt;
                     &lt;Column header="Image"&gt;