docs(core): Modify docs Codeblock copy to always visible and image borders (#3722)

Co-authored-by: Housein Abo Shaar <76689341+GogoIsProgramming@users.noreply.github.com>

docs/src/css/components.css

@@ -11,8 +11,10 @@
 }
 
 /* Markdown content */
-.markdown img {
-    border-radius: 4px;
+.theme-doc-markdown.markdown img {
+    border-radius: 0.7rem;
+    border: 0.5rem solid var(--ifm-color-emphasis-100);
+    outline: 1px solid var(--ifm-color-emphasis-200);
 }
 
 /* Members documentation */
@@ -51,6 +53,23 @@
     max-height: 800px;
 }
 
+/* Make copy button always visible instead of only on hover */
+.theme-code-block:not(:hover) button[title="Copy code to clipboard"] {
+    opacity: 1 !important;
+}
+
+/* Alternative selector for copy button visibility */
+div[class*="codeBlockContainer"] button[aria-label*="Copy"] {
+    opacity: 1 !important;
+}
+
+/* Ensure copy button is always visible on code blocks */
+pre[class*="prism-code"] button,
+.prism-code button,
+[class*="codeBlock"] button {
+    opacity: 1 !important;
+}
+
 /* GraphQL code blocks */
 .graphql-code-block {
     background-color: var(--ifm-pre-background);