fix: Use different class for link preview popover (#7582)

* fix: Add different class for link preview popover
- Because the style changes for it used to affect other popovers

* fix: Re-arrange popover style for proper style override

frappe/public/js/frappe/ui/link_preview.js

@@ -175,9 +175,10 @@ frappe.ui.LinkPreview = class {
 			animation: false,
 		});
 
-		if(!this.is_link) {
-			this.element.data('bs.popover').tip().addClass('control-field-popover');
-		}
+		const $popover = this.element.data('bs.popover').tip();
+
+		$popover.addClass('link-preview-popover');
+		$popover.toggleClass('control-field-popover', this.is_link);
 
 		this.$links.push(this.element);
 

frappe/public/less/desk.less

@@ -464,27 +464,6 @@ li.user-progress {
 	border-radius: 0px;
 }
 
-// like pop-over
-.liked-by-popover {
-	.popover-content {
-		padding: 0px;
-		overflow: scroll;
-		max-height: 150px;
-	}
-	min-width: 100px;
-	ul {
-		margin: 0px;
-		li {
-			padding: 10px;
-			cursor: pointer;
-			&:hover {
-				background: @btn-bg;
-			}
-		}
-	}
-
-}
-
 .screenshot {
 	border: 1px solid @border-color;
 	box-shadow: 1px 1px 7px rgba(0,0,0,0.15);
@@ -1074,6 +1053,27 @@ img.img-loading:after {
 	}
 }
 
+// like pop-over
+.liked-by-popover {
+	.popover-content {
+		padding: 0px;
+		overflow: scroll;
+		max-height: 150px;
+	}
+	min-width: 100px;
+	ul {
+		margin: 0px;
+		li {
+			padding: 10px;
+			cursor: pointer;
+			&:hover {
+				background: @btn-bg;
+			}
+		}
+	}
+
+}
+
 body.full-width {
 	@media (min-width: @screen-md) {
 		.container {

frappe/public/less/link_preview.less

@@ -1,4 +1,4 @@
-.popover {
+.link-preview-popover {
     border-radius: 0;
     max-width: 100%;
     .popover-content {