fix: Add styling for editor preview

Author: HedwigJDoets

packages/pluggableWidgets/skiplink-web/src/SkipLink.editorPreview.tsx

@@ -5,14 +5,14 @@ export const preview = (props: SkipLinkPreviewProps): ReactElement => {
     if (props.renderMode === "xray") {
         return (
             <div style={{ position: "relative", height: 40 }}>
-                <a href={`#${props.mainContentId}`} style={props.styleObject}>
+                <a href={`#${props.mainContentId}`} className={"widget-skip-link-preview"} style={props.styleObject}>
                     {props.linkText}
                 </a>
             </div>
         );
     } else {
         return (
-            <a href={`#${props.mainContentId}`} style={props.styleObject}>
+            <a href={`#${props.mainContentId}`} className={"widget-skip-link-preview"} style={props.styleObject}>
                 {props.linkText}
             </a>
         );

packages/pluggableWidgets/skiplink-web/src/ui/SkipLink.scss

@@ -14,6 +14,20 @@
     font-weight: bold;
 }
 
+.widget-skip-link-preview {
+    position: absolute;
+    top: 0;
+    left: 0;
+    background: #fff;
+    color: #0078d4;
+    padding: 8px 16px;
+    z-index: 1000;
+    text-decoration: none;
+    border: 2px solid #0078d4;
+    border-radius: 4px;
+    font-weight: bold;
+}
+
 .widget-skip-link:focus {
     transform: translateY(0);
     outline: none;