From 31f876481392d0a37ce86b376eac3d78aea9bea8 Mon Sep 17 00:00:00 2001
From: Jonas <jonas@freesources.org>
Date: Wed, 30 Sep 2026 11:17:03 +0200
Subject: [PATCH] fix(CodeBlock): make sure buttons don't overlay content

fix(CodeBlock): make sure buttons don't overlay content

Use small buttons and start content below them.

Signed-off-by: Jonas <jonas@freesources.org>

Assisted-by: ClaudeCode:claude-opus-5.5

[skip ci]
---
 src/nodes/CodeBlock/CodeBlockView.vue | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/nodes/CodeBlock/CodeBlockView.vue b/src/nodes/CodeBlock/CodeBlockView.vue
index 8c26492367d..bd67bacdb72 100644
--- a/src/nodes/CodeBlock/CodeBlockView.vue
+++ b/src/nodes/CodeBlock/CodeBlockView.vue
@@ -7,7 +7,7 @@
 	<NodeViewWrapper as="div" :data-mode="viewMode" class="code-block">
 		<div class="code-block-header">
 			<div class="view-switch">
-				<NcActions :aria-label="t('text', 'Copy code block')">
+				<NcActions size="small" :aria-label="t('text', 'Copy code block')">
 					<NcActionButton
 						v-if="hasCode"
 						data-cy="copy-code"
@@ -23,6 +23,7 @@
 
 				<NcActions
 					v-if="isEditable"
+					size="small"
 					data-cy="code-action-group"
 					:aria-label="t('text', 'Code block options')">
 					<NcActionInput
@@ -272,12 +273,9 @@ export default {
 
 .code-block-header {
 	display: flex;
-	flex-direction: row;
-	justify-content: space-between;
-	align-items: stretch;
-	position: absolute;
-	right: 12px;
-	margin-top: 9px;
+	justify-content: flex-end;
+	padding-block-start: 6px;
+	padding-inline-end: 6px;
 }
 
 .split-view {
@@ -296,6 +294,10 @@ export default {
 	}
 }
 
+.split-view__code {
+	padding-top: 0;
+}
+
 @media only screen and (max-width: 600px) {
 	.split-view {
 		flex-direction: column;