feat: 2.0 popover style updates (#3404)

packages/richtext-slate/src/field/elements/link/Element/index.scss

@@ -11,14 +11,13 @@
     bottom: 0;
     left: 0;
 
-    .popup__scroll,
-    .popup__wrap {
+    .popup__hide-scrollbar,
+    .popup__scroll-container {
       overflow: visible;
     }
 
-    .popup__scroll {
+    .popup__scroll-content {
       white-space: pre;
-      padding-right: base(0.5);
     }
   }
 
@@ -35,7 +34,7 @@
       @extend %btn-reset;
       font-weight: 600;
       cursor: pointer;
-      margin: 0 0 0 base(0.25);
+      margin: 0;
 
       &:hover,
       &:focus-visible {
@@ -48,7 +47,29 @@
     max-width: base(8);
     overflow: hidden;
     text-overflow: ellipsis;
-    margin-right: base(0.25);
+    border-radius: 2px;
+
+    &:hover {
+      background-color: var(--popup-button-highlight);
+    }
+  }
+}
+
+.rich-text-link__popup {
+  display: flex;
+  gap: calc(var(--base) * 0.25);
+  button {
+    &:hover {
+      .btn__icon {
+        background-color: var(--popup-button-highlight);
+        .fill {
+          fill: var(--theme-text);
+        }
+        .stroke {
+          stroke: var(--theme-text);
+        }
+      }
+    }
   }
 }
 

packages/richtext-slate/src/field/elements/link/Element/index.tsx

@@ -159,6 +159,7 @@ export const LinkElement: React.FC<{
                     href={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}
                     rel="noreferrer"
                     target="_blank"
+                    title={`${config.routes.admin}/collections/${element.doc.relationTo}/${element.doc.value}`}
                   >
                     label
                   </a>
@@ -170,6 +171,7 @@ export const LinkElement: React.FC<{
                   href={element.url}
                   rel="noreferrer"
                   target="_blank"
+                  title={element.url}
                 >
                   {element.url}
                 </a>
@@ -200,7 +202,7 @@ export const LinkElement: React.FC<{
               />
             </div>
           )}
-          size="small"
+          size="fit-content"
           verticalAlign="bottom"
         />
       </span>