-
Bug
-
Resolution: Done
-
Blocker
-
None
-
None
-
None
-
2
-
False
-
-
False
-
Testable
-
-
-
25Q3 - Aug/26, 25Q3 - Sep 9
Boot Fedora-Workstation-Live-43-20250814.n.0.x86_64.iso ,launch storage editor, create some(> 3) partitions, left-click the three-points on the right to modify the partition,when you find the delete button is hidden,and you will try to make it shown by scroll the dialog,you will find you will not able to,as a result you will not able to delete some partitions.
Here is the patch cursor offer,
diff --git a/src/components/app.scss b/src/components/app.scss
index 751930c8..bc1a3517 100644
— a/src/components/app.scss
+++ b/src/components/app.scss
@@ -12,6 +12,11 @@ html:not(.index-page) body {
.ct-page-fill
+
+ // Ensure iframe content can scroll properly, especially when containing modal dialogs
+ iframe
}
// Remove the default margin and radius from the main container
diff --git a/src/components/storage/cockpit-storage-integration/CockpitStorageIntegration.jsx b/src/components/storage/cockpit-storage-integration/CockpitStorageIntegration.jsx
index 1d49615f..5d208e69 100644
— a/src/components/storage/cockpit-storage-integration/CockpitStorageIntegration.jsx
+++ b/src/components/storage/cockpit-storage-integration/CockpitStorageIntegration.jsx
@@ -70,7 +70,18 @@ export const useMaybeBackdrop = () => {
useEffect(() => {
const handleStorageEvent = (event) => {
if (event.key === "cockpit_has_modal") {
- setHasDialogOpen(event.newValue === "true");
+ const hasModal = event.newValue === "true";
+ setHasDialogOpen(hasModal);
+
+ // Add or remove has-modal class to iframe to improve modal dialog display
+ const iframe = document.getElementById("cockpit-storage-frame");
+ if (iframe)Unknown macro: {+ if (hasModal) { + iframe.classList.add("has-modal"); + } else { + iframe.classList.remove("has-modal"); + }+ }}
};
diff --git a/src/components/storage/cockpit-storage-integration/CockpitStorageIntegration.scss b/src/components/storage/cockpit-storage-integration/CockpitStorageIntegration.scss
index c862f597..77bc79ee 100644
— a/src/components/storage/cockpit-storage-integration/CockpitStorageIntegration.scss
+++ b/src/components/storage/cockpit-storage-integration/CockpitStorageIntegration.scss
@@ -32,6 +32,8 @@
border-radius: var(-pf-tglobalborderradius-medium);
border: var(-pf-tglobalborderwidthboxdefault) solid var(pf-tglobalbordercolor-default);
background-clip: content-box; /* Fix weird anti-alaising */
+ /* Ensure iframe content can scroll properly */
+ overflow: auto;
}
.cockpit-storage-integration-page-section-cockpit-storage {
@@ -97,3 +99,54 @@ iframe
}
+
+// Ensure iframe modal dialogs can display and scroll properly
+.cockpit-storage-integration-iframe-cockpit-storage {
+ // Provide proper z-index and positioning for iframe modal dialogs
+ iframe {
+ // Allow iframe content to display beyond boundaries (for modal dialogs)
+ overflow: visible;
+
+ // Ensure modal dialogs can display outside iframe boundaries
+ body
+ }
+}
+
+// Improve modal dialog display within iframes
+.cockpit-storage-integration-modal-page-section iframe
+
+// Specifically handle scrolling issues for modal dialogs within iframes
+.cockpit-storage-integration-modal-page-section {
+ // Ensure modal dialog container can handle overflow content
+ overflow: visible;
+
+ // Provide sufficient z-index for iframe to display modal dialogs
+ iframe {
+ position: relative;
+ z-index: 1000;
+
+ // Ensure modal dialogs within iframe can display correctly
+ &::content
+ }
+}
+
+// Add specific styles to handle modal dialogs in Cockpit storage interface
+.cockpit-storage-integration-iframe-cockpit-storage {
+ // When modal dialog is open, ensure iframe can display complete content
+ &.has-modal
+}
it addresses the iframe modal dialog scrolling issue by:
1.CSS Improvements: Added proper overflow handling for iframe content
Dynamic Class Management: JavaScript automatically applies has-modal class when modals open
2.Scrolling Support: Ensures modal dialogs can scroll when content exceeds viewport
3.Backward Compatibility: Maintains existing functionality while fixing the display issues
I'm not familiar with the code, but looks like a valid solution.
Reproducible: Always