From de770d5a3b5f5e4109311b7b7076b93f65544d50 Mon Sep 17 00:00:00 2001
From: Mert Sincan <sincan.mert@gmail.com>
Date: Fri, 22 Nov 2024 12:29:36 +0000
Subject: [PATCH] Refactor #6826 - For ScrollPanel

---
 packages/primevue/src/scrollpanel/ScrollPanel.vue           | 2 +-
 packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js | 3 ++-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/primevue/src/scrollpanel/ScrollPanel.vue b/packages/primevue/src/scrollpanel/ScrollPanel.vue
index 09bc9836c..fe10c8b2f 100644
--- a/packages/primevue/src/scrollpanel/ScrollPanel.vue
+++ b/packages/primevue/src/scrollpanel/ScrollPanel.vue
@@ -138,7 +138,7 @@ export default {
                             this.$refs.xBar.setAttribute('data-p-scrollpanel-hidden', 'false');
                             !this.isUnstyled && removeClass(this.$refs.xBar, 'p-scrollpanel-hidden');
 
-                            this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; left:' + (this.$refs.content.scrollLeft / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
+                            this.$refs.xBar.style.cssText = 'width:' + Math.max(this.scrollXRatio * 100, 10) + '%; inset-inline-start:' + (Math.abs(this.$refs.content.scrollLeft) / totalWidth) * 100 + '%;bottom:' + bottom + 'px;';
                         }
                     }
 
diff --git a/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js b/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js
index a7252ba70..64c6324ee 100644
--- a/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js
+++ b/packages/primevue/src/scrollpanel/style/ScrollPanelStyle.js
@@ -13,7 +13,8 @@ const theme = ({ dt }) => `
 .p-scrollpanel-content {
     height: calc(100% + calc(2 * ${dt('scrollpanel.bar.size')}));
     width: calc(100% + calc(2 * ${dt('scrollpanel.bar.size')}));
-    padding: 0 calc(2 * ${dt('scrollpanel.bar.size')}) calc(2 * ${dt('scrollpanel.bar.size')}) 0;
+    padding-inline: 0 calc(2 * ${dt('scrollpanel.bar.size')});
+    padding-block: 0 calc(2 * ${dt('scrollpanel.bar.size')});
     position: relative;
     overflow: auto;
     box-sizing: border-box;