fix: media library insert button styling

Author: HardeepAsrani

classes/Visualizer/Elementor/Widget.php

@@ -100,6 +100,11 @@ function () {
 				// D3 render library (AI charts).
 				$d3_renderer_asset = VISUALIZER_ABSPATH . '/classes/Visualizer/D3Renderer/build/index.asset.php';
 				if ( file_exists( $d3_renderer_asset ) && ! wp_script_is( 'visualizer-d3-renderer', 'registered' ) ) {
+					/**
+					 * Ignore missing build asset in source checkout.
+					 *
+					 * @phpstan-ignore-next-line
+					 */
 					$d3_asset = include $d3_renderer_asset;
 					wp_register_script(
 						'visualizer-d3-renderer',

css/media.css

@@ -200,6 +200,7 @@ i.mce-i-visualizer-icon:before {
 
 button.visualizer-library-chart-insert{
     position: absolute;
-    top: 45%;
-    left: 45%;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
 }

js/media/view.js

@@ -163,18 +163,20 @@
 						}
 
 						self.renderCollection();
-                        $('.visualizer-library-chart').css('position', 'relative')
-                            .append($(
-                                // jshint ignore:start
-                                '<div class="visualizer-chart-bg"></div>'
-                                + '<div class="visualizer-chart-insert-bg">'
-                                + '<button class="button button-primary visualizer-library-chart-insert">' + visualizer.i10n.insert + '</button>'
-                                + '</div>'
-                                // jshint ignore:end
-                            ))
-                            .on('mouseover', function(){
-                                $(this).addClass('hover');
-                            });
+                        if (self.collection.length > 0) {
+                            $('.visualizer-library-chart').css('position', 'relative')
+                                .append($(
+                                    // jshint ignore:start
+                                    '<div class="visualizer-chart-bg"></div>'
+                                    + '<div class="visualizer-chart-insert-bg">'
+                                    + '<button class="button button-primary visualizer-library-chart-insert">' + visualizer.i10n.insert + '</button>'
+                                    + '</div>'
+                                    // jshint ignore:end
+                                ))
+                                .on('mouseover', function(){
+                                    $(this).addClass('hover');
+                                });
+                        }
 						content.unlock();
 					}
 				}