feat: integration page (PART 3/3)

web/src/components/CodeBlock.vue

@@ -30,7 +30,7 @@ function onCopy() {
 
 <template>
 	<div class="bg-elevated">
-		<div class="flex h-8 items-center justify-between border-b border-default pr-2 pl-4">
+		<div class="flex h-8 items-center justify-between border-b border-default pr-1 pl-3">
 			<span class="font-mono text-xs leading-tight font-medium text-muted">{{
 				label ?? lang
 			}}</span>
@@ -41,7 +41,7 @@ function onCopy() {
 				size="xs"
 				:aria-label="t('Copy {0} example', [label ?? lang])"
 				aria-live="polite"
-				class="gap-1.5 px-1.5 font-medium text-toned"
+				class="gap-1.5 px-2 font-medium text-toned"
 				:ui="{ leadingIcon: 'size-3.5' }"
 				@click="onCopy"
 			>
@@ -51,13 +51,13 @@ function onCopy() {
 		<div
 			v-if="highlightedHtml"
 			tabindex="0"
-			class="shiki-block overflow-x-auto px-4 py-3.5 font-mono text-code whitespace-pre"
+			class="shiki-block overflow-x-auto px-3 py-3 font-mono text-code whitespace-pre"
 			v-html="highlightedHtml"
 		/>
 		<pre
 			v-else
 			tabindex="0"
-			class="overflow-x-auto px-4 py-3.5 font-mono text-code whitespace-pre text-default"
+			class="overflow-x-auto px-3 py-3 font-mono text-code whitespace-pre text-default"
 			>{{ code }}</pre
 		>
 	</div>