fix handle big svg

resources/js/dashboards/potentials/inside_system.js

@@ -292,11 +292,136 @@ function resizeDashboard() {
         svg.style.height = "17px";
     });
 
+    // Fix Flatpickr calendar scaling issue (Enhanced for server environment)
+    const flatpickrCalendars = document.querySelectorAll(".flatpickr-calendar");
+    flatpickrCalendars.forEach((calendar) => {
+        // Force reset all transformation properties
+        calendar.style.transform = "none";
+        calendar.style.scale = "1";
+        calendar.style.position = "fixed";
+        calendar.style.zIndex = "10000";
+        calendar.style.fontSize = "14px";
+        calendar.style.lineHeight = "normal";
+
+        // Apply to all child elements
+        const allElements = calendar.querySelectorAll("*");
+        allElements.forEach((element) => {
+            element.style.transform = "none";
+            element.style.scale = "1";
+        });
+
+        // Fix SVG inside Flatpickr with more specific targeting
+        const flatpickrSvgs = calendar.querySelectorAll(
+            "svg, .flatpickr-prev-month svg, .flatpickr-next-month svg"
+        );
+        flatpickrSvgs.forEach((svg) => {
+            svg.style.transform = "none";
+            svg.style.scale = "1";
+            svg.style.width = "17px";
+            svg.style.height = "17px";
+            svg.style.maxWidth = "17px";
+            svg.style.maxHeight = "17px";
+            svg.style.minWidth = "17px";
+            svg.style.minHeight = "17px";
+        });
+    });
+
     // Ensure horizontal scrolling is allowed if necessary
     if (document.body) {
         document.body.style.overflowX = "auto";
     }
 }
 
+// Debounced function for better server performance
+function debounce(func, wait) {
+    let timeout;
+    return function executedFunction(...args) {
+        const later = () => {
+            clearTimeout(timeout);
+            func(...args);
+        };
+        clearTimeout(timeout);
+        timeout = setTimeout(later, wait);
+    };
+}
+
+// Additional function to force fix Flatpickr on server
+function forceFlatpickrFix() {
+    const calendars = document.querySelectorAll(".flatpickr-calendar");
+    calendars.forEach((calendar) => {
+        calendar.style.setProperty("transform", "none", "important");
+        calendar.style.setProperty("scale", "1", "important");
+        calendar.style.setProperty("position", "fixed", "important");
+        calendar.style.setProperty("z-index", "10000", "important");
+
+        const svgs = calendar.querySelectorAll("svg");
+        svgs.forEach((svg) => {
+            svg.style.setProperty("width", "17px", "important");
+            svg.style.setProperty("height", "17px", "important");
+            svg.style.setProperty("transform", "none", "important");
+            svg.style.setProperty("scale", "1", "important");
+        });
+    });
+}
+
 window.addEventListener("load", resizeDashboard);
-window.addEventListener("resize", resizeDashboard);
+window.addEventListener("resize", debounce(resizeDashboard, 100));
+
+// Force fix on various events for server environment
+window.addEventListener("load", forceFlatpickrFix);
+document.addEventListener("click", debounce(forceFlatpickrFix, 50));
+window.addEventListener("scroll", debounce(forceFlatpickrFix, 100));
+
+// Fix Flatpickr when it's opened dynamically
+document.addEventListener("DOMContentLoaded", function () {
+    // Add mutation observer to handle dynamically created Flatpickr calendars
+    const observer = new MutationObserver(function (mutations) {
+        mutations.forEach(function (mutation) {
+            if (mutation.type === "childList") {
+                mutation.addedNodes.forEach(function (node) {
+                    if (
+                        node.nodeType === 1 &&
+                        node.classList &&
+                        node.classList.contains("flatpickr-calendar")
+                    ) {
+                        // Fix newly created Flatpickr calendar (Enhanced for server)
+                        node.style.transform = "none";
+                        node.style.scale = "1";
+                        node.style.position = "fixed";
+                        node.style.zIndex = "10000";
+                        node.style.fontSize = "14px";
+                        node.style.lineHeight = "normal";
+
+                        // Apply to all child elements immediately
+                        const allElements = node.querySelectorAll("*");
+                        allElements.forEach((element) => {
+                            element.style.transform = "none";
+                            element.style.scale = "1";
+                        });
+
+                        // Fix SVG inside the new calendar with enhanced targeting
+                        const svgs = node.querySelectorAll(
+                            "svg, .flatpickr-prev-month svg, .flatpickr-next-month svg"
+                        );
+                        svgs.forEach((svg) => {
+                            svg.style.transform = "none";
+                            svg.style.scale = "1";
+                            svg.style.width = "17px";
+                            svg.style.height = "17px";
+                            svg.style.maxWidth = "17px";
+                            svg.style.maxHeight = "17px";
+                            svg.style.minWidth = "17px";
+                            svg.style.minHeight = "17px";
+                        });
+                    }
+                });
+            }
+        });
+    });
+
+    // Observe document body for new Flatpickr calendars
+    observer.observe(document.body, {
+        childList: true,
+        subtree: true,
+    });
+});

resources/scss/dashboards/potentials/_inside_system.scss

@@ -57,6 +57,49 @@
     transform: none !important;
 }
 
+// Fix for Flatpickr calendar scaling issue (Enhanced for server environment)
+.flatpickr-calendar,
+.flatpickr-calendar.animate,
+.flatpickr-calendar.open {
+    transform: none !important;
+    position: fixed !important;
+    z-index: 10000 !important;
+    font-size: 14px !important;
+    line-height: normal !important;
+    scale: 1 !important;
+}
+
+.flatpickr-calendar * {
+    transform: none !important;
+    scale: 1 !important;
+}
+
+.flatpickr-calendar svg,
+.flatpickr-prev-month svg,
+.flatpickr-next-month svg,
+.flatpickr-calendar .flatpickr-prev-month svg,
+.flatpickr-calendar .flatpickr-next-month svg {
+    width: 17px !important;
+    height: 17px !important;
+    max-width: 17px !important;
+    max-height: 17px !important;
+    min-width: 17px !important;
+    min-height: 17px !important;
+    transform: none !important;
+    scale: 1 !important;
+}
+
+// Override any parent transformations specifically for server
+body .flatpickr-calendar {
+    transform: none !important;
+    scale: 1 !important;
+}
+
+html .flatpickr-calendar {
+    transform: none !important;
+    scale: 1 !important;
+}
+
 .lack-of-potential-wrapper::before {
     content: "";
     position: absolute;