From 84b8ba8980e373412b6e35091258762ecac61437 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 29 Jun 2023 11:04:20 +0200
Subject: [PATCH 1/8] Removed border around output field

---
 Frontend/src/components/xml/XmlOutputFieldComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index c0213d2..9e1928c 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -143,7 +143,7 @@ function emitVersionChange() {
                 <button class="tool-button" @click="process">Process</button>
             </div>
         </div>
-        <div class="text-field overflow-scroll h-full w-full">
+        <div class="overflow-scroll h-full w-full">
             <!--  <pre class="whitespace-pre-wrap"><code>{{ result }}</code></pre>  -->
             <CodeEditor :code="result" :config="{disabled:true,language:tool}"></CodeEditor>
         </div>
-- 
2.51.0


From 9737dcf645ecf1b2e3c328bc911df1792cdcb7ec Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 29 Jun 2023 13:30:37 +0200
Subject: [PATCH 2/8] Polished XPath view structore

---
 Frontend/src/components/CodeEditorComponent.vue        |  4 ++--
 Frontend/src/components/xml/XmlInputFieldComponent.vue |  5 ++---
 .../src/components/xml/XmlOutputFieldComponent.vue     |  5 ++---
 .../src/components/xml/tooltips/TooltipComponent.vue   |  2 +-
 Frontend/src/views/XPathView.vue                       | 10 ++++++----
 5 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/Frontend/src/components/CodeEditorComponent.vue b/Frontend/src/components/CodeEditorComponent.vue
index 04a0cb6..bb8ef23 100644
--- a/Frontend/src/components/CodeEditorComponent.vue
+++ b/Frontend/src/components/CodeEditorComponent.vue
@@ -55,10 +55,10 @@ import {html} from '@codemirror/lang-html'
 </script>
 
 <template>
-    <div class="editor h-full overflow-scroll">
+  <div class="editor w-full max-w-full h-full overflow-scroll">
     
     <codemirror
-      style="height: 100%; padding:0.5rem ; border-radius: 0.5rem"
+      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem"
       :model-value="code"
       @update:model-value="dataUpdated"
       :extensions="extensions"
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index c0f78a1..3847f66 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -42,8 +42,8 @@ function canBeFormatted() {
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-1/2">
-        <div class="flex place-content-between w-full pr-2 items-center m-2">
+    <div class="flex flex-col w-full h-1/2 gap-2">
+        <div class="flex place-content-between w-full pr-2 items-center">
             <span class="dark:text-white">{{ stylizedName }}</span>
             <div class="flex space-x-2">
                 <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
@@ -51,7 +51,6 @@ function canBeFormatted() {
                 <button class="tool-button" @click="clear">Clear</button>
             </div>
         </div>
-        <!-- <textarea id="xmlField" v-model="data" @input="sendValue()" class="text-field h-full"></textarea> -->
         <CodeEditor @update:updated-code="sendNewValue" v-model="data" :code="data" :config="{disabled:false, language:stylizedName}"></CodeEditor>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 9e1928c..2b4389c 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -129,8 +129,8 @@ function emitVersionChange() {
 </script>
 
 <template>
-    <div class="flex flex-col w-full lg:w-1/2 h-1/2 lg:h-full items-center">
-        <div class="flex place-content-between w-full items-center m-2">
+    <div class="flex flex-col gap-2 w-full lg:w-1/2 h-1/2 lg:h-full items-center">
+        <div class="flex place-content-between w-full items-center">
             <span class="dark:text-white">Result:</span>
             <div class="flex space-x-2">
                 <select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
@@ -144,7 +144,6 @@ function emitVersionChange() {
             </div>
         </div>
         <div class="overflow-scroll h-full w-full">
-            <!--  <pre class="whitespace-pre-wrap"><code>{{ result }}</code></pre>  -->
             <CodeEditor :code="result" :config="{disabled:true,language:tool}"></CodeEditor>
         </div>
         
diff --git a/Frontend/src/components/xml/tooltips/TooltipComponent.vue b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
index d824635..70d4d16 100644
--- a/Frontend/src/components/xml/tooltips/TooltipComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
@@ -38,7 +38,7 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div :class="{ 'w-4/12' : !areTooltipsHidden }" class="hidden xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800">
+    <div :class="areTooltipsHidden ? '' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800">
         <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
             T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
         </button>
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index 43755d6..57f95c2 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -17,11 +17,13 @@ function updateVersion(newVersion: string) {
 
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
-            <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
-            <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
+        <div class="flex flex-col lg:flex-row gap-4 w-full lg:w-7/12 grow">
+            <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4 ">
+                <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
+                <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
+            </div>
+            <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
         </div>
-        <xmlOutputFieldComponent tool="xpath" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
         <tooltipComponent :version="version"></tooltipComponent>
     </div>
 </template>
\ No newline at end of file
-- 
2.51.0


From 544e09ce108dcb050165311de3c78255ccba12a1 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 29 Jun 2023 13:35:28 +0200
Subject: [PATCH 3/8] Fixed streching in REST Mock

---
 Frontend/src/components/mock/HistoryComponent.vue         | 8 ++++----
 Frontend/src/components/mock/RestMockMessageComponent.vue | 2 +-
 2 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index 89050cc..de600b4 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -34,9 +34,9 @@ function showHeaders(headers: object, index: number){
 
 
 <template>
-    <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
-    <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
-    <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
-    <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
+    <div class="w-full xl:w-2/5 flex flex-none flex-col gap-y-4">
+        <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
+        <BodyDetailComponent :content-type="currentContentType" :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
+        <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/RestMockMessageComponent.vue b/Frontend/src/components/mock/RestMockMessageComponent.vue
index d2da63b..c12813d 100644
--- a/Frontend/src/components/mock/RestMockMessageComponent.vue
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -44,7 +44,7 @@ function showUpdatedCode(newCode : string){
 </script>
 
 <template>
-  <div class="flex flex-col w-full xl:w-3/5 text-center dark:text-white gap-6 p-1">
+  <div class="flex flex-col flex-none w-full xl:w-3/5 text-center dark:text-white gap-6 p-1">
     <div class="flex flex-col md:flex-row gap-4 items-center md:justify-stretch md:items-end">
       <div class="flex flex-col w-full">
         <label for="link">Link</label><br/>
-- 
2.51.0


From 6654676d2f4de744de59221747c30bba75d23681 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 29 Jun 2023 13:58:25 +0200
Subject: [PATCH 4/8] Stopped XPath text field from widening

---
 Frontend/src/components/CodeEditorComponent.vue           | 2 +-
 Frontend/src/components/xml/XmlOutputFieldComponent.vue   | 2 +-
 Frontend/src/components/xml/tooltips/TooltipComponent.vue | 2 +-
 Frontend/src/views/XPathView.vue                          | 4 ++--
 4 files changed, 5 insertions(+), 5 deletions(-)

diff --git a/Frontend/src/components/CodeEditorComponent.vue b/Frontend/src/components/CodeEditorComponent.vue
index bb8ef23..a366f53 100644
--- a/Frontend/src/components/CodeEditorComponent.vue
+++ b/Frontend/src/components/CodeEditorComponent.vue
@@ -58,7 +58,7 @@ import {html} from '@codemirror/lang-html'
   <div class="editor w-full max-w-full h-full overflow-scroll">
     
     <codemirror
-      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem"
+      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: x-large;"
       :model-value="code"
       @update:model-value="dataUpdated"
       :extensions="extensions"
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 2b4389c..e404435 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -129,7 +129,7 @@ function emitVersionChange() {
 </script>
 
 <template>
-    <div class="flex flex-col gap-2 w-full lg:w-1/2 h-1/2 lg:h-full items-center">
+    <div class="flex flex-col gap-2 flex-none w-full lg:w-1/2 h-1/2 lg:h-full items-center">
         <div class="flex place-content-between w-full items-center">
             <span class="dark:text-white">Result:</span>
             <div class="flex space-x-2">
diff --git a/Frontend/src/components/xml/tooltips/TooltipComponent.vue b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
index 70d4d16..5c1fe72 100644
--- a/Frontend/src/components/xml/tooltips/TooltipComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
@@ -38,7 +38,7 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div :class="areTooltipsHidden ? '' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800">
+    <div :class="areTooltipsHidden ? 'w-fit' : 'w-4/12'" class="hidden 2xl:flex shrink-0 items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-600 dark:to-sky-800">
         <button :class="{'mr-2' : !areTooltipsHidden }" class="text-xl w-6 dark:text-slate-100" @click="toggleTooltips()">
             T<br/>o<br/>o<br/>l<br/>t<br/>i<br/>p<br/>s
         </button>
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index 57f95c2..bb7386e 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -16,9 +16,9 @@ function updateVersion(newVersion: string) {
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full space-x-4">
         <div class="flex flex-col lg:flex-row gap-4 w-full lg:w-7/12 grow">
-            <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4 ">
+            <div class="flex flex-col w-full lg:w-1/2 h-full flex-none items-center gap-4 ">
                 <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
                 <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
             </div>
-- 
2.51.0


From 83230395100436e37a15104f48fdfdb97a13b505 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 29 Jun 2023 14:36:06 +0200
Subject: [PATCH 5/8] Polished XPath view

---
 Frontend/src/components/CodeEditorComponent.vue         | 2 +-
 Frontend/src/components/xml/XmlInputFieldComponent.vue  | 4 ++--
 Frontend/src/components/xml/XmlOutputFieldComponent.vue | 4 ++--
 Frontend/src/views/XPathView.vue                        | 6 +++---
 4 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/Frontend/src/components/CodeEditorComponent.vue b/Frontend/src/components/CodeEditorComponent.vue
index a366f53..1b57d4b 100644
--- a/Frontend/src/components/CodeEditorComponent.vue
+++ b/Frontend/src/components/CodeEditorComponent.vue
@@ -58,7 +58,7 @@ import {html} from '@codemirror/lang-html'
   <div class="editor w-full max-w-full h-full overflow-scroll">
     
     <codemirror
-      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: x-large;"
+      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
       :model-value="code"
       @update:model-value="dataUpdated"
       :extensions="extensions"
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 3847f66..5867645 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -42,8 +42,8 @@ function canBeFormatted() {
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-1/2 gap-2">
-        <div class="flex place-content-between w-full pr-2 items-center">
+    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pb-1">
+        <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">{{ stylizedName }}</span>
             <div class="flex space-x-2">
                 <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index e404435..fbe3d84 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -129,8 +129,8 @@ function emitVersionChange() {
 </script>
 
 <template>
-    <div class="flex flex-col gap-2 flex-none w-full lg:w-1/2 h-1/2 lg:h-full items-center">
-        <div class="flex place-content-between w-full items-center">
+    <div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center px-2 pt-4 lg:pt-0">
+        <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">Result:</span>
             <div class="flex space-x-2">
                 <select v-model="engine" name="engine" @change="changeAvailableVersions()" class="px-3 rounded-full border border-slate-400 bg-white dark:text-slate-100 dark:bg-gray-600">
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index bb7386e..b622063 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -16,9 +16,9 @@ function updateVersion(newVersion: string) {
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full space-x-4">
-        <div class="flex flex-col lg:flex-row gap-4 w-full lg:w-7/12 grow">
-            <div class="flex flex-col w-full lg:w-1/2 h-full flex-none items-center gap-4 ">
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
+        <div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-scroll">
+            <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center p-2 gap-3">
                 <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
                 <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
             </div>
-- 
2.51.0


From 8a75718539d718b3a26af161de518202514dc368 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 29 Jun 2023 14:46:15 +0200
Subject: [PATCH 6/8] Adjusted spacing

---
 Frontend/src/App.vue                                    | 2 +-
 Frontend/src/components/xml/XmlInputFieldComponent.vue  | 6 +++---
 Frontend/src/components/xml/XmlOutputFieldComponent.vue | 2 +-
 Frontend/src/views/XPathView.vue                        | 4 ++--
 4 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/Frontend/src/App.vue b/Frontend/src/App.vue
index 31e6146..f61c09b 100644
--- a/Frontend/src/App.vue
+++ b/Frontend/src/App.vue
@@ -8,7 +8,7 @@ import SidebarComponent from '@components/sidebar/SidebarComponent.vue';
 <template>
   <div id="layout" class="flex h-screen bg-gradient-to-r from-white to-sky-200 dark:from-slate-800 dark:to-indigo-950">
     <SidebarComponent />
-    <div class="relative p-6 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
+    <div class="relative p-4 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
       <RouterView></RouterView>
     </div>
   </div>
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index 5867645..295b421 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -42,10 +42,10 @@ function canBeFormatted() {
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pb-1">
-        <div class="flex place-content-between w-full items-center pb-2">
+    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2">
+        <div class="flex place-content-between w-full items-center">
             <span class="dark:text-white">{{ stylizedName }}</span>
-            <div class="flex space-x-2">
+            <div class="flex space-x-2 pb-2">
                 <InsertTemplateComponent :stylized-name="props.stylizedName" @update:default-data="(data: string) => updateData(data)"></InsertTemplateComponent>
                 <XMLButtonFormatterComponent v-if="canBeFormatted()" :xml="data" @update:result="(data:any) => updateData(data.result)"></XMLButtonFormatterComponent>
                 <button class="tool-button" @click="clear">Clear</button>
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index fbe3d84..24321d9 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -129,7 +129,7 @@ function emitVersionChange() {
 </script>
 
 <template>
-    <div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center px-2 pt-4 lg:pt-0">
+    <div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center pb-2">
         <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">Result:</span>
             <div class="flex space-x-2">
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index b622063..59f4c1d 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -17,8 +17,8 @@ function updateVersion(newVersion: string) {
 
 <template>
     <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
-        <div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-scroll">
-            <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center p-2 gap-3">
+        <div class="flex flex-col lg:flex-row w-full lg:w-7/12 grow overflow-hide px-2">
+            <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
                 <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
                 <xmlInputFieldComponent stylized-name="XPath" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
             </div>
-- 
2.51.0


From 8182913f3a70acf65bb441ded81563256f55433d Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 30 Jun 2023 08:41:20 +0200
Subject: [PATCH 7/8] Added some padding

---
 Frontend/src/components/xml/XmlOutputFieldComponent.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 24321d9..e0d140d 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -129,7 +129,7 @@ function emitVersionChange() {
 </script>
 
 <template>
-    <div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center pb-2">
+    <div class="flex flex-col flex-none w-full lg:w-1/2 h-1/3 lg:h-full items-center pb-2 pr-2">
         <div class="flex place-content-between w-full items-center pb-2">
             <span class="dark:text-white">Result:</span>
             <div class="flex space-x-2">
-- 
2.51.0


From 8373112236417dfc1de806d3f477c9bdae55e421 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Fri, 30 Jun 2023 09:30:29 +0200
Subject: [PATCH 8/8] Fixed other tools

---
 Frontend/src/views/XQueryView.vue | 4 ++--
 Frontend/src/views/XSDView.vue    | 4 ++--
 Frontend/src/views/XSLTView.vue   | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/Frontend/src/views/XQueryView.vue b/Frontend/src/views/XQueryView.vue
index 46fa5d3..972192f 100644
--- a/Frontend/src/views/XQueryView.vue
+++ b/Frontend/src/views/XQueryView.vue
@@ -10,8 +10,8 @@ const query = ref('');
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
+        <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
             <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
             <xmlInputFieldComponent stylized-name="XQuery" @update="(data) => {query = data}"></xmlInputFieldComponent>
         </div>
diff --git a/Frontend/src/views/XSDView.vue b/Frontend/src/views/XSDView.vue
index 7b78dcc..6aca08b 100644
--- a/Frontend/src/views/XSDView.vue
+++ b/Frontend/src/views/XSDView.vue
@@ -10,8 +10,8 @@ const query = ref('');
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
+        <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
             <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
             <xmlInputFieldComponent stylized-name="XSD" @update="(data) => {query = data}"></xmlInputFieldComponent>
         </div>
diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index 8d60a38..44eb86d 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -10,8 +10,8 @@ const query = ref('');
 </script>
 
 <template>
-    <div id="layout" class="flex flex-col lg:flex-row w-full h-full gap-4">
-        <div class="flex flex-col w-full lg:w-1/2 h-full items-center gap-4">
+    <div id="layout" class="flex flex-col lg:flex-row w-full h-full">
+        <div class="flex flex-col w-full lg:w-1/2 h-2/3 lg:h-full flex-none items-center">
             <xmlInputFieldComponent stylized-name="XML" @update="(data) => {xml = data}"></xmlInputFieldComponent>
             <xmlInputFieldComponent stylized-name="XSLT" @update="(data) => {query = data}"></xmlInputFieldComponent>
         </div>
-- 
2.51.0