[#55] try to find and fix long text scroll

Author: Kreezag

components/RayDumpPreview/RayTypesPreview/CallerPayload.vue

@@ -7,9 +7,9 @@
         file.line_number
       }`"
     >
-      <code class="ray-type-caller__code"
-        >{{ file.class || "null" }}:{{ file.method }}</code
-      >
+      <code class="ray-type-caller__code">
+        {{ file.class || "null" }}:{{ file.method }}
+      </code>
     </a>
   </div>
 </template>

components/RayDumpPreview/RayTypesPreview/EloquentPayload.vue

@@ -1,19 +1,22 @@
 <template>
   <div class="ray-type-model">
-    <h3>
-      Class name: <code>{{ payload.content.class_name }}</code>
+    <h3 class="ray-type-model__title">
+      Class name:
+      <code class="ray-type-model__title-in">{{
+        payload.content.class_name
+      }}</code>
     </h3>
-    <ValueDump :value="payload.content.attributes"/>
+    <ValueDump :value="payload.content.attributes" />
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {RayPayload} from "~/config/types";
+import { defineComponent, PropType } from "vue";
+import { RayPayload } from "~/config/types";
 import ValueDump from "~/components/ValueDump/ValueDump.vue";
 
 export default defineComponent({
-  components: {ValueDump},
+  components: { ValueDump },
   props: {
     payload: {
       type: Object as PropType<RayPayload>,
@@ -27,11 +30,11 @@ export default defineComponent({
 .ray-type-model {
 }
 
-.ray-type-model h3 {
-  @apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800;
+.ray-type-model__title {
+  @apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800 flex w-full overflow-auto;
 }
 
-.ray-type-model code {
-  @apply font-semibold;
+.ray-type-model__title-in {
+  @apply font-semibold ml-1;
 }
 </style>

components/RayDumpPreview/RayTypesPreview/EventPayload.vue

@@ -1,20 +1,27 @@
 <template>
   <div class="ray-type-event">
-    <ValueDump v-if="payload.content.class_based_event" :value="payload.content.event"/>
-    <h3>
-      Event: <code>{{ payload.content.name }}</code>
+    <ValueDump
+      v-if="payload.content.class_based_event"
+      :value="payload.content.event"
+    />
+    <h3 class="ray-type-event__text">
+      Event:
+      <code class="ray-type-event__text-in">{{ payload.content.name }}</code>
     </h3>
-    <ValueDump v-if="payload.content.payload" :value="payload.content.payload"/>
+    <ValueDump
+      v-if="payload.content.payload"
+      :value="payload.content.payload"
+    />
   </div>
 </template>
 
 <script lang="ts">
-import {defineComponent, PropType} from "vue";
-import {RayPayload} from "~/config/types";
+import { defineComponent, PropType } from "vue";
+import { RayPayload } from "~/config/types";
 import ValueDump from "~/components/ValueDump/ValueDump.vue";
 
 export default defineComponent({
-  components: {ValueDump},
+  components: { ValueDump },
   props: {
     payload: {
       type: Object as PropType<RayPayload>,
@@ -28,11 +35,11 @@ export default defineComponent({
 .ray-type-event {
 }
 
-.ray-type-event h3 {
-  @apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800;
+.ray-type-event__text {
+  @apply p-3 border border-gray-300 dark:border-gray-600 bg-gray-800 flex w-full overflow-auto;
 }
 
-.ray-type-event code {
-  @apply font-semibold;
+.ray-type-event__text-in {
+  @apply font-semibold ml-1;
 }
 </style>

components/RayDumpPreview/RayTypesPreview/QueryPayload.vue

@@ -1,11 +1,7 @@
 <template>
-  <div class="ray-type-query">
-    <CodeSnippet
-      language="sql"
-      class="event-ray__query-snippet"
-      :code="formattedSql"
-    />
-    <EventTable class="event-ray__query-table">
+  <div class="query-payload">
+    <CodeSnippet language="sql" :code="formattedSql" />
+    <EventTable>
       <EventTableRow title="Connection name">
         {{ payload.content.connection_name }}
       </EventTableRow>
@@ -36,12 +32,16 @@ export default defineComponent({
   computed: {
     formattedSql() {
       return (this.payload.content?.bindings || []).reduce(
-        (result, binding) => result.replace(/\?/, `'${binding}'`),
+        (result, binding) => (result || "").replace(/\?/, `'${binding}'`),
         this.payload.content?.sql || ""
       );
     },
   },
 });
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.query-payload {
+  width: 100%;
+}
+</style>