fix: Disable details popup background scroll

Author: fathima-mirza

example/src/styles/RowDetailsPopup.css

@@ -5,7 +5,6 @@
   left: 0;
   right: 0;
   bottom: 0;
-  z-index: 1000;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -23,8 +22,10 @@
   max-width: 500px;
   width: 90%;
   max-height: 80vh;
-  overflow: hidden;
+  overflow: hidden; /* Changed to hidden to prevent overall scroll */
   font-family: 'DM Sans', sans-serif;
+  display: flex;
+  flex-direction: column;
 }
 
 .row-details-popup-header {
@@ -33,6 +34,7 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
+  flex-shrink: 0; /* Prevent header from shrinking */
 }
 
 .row-details-popup-title {
@@ -55,8 +57,9 @@
 
 .row-details-popup-content {
   padding: 1.5rem;
-  max-height: 60vh;
-  overflow-y: auto;
+  flex: 1; /* Take remaining space */
+  overflow-y: auto; /* Enable scroll only for content */
+  min-height: 0; /* Allow content to shrink */
 }
 
 .row-details-popup-footer {
@@ -65,6 +68,7 @@
   display: flex;
   justify-content: flex-end;
   gap: 0.75rem;
+  flex-shrink: 0; /* Prevent footer from shrinking */
 }
 
 .row-details-popup-close-action {
@@ -180,5 +184,68 @@
 
 /* Disable background scroll when popup is open */
 body.popup-open {
-  overflow: hidden;
+  overflow: hidden !important;
+  position: fixed !important;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+/* Prevent scrolling on all table containers when popup is open */
+body.popup-open .table-wrapper,
+body.popup-open .table-container,
+body.popup-open .app-content,
+body.popup-open .app {
+  overflow: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Override the table's !important overflow rules when popup is open */
+body.popup-open .table-responsive-container {
+  overflow: hidden !important;
+  overflow-x: hidden !important;
+  overflow-y: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Override all media query rules for table scrolling when popup is open */
+body.popup-open .table-responsive-container,
+body.popup-open .table-responsive-container::-webkit-scrollbar {
+  overflow: hidden !important;
+  overflow-x: hidden !important;
+  overflow-y: hidden !important;
+  pointer-events: none !important;
+}
+
+/* Override the specific media query rules that use !important */
+@media (max-width: 1199px) {
+  body.popup-open .table-responsive-container {
+    overflow: hidden !important;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+    pointer-events: none !important;
+  }
+}
+
+@media (max-width: 768px) {
+  body.popup-open .table-responsive-container {
+    overflow: hidden !important;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+    pointer-events: none !important;
+  }
+}
+
+@media (max-width: 480px) {
+  body.popup-open .table-responsive-container {
+    overflow: hidden !important;
+    overflow-x: hidden !important;
+    overflow-y: hidden !important;
+    pointer-events: none !important;
+  }
+}
+
+/* Allow scrolling only within the popup */
+body.popup-open .row-details-popup-overlay,
+body.popup-open .row-details-popup {
+  pointer-events: auto !important;
 }