Textfield doesn't scretch out of screen anymore

Frontend/src/App.vue

@@ -6,7 +6,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 </script>
 
 <template>
-  <div id="layout" class="flex bg-gradient-to-r from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
+  <div id="layout" class="flex h-screen bg-gradient-to-r from-white to-blue-200 dark:from-slate-800 dark:to-indigo-950">
     <SidebarComponent />
     <div class="relative p-6 w-full m-4 bg-indigo-50 dark:bg-gray-700 rounded-2xl shadow-md">
       <RouterView></RouterView>

Frontend/src/components/xml/XmlOutputFieldComponent.vue

@@ -128,9 +128,9 @@ function clear() {
                 <button class="tool-button" @click="process">Process</button>
             </div>
         </div>
-        <div class="text-field overflow-scroll">
-            <pre class="break-words"><code>{{ result }}</code></pre>
+        <div class="text-field overflow-scroll h-full w-full">
+            <pre class="whitespace-pre-wrap"><code>{{ result }}</code></pre>
         </div>
         
     </div>
-</template>
+</template>