feat(client): improve RenderCode component style (#482)

vuejs · Jun 25, 2024 · f856340 · f856340
1 parent d6a1faf
commit f856340
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 2 deletions.
diff --git a/packages/applet/src/components/basic/CodeBlock.vue b/packages/applet/src/components/basic/CodeBlock.vue
@@ -61,4 +61,7 @@ const rendered = computed(() => {
   text-align: right;
   --at-apply: 'text-truegray:50';
 }
+.code-block pre:focus-visible {
+  outline: none;
+}
 </style>
diff --git a/packages/applet/src/modules/components/components/RenderCode.vue b/packages/applet/src/modules/components/components/RenderCode.vue
@@ -14,11 +14,11 @@ function close() {
 
 <template>
   <div class="absolute left-0 top-0 h-full w-full flex flex-col rounded-br-2.5 rounded-tr-2.5 bg-white p2 dark:bg-[#121212]">
-    <div class="h-12 w-full flex items-center justify-between py-2">
+    <div class="h-12 w-full flex items-center justify-between p-2">
       <span class="font-500">Render Code</span>
       <i class="i-carbon-close cursor-pointer hover:op80" @click="close" />
     </div>
-    <div class="no-scrollbar flex-1 select-none overflow-scroll">
+    <div class="flex-1 overflow-scroll text-3.5">
       <CodeBlock :code="code" lang="javascript" />
     </div>
   </div>