Merge pull request #871 from PrefectHQ/code-width

PrefectHQ · Aug 18, 2023 · f4549bc · f4549bc
2 parents 965d18a + 020740f
commit f4549bc
Showing 1 changed file with 35 additions and 24 deletions.
diff --git a/src/components/CodeInput/PCodeInput.vue b/src/components/CodeInput/PCodeInput.vue
@@ -23,29 +23,30 @@
           :style="styles.textarea"
           v-bind="ctrlAttrs"
         />
-
-        <template v-if="lang">
-          <PCodeHighlight
-            :lang="lang"
-            :text="internalValue"
-            class="p-code-input__view"
-            :style="styles.view"
-            v-bind="ctrlAttrs"
-          />
-        </template>
-
-        <template v-else>
-          <PCode class="p-code-input__view" :style="styles.view" v-bind="ctrlAttrs">
-            {{ internalValue }}
-          </PCode>
-        </template>
+        <div ref="view" class="p-code-input__view-container">
+          <template v-if="lang">
+            <PCodeHighlight
+              :lang="lang"
+              :text="internalValue"
+              class="p-code-input__view"
+              :style="styles.view"
+              v-bind="ctrlAttrs"
+            />
+          </template>
+
+          <template v-else>
+            <PCode class="p-code-input__view" :style="styles.view" v-bind="ctrlAttrs">
+              {{ internalValue }}
+            </PCode>
+          </template>
+        </div>
       </div>
     </template>
   </p-base-input>
 </template>
 
 <script lang="ts" setup>
-  import { useComputedStyle } from '@prefecthq/vue-compositions'
+  import { useComputedStyle, useElementRect } from '@prefecthq/vue-compositions'
   import { computed, ref } from 'vue'
   import { PCode, PCodeHighlight, PLineNumbers } from '@/components'
   import { useScrollLinking } from '@/compositions'
@@ -66,6 +67,9 @@
   const textarea = ref()
   const textareaStyle = useComputedStyle(textarea)
 
+  const view = ref()
+  const { width } = useElementRect(view)
+
   const { source, target } = useScrollLinking()
 
   const lineSplitRegex = /\r|\r\n|\n/
@@ -80,6 +84,7 @@
 
     return []
   })
+
   const lines = computed(() => Math.max(valueLines.value.length, props.minLines ?? 1))
   const lineHeight = computed(() => {
     if (textareaStyle.value) {
@@ -111,6 +116,7 @@
     return {
       textarea: {
         height: `${lineHeight.value * lines.value}px`,
+        width: width.value ? `${width.value}px` : '100%',
       },
       view: {
         height: `${lineHeight.value * lines.value}px`,
@@ -189,7 +195,7 @@
   min-h-[inherit]
   overflow-auto
   p-0
-  pt-[var(--gap-y)]
+  py-[var(--gap-y)]
   relative
   rounded-lg
   self-stretch
@@ -221,19 +227,24 @@
 }
 
 .p-code-input__view { @apply
-  absolute
   bg-transparent
+  min-h-full
+  min-w-full
+  p-0
+  text-foreground
+}
+
+.p-code-input__view-container { @apply
+  absolute
   left-0
   min-h-full
   min-w-full
   overflow-hidden
-  p-0
-  pointer-events-none
+  top-0
+  z-0
   px-[var(--gap-x)]
   pt-[var(--gap-y)]
+  pointer-events-none
   select-none
-  text-foreground
-  top-0
-  z-0
 }
 </style>