Infra to new code highlight

assets/styles/layout/_code.scss

@@ -26,8 +26,9 @@ pre[class*="language-"] {
     position: relative;
     background: transparent;
     margin: 0;
-    overflow: visible;
     padding: 0;
+    max-height: 40rem;
+    overflow: auto;
 
     &:before, &:after {
         display: none !important;
@@ -128,22 +129,6 @@ pre[class*="language-"] {
     display: none;
 }
 
-.doc-section-code-buttons {
-    button {
-        outline: 0 none;
-        outline-offset: 0;
-        background-color: transparent;
-        transition: background-color .2s, box-shadow .2s;
-        border: 0 none;
-        color: var(--demo-code-button-color);
-        cursor: pointer;
-
-        &:hover {
-            background-color: var(--demo-code-button-hover-bg);
-            color: var(--demo-code-button-hover-color);
-        }
-    }
-}
 pre[class*="language-"] {    
     code {
         background: var(--demo-code-bg) !important;

assets/styles/layout/_doc.scss

@@ -194,14 +194,30 @@
     }
 }
 
-.doc-section-code-buttons {
-    gap: .75rem;
-    border-top-left-radius: 10px;
-    border-top-right-radius: 10px;
 
-    .p-button-label {
+.doc-section-code-buttons {
-        font-weight: normal;
+    position: absolute;
-        font-size: 0.875rem;
+    display: flex;
+    align-items: center;
+    justify-content: end;
+    z-index: 1;
+    top: .75rem;
+    right: .75rem;
+    gap: .75rem;
+    
+    button {
+        outline: 0 none;
+        outline-offset: 0;
+        background-color: transparent;
+        transition: background-color .2s, box-shadow .2s;
+        border: 0 none;
+        color: var(--demo-code-button-color);
+        cursor: pointer;
+
+        &:hover {
+            background-color: var(--demo-code-button-hover-bg);
+            color: var(--demo-code-button-hover-color);
+        }
     }
 }
 
@@ -211,6 +227,8 @@
 }
 
 .doc-section-code { 
+    position: relative;
+    
     div {
         &::-webkit-scrollbar {
             width: 5px;
@@ -254,6 +272,7 @@
             &:first-child {
                 color: var(--primary-color);
                 font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, Liberation Mono, monospace;
+                font-weight: 600;
             }
 
             .doc-option-type {

components/doc/DocSectionCode.vue

@@ -1,10 +1,6 @@
 <template>
-    <div v-if="!embedded" :class="scrollable ? 'doc-section-code' : 'relative doc-section-code'">
+    <div v-if="!embedded" class="doc-section-code">
-        <div
+        <div class="doc-section-code-buttons">
-            class="flex doc-section-code-buttons align-items-center justify-content-end z-1"
-            :style="scrollable ? { position: 'sticky', padding: '0.75rem 0.75rem 0 0' } : { position: 'absolute', top: '0.75rem', right: '0.75rem' }"
-            style="gap: 0.75rem"
-        >
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'composition' }]" @click="codeLang = 'composition'">Composition API</button>
                 <button :class="['py-0 px-2 border-round h-2rem', { 'text-primary': codeLang === 'options' }]" @click="codeLang = 'options'">Options API</button>
@@ -50,7 +46,7 @@
             </button>
         </div>
 
-        <div :style="scrollable ? { 'max-height': '40rem' } : undefined">
+        <div>
             <template v-if="codeMode === 'basic' && importCode">
                 <pre v-code.script><code>{{ code.basic }}
 </code></pre>
@@ -84,7 +80,6 @@
 </code></pre>
             </template>
         </div>
-        <div v-if="scrollable" class="h-1rem"></div>
     </div>
     <div v-else id="embed"></div>
 </template>