From 283b31a79e67bf5551a11f2c39ec1aadae6fe29c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 16 Aug 2023 17:34:47 +0300
Subject: [PATCH] Rounded bottom for code sections

---
 assets/styles/layout/_doc.scss    |  9 ++++++-
 components/doc/DocSectionCode.vue | 42 +++++++++++++++----------------
 2 files changed, 28 insertions(+), 23 deletions(-)

diff --git a/assets/styles/layout/_doc.scss b/assets/styles/layout/_doc.scss
index d558d1447..837ce668c 100644
--- a/assets/styles/layout/_doc.scss
+++ b/assets/styles/layout/_doc.scss
@@ -205,6 +205,13 @@
     }
 }
 
+.doc-section-buttons {
+    gap: .75rem;
+    padding: .75rem 0 0;
+    border-top-left-radius: 10px;
+    border-top-right-radius: 10px;
+}
+
 .doc-section-code-tooltip .p-tooltip-text {
     padding: 0.5rem;
     font-size: 11px;
@@ -229,7 +236,7 @@
     }
 
     pre {
-        margin: 0 0 1.5rem 0;
+        margin: 0;
     }
 }
 
diff --git a/components/doc/DocSectionCode.vue b/components/doc/DocSectionCode.vue
index 38773f14c..05e914dea 100644
--- a/components/doc/DocSectionCode.vue
+++ b/components/doc/DocSectionCode.vue
@@ -1,6 +1,6 @@
 <template>
-    <div v-if="!embedded" class="relative doc-section-code overflow-auto" style="max-height: 40rem">
-        <div class="flex surface-card align-items-center justify-content-end sticky z-1" :style="{ top: '0', gap: '.75rem', padding: '.75rem .75rem 0 0', borderTopLeftRadius: '10px', borderTopRightRadius: '10px' }">
+    <div v-if="!embedded" class="surface-card" style="border-radius: 10px">
+        <div class="flex doc-section-buttons surface-card align-items-center justify-content-end sticky z-1 top-0">
             <template v-if="codeMode !== 'basic' && !hideToggleCode">
                 <Button
                     :class="['p-button-rounded p-button-text p-button-plain p-0 inline-flex align-items-center justify-content-center', { 'doc-section-code-active text-primary': codeLang === 'typescript' }]"
@@ -76,35 +76,33 @@
             ></Button>
         </div>
 
-        <template v-if="codeMode === 'basic' && importCode">
-            <pre v-code.script><code>{{ code.basic }}
-
+        <div class="relative doc-section-code overflow-auto" style="max-height: 40rem">
+            <template v-if="codeMode === 'basic' && importCode">
+                <pre v-code.script><code>{{ code.basic }}
 </code></pre>
-        </template>
-
-        <template v-if="codeMode === 'basic' && !importCode">
-            <pre v-code><code>{{ code.basic }}
+            </template>
 
+            <template v-if="codeMode === 'basic' && !importCode">
+                <pre v-code><code>{{ code.basic }}
 </code></pre>
-        </template>
-
-        <template v-if="codeMode !== 'basic' && codeLang === 'options'">
-            <pre v-code><code>{{ code.options }}
+            </template>
 
+            <template v-if="codeMode !== 'basic' && codeLang === 'options'">
+                <pre v-code><code>{{ code.options }}
 </code></pre>
-        </template>
-
-        <template v-if="codeMode !== 'basic' && codeLang === 'composition'">
-            <pre v-code><code>{{ code.composition }}
+            </template>
 
+            <template v-if="codeMode !== 'basic' && codeLang === 'composition'">
+                <pre v-code><code>{{ code.composition }}
 </code></pre>
-        </template>
-
-        <template v-if="codeMode !== 'basic' && codeLang === 'data'">
-            <pre v-code.json><code>{{ code.data }}
+            </template>
 
+            <template v-if="codeMode !== 'basic' && codeLang === 'data'">
+                <pre v-code.json><code>{{ code.data }}
 </code></pre>
-        </template>
+            </template>
+        </div>
+        <div class="h-1rem"></div>
     </div>
     <div v-else id="embed"></div>
 </template>