Address code review feedback

Author: aatanasovdev

css/cloudinary.css

@@ -1377,14 +1377,14 @@ public static function get_inline_svg( $file_path, $echo = true ) {
 
 		// Check if file exists and is an SVG.
 		if ( ! file_exists( $file_path ) || 'svg' !== pathinfo( $file_path, PATHINFO_EXTENSION ) ) {
-			return $echo ? '' : '';
+			return '';
 		}
 
 		// Get the SVG content.
 		$svg_content = file_get_contents( $file_path ); // phpcs:ignore WordPress.WP.AlternativeFunctions.file_get_contents_file_get_contents
 
 		if ( false === $svg_content ) {
-			return $echo ? '' : '';
+			return '';
 		}
 
 		// Sanitize SVG content to prevent XSS attacks.

php/class-utils.php

@@ -672,32 +672,21 @@ public function transformations_column_value( $column_name, $attachment_id ) {
 				if ( ! empty( $transformations ) || ! empty( $text_overlay ) || ! empty( $image_overlay ) ) {
 					$text = __( 'Edit Effects', 'cloudinary' );
 				}
+
+				$transformation_active_class = ! empty( $transformations ) ? 'cld_transformations__icon--active' : '';
+				$text_overlay_active_class   = ! empty( $text_overlay ) ? 'cld_transformations__icon--active' : '';
+				$image_overlay_active_class  = ! empty( $image_overlay ) ? 'cld_transformations__icon--active' : '';
 				?>
 				<a href="<?php echo esc_url( $link ); ?>" class="cld_transformations__icons">
-					<span class="cld_transformations__icon
-					<?php
-					if ( ! empty( $transformations ) ) {
-						echo 'cld_transformations__icon--active';}
-					?>
-					">
+					<span class="cld_transformations__icon <?php echo esc_attr( $transformation_active_class ); ?>">
 						<?php Utils::get_inline_svg( 'css/images/transformation_edit.svg', true ); ?>
 					</span>
 
-					<span class="cld_transformations__icon
-					<?php
-					if ( ! empty( $text_overlay ) ) {
-						echo 'cld_transformations__icon--active';}
-					?>
-					">
+					<span class="cld_transformations__icon <?php echo esc_attr( $text_overlay_active_class ); ?>">
 						<?php Utils::get_inline_svg( 'css/images/text_overlay.svg', true ); ?>
 					</span>
 
-					<span class="cld_transformations__icon
-					<?php
-					if ( ! empty( $image_overlay ) ) {
-						echo 'cld_transformations__icon--active';}
-					?>
-					">
+					<span class="cld_transformations__icon <?php echo esc_attr( $image_overlay_active_class ); ?>">
 						<?php Utils::get_inline_svg( 'css/images/image_overlay.svg', true ); ?>
 					</span>
 				</a>

php/media/class-global-transformations.php

@@ -88,14 +88,22 @@
 	}
 
 	.cld-ui-suffix {
-		margin-left: 0;
+		margin-inline-start: 0;
 	}
 
 	.cld-ui-preview {
 		box-sizing: border-box;
 	}
 }
 
+.asset-edit-preview {
+	@media only screen and (min-width: $size-small) {
+		position: sticky;
+		top: 20px;
+		align-self: flex-start;
+	}
+}
+
 #asset-preview-transformation-string {
 	box-sizing: border-box;
 	display: block;

src/css/components/_edit_overlay.scss

@@ -946,12 +946,13 @@
 				'class' => array(
 					'column-45',
 					'cld-ui-preview',
+					'asset-edit-preview',
 				),
 				array(
-					'type'       => 'panel',
-					'title'      => __( 'Preview', 'cloudinary' ),
+					'type'  => 'panel',
+					'title' => __( 'Preview', 'cloudinary' ),
 					array(
-						'type' => 'row',
+						'type'       => 'row',
 						'attributes' => array(
 							'wrap' => array(
 								'style' => 'display: flex; justify-content: center; align-items: center;',
@@ -984,13 +985,13 @@
 							'type'       => 'tag',
 							'element'    => 'div',
 							'attributes' => array(
-								'id'     => 'asset-preview-success-message',
-								'style'  => 'display: none;',
+								'id'    => 'asset-preview-success-message',
+								'style' => 'display: none;',
 							),
 							array(
-								'type'       => 'tag',
-								'element'    => 'p',
-								'content'    => __( 'Effects applied successfully!', 'cloudinary' ),
+								'type'    => 'tag',
+								'element' => 'p',
+								'content' => __( 'Effects applied successfully!', 'cloudinary' ),
 							),
 						),
 					),