I'm implementing a settings feature for each grid item. When the settings button on a grid item is clicked, a sliding panel with a gray overlay should cover the entire screen. However, the overlay, set as fixed, only covers the grid item instead of the entire screen.
After several hours of troubleshooting, I discovered that the problem is caused by the transform property of each grid item (e.g., transform: translate(10px, 10px)). This property affects all fixed children, preventing them from covering the entire screen properly.
I temporarily fixed the issue by setting .svelte-grid-item { transform: none !important; }, which made the sliding panel display correctly. However, this introduced a new problem: when adding a new item and adjusting the spacing, it duplicates the current items and doesn't adjust well. If I remove the transform: none attribute, everything works fine again, and I can add new items without issues.
I'm implementing a settings feature for each grid item. When the settings button on a grid item is clicked, a sliding panel with a gray overlay should cover the entire screen. However, the overlay, set as fixed, only covers the grid item instead of the entire screen.
After several hours of troubleshooting, I discovered that the problem is caused by the transform property of each grid item (e.g., transform: translate(10px, 10px)). This property affects all fixed children, preventing them from covering the entire screen properly.
I temporarily fixed the issue by setting .svelte-grid-item { transform: none !important; }, which made the sliding panel display correctly. However, this introduced a new problem: when adding a new item and adjusting the spacing, it duplicates the current items and doesn't adjust well. If I remove the transform: none attribute, everything works fine again, and I can add new items without issues.