From fbec81fa8dbf56307852f8f22fc5798f6b14ee3b Mon Sep 17 00:00:00 2001
From: tugcekucukoglu <tugcekucukoglu.860@gmail.com>
Date: Thu, 16 Nov 2023 17:00:19 +0300
Subject: [PATCH] Fixed #4458 - Paginator: Responsive Templating showing
 multiple layouts on break points

---
 components/lib/paginator/Paginator.vue | 34 ++++++++++++++++----------
 1 file changed, 21 insertions(+), 13 deletions(-)

diff --git a/components/lib/paginator/Paginator.vue b/components/lib/paginator/Paginator.vue
index 43e4789eb..4c66f4400 100755
--- a/components/lib/paginator/Paginator.vue
+++ b/components/lib/paginator/Paginator.vue
@@ -160,7 +160,15 @@ export default {
                 });
 
                 for (const [index, [key]] of Object.entries(Object.entries(sortedBreakpoints))) {
-                    const minValue = Object.entries(sortedBreakpoints)[index - 1] ? `and (min-width:${Object.keys(sortedBreakpoints)[index - 1]})` : '';
+                    let minValue, calculatedMinValue;
+
+                    if (key !== 'default' && typeof Object.keys(sortedBreakpoints)[index - 1] === 'string') {
+                        calculatedMinValue = Number(Object.keys(sortedBreakpoints)[index - 1].slice(0, -2)) + 1 + 'px';
+                    } else {
+                        calculatedMinValue = Object.keys(sortedBreakpoints)[index - 1];
+                    }
+
+                    minValue = Object.entries(sortedBreakpoints)[index - 1] ? `and (min-width:${calculatedMinValue})` : '';
 
                     if (key === 'default') {
                         innerHTML += `
@@ -173,18 +181,18 @@ export default {
                         `;
                     } else {
                         innerHTML += `
-                        .paginator[${this.attributeSelector}], .p-paginator-${key} {
-                                display: none !important;
-                            }
-                        @media screen ${minValue} and (max-width: ${key}) {
-                            .paginator[${this.attributeSelector}], .p-paginator-${key} {
-                                display: flex !important;
-                            }
-                            .paginator[${this.attributeSelector}],
-                            .p-paginator-default{
-                                display: none !important;
-                            }
-                        }
+.paginator[${this.attributeSelector}], .p-paginator-${key} {
+    display: none !important;
+}
+@media screen ${minValue} and (max-width: ${key}) {
+    .paginator[${this.attributeSelector}], .p-paginator-${key} {
+        display: flex !important;
+    }
+    .paginator[${this.attributeSelector}],
+    .p-paginator-default{
+        display: none !important;
+    }
+}
                     `;
                     }
                 }