From 18dd798000f09c750814be9cb58a25c58dd9c902 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Wed, 8 Nov 2023 07:49:50 +0100
Subject: [PATCH 01/13] Added file uploading to formatters

---
 Frontend/src/views/HtmlFormatterView.vue | 15 +++++++++++++++
 Frontend/src/views/JsonFormatterView.vue | 15 +++++++++++++++
 Frontend/src/views/XmlFormatterView.vue  | 15 +++++++++++++++
 3 files changed, 45 insertions(+)

diff --git a/Frontend/src/views/HtmlFormatterView.vue b/Frontend/src/views/HtmlFormatterView.vue
index 4e16a32..c1bf3b4 100644
--- a/Frontend/src/views/HtmlFormatterView.vue
+++ b/Frontend/src/views/HtmlFormatterView.vue
@@ -15,6 +15,18 @@ function setTextFieldValue(data: string) {
     html.value = data.toString()
 }
 
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            setTextFieldValue(result);
+            
+    }
+    reader.readAsText(file.target.files[0])
+}
+
 </script>
 
 <template>
@@ -22,6 +34,9 @@ function setTextFieldValue(data: string) {
         <div id="toolbar" class="flex flex-col gap-4 items-center lg:flex-row place-content-between">
             <span class="dark:text-slate-100">HTML Formatter</span>
             <div class="flex flex-wrap gap-2 justify-center">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.html,.htm,text/xml,text/plain,text/html" @change="readFile" />
+                </div>
                 <InsertTemplateComponent stylized-name="HTML" @update:defaultData="setTextFieldValue"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
                 <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="Minimize" />
diff --git a/Frontend/src/views/JsonFormatterView.vue b/Frontend/src/views/JsonFormatterView.vue
index 8303489..78aed6f 100644
--- a/Frontend/src/views/JsonFormatterView.vue
+++ b/Frontend/src/views/JsonFormatterView.vue
@@ -19,6 +19,18 @@ function clear() {
     json.value = '';
 }
 
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            setTextFieldValue(result);
+            
+    }
+    reader.readAsText(file.target.files[0])
+}
+
 </script>
 
 <template>
@@ -26,6 +38,9 @@ function clear() {
         <div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
             <span class="dark:text-slate-100">JSON Formatter</span>
             <div class="flex flex-wrap gap-2 justify-center">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".json,text/xml,text/plain,text/json,application/json" @change="readFile" />
+                </div>
                 <InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
                 <JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
index 9149a44..093816b 100644
--- a/Frontend/src/views/XmlFormatterView.vue
+++ b/Frontend/src/views/XmlFormatterView.vue
@@ -19,6 +19,18 @@ function clear() {
     xml.value = '';
 }
 
+function readFile(file : any) {
+    
+    const reader = new FileReader()
+    reader.onloadend = () => {
+        var result = reader.result?.toString()
+        if (typeof result == "string")
+            setTextFieldValue(result);
+            
+    }
+    reader.readAsText(file.target.files[0])
+}
+
 </script>
 
 <template>
@@ -26,6 +38,9 @@ function clear() {
         <div id="toolbar" class= "flex flex-col gap-4 items-center lg:flex-row place-content-between">
             <span class="dark:text-slate-100">XML Formatter</span>
             <div class="flex flex-wrap gap-2 justify-center">
+                <div class="flex items-stretch w-64">
+                    <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
+                </div>
                 <InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
                 <XMLButtonFormatterComponent is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
-- 
2.51.0


From 6e3b53fd326997d812aacfead6e20f253fce8f12 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Wed, 8 Nov 2023 14:10:20 +0100
Subject: [PATCH 02/13] Improved UI legibility and added some labels

---
 Frontend/src/components/mock/HeadersComponent.vue    |  1 +
 Frontend/src/components/mock/HistoryComponent.vue    |  1 +
 .../src/components/mock/RestMockMessageComponent.vue | 12 ++++++------
 3 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/Frontend/src/components/mock/HeadersComponent.vue b/Frontend/src/components/mock/HeadersComponent.vue
index cd0ce2b..b87cafa 100644
--- a/Frontend/src/components/mock/HeadersComponent.vue
+++ b/Frontend/src/components/mock/HeadersComponent.vue
@@ -55,6 +55,7 @@ function addNewHeader(name : string, value : string){
 <template>
     
     <div class="flex flex-col gap-4">
+        <label>Response Headers</label>
         <div class="flex flex-row gap-4">
             <div class="w-full">Header name</div>
             <div class="w-full">Header value</div>
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index c80581c..859bd83 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -35,6 +35,7 @@ function showHeaders(headers: object, index: number){
 
 <template>
     <div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
+        <label class="dark:text-white text-center"><span class="font-bold">Attention: </span>History doesn't refresh automatically! Use refresh button on the right!</label>
         <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>
diff --git a/Frontend/src/components/mock/RestMockMessageComponent.vue b/Frontend/src/components/mock/RestMockMessageComponent.vue
index c12813d..b7b6368 100644
--- a/Frontend/src/components/mock/RestMockMessageComponent.vue
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -44,10 +44,10 @@ function showUpdatedCode(newCode : string){
 </script>
 
 <template>
-  <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 flex-none w-full xl:w-3/5 text-center dark:text-white gap-3 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/>
+        <label for="link">REST Service URL</label><br/>
         <div class="p-2 w-full border-slate-400 border-2 rounded-lg">
           <a class="underline" :href="mockMessageLink">{{ mockMessageLink }}</a>
         </div>
@@ -57,18 +57,18 @@ function showUpdatedCode(newCode : string){
     </div>
     <div class="flex flex-col md:flex-row w-full gap-4">
       <div class="w-full">
-        <label for="contentType">Content Type</label><br/>
+        <label for="contentType">Response Content Type</label><br/>
         <input  class="text-field" id="contentType" type="text" v-model="messageData.contentType"/>
       </div>
       
       <div class="w-full">
-        <label for="httpStatus">HttpStatus</label><br/>
+        <label for="httpStatus">Response HTTP Status</label><br/>
         <input class="text-field" id="httpStatus" type="text" v-model="messageData.httpStatus"/>
       </div>
       
     </div>
-    <div class="flex text-left flex-col overflow-scroll h-3/4">
-      <label for="messageBody text-center">Body</label>
+    <div class="flex text-left flex-col overflow-scroll gap-2 h-3/4">
+      <label class="text-center" for="messageBody text-center">Response Body</label>
       <CodeEditorComponent
       @update:updated-code="showUpdatedCode"
       v-model="messageData.messageBody" 
-- 
2.51.0


From e0bb96e6ae487884cb98c001bf335c114f85c825 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Wed, 8 Nov 2023 14:21:07 +0100
Subject: [PATCH 03/13] Added labels in history section

---
 Frontend/src/components/mock/HistoryComponent.vue | 2 +-
 Frontend/src/components/mock/HistoryRecords.vue   | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index 859bd83..f2a714f 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -35,7 +35,7 @@ function showHeaders(headers: object, index: number){
 
 <template>
     <div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
-        <label class="dark:text-white text-center"><span class="font-bold">Attention: </span>History doesn't refresh automatically! Use refresh button on the right!</label>
+        <label class="dark:text-white text-center"><span class="font-bold">Attention: </span>History doesn't refresh automatically! Use refresh button (⟳) on the right!</label>
         <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>
diff --git a/Frontend/src/components/mock/HistoryRecords.vue b/Frontend/src/components/mock/HistoryRecords.vue
index c7ca916..ab1546c 100644
--- a/Frontend/src/components/mock/HistoryRecords.vue
+++ b/Frontend/src/components/mock/HistoryRecords.vue
@@ -49,8 +49,8 @@ function refreshHistory(){
         <table class="w-full">
             <tr>
                 <th>Time</th>
-                <th>HTTP Method</th>
-                <th>Headers</th>
+                <th>Request <br>HTTP Method</th>
+                <th>Request Headers</th>
                 <th>Request Body</th>
                 <th class="text-2xl"><button @click="refreshHistory()">⟳</button></th>
             </tr>
@@ -60,7 +60,7 @@ function refreshHistory(){
                 <td> <button @click="showHeaders(item.headers, index)" class="underline">Show Headers</button> </td>
                 <td> 
                     <button v-if="item.requestBody.length != 0" @click="showBody(item.requestBody, index, item.headers['content-type'])" class="underline">Show Body</button> 
-                    <span v-else>Empty Body</span>
+                    <span v-else>Empty</span>
                 </td>
             </tr>
         </table>
-- 
2.51.0


From a8f8c6d5f549cc5bd1f2428d4dfd98bf2cd881f3 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 9 Nov 2023 08:34:28 +0100
Subject: [PATCH 04/13] Implemented red frame on parsing error in Parsers

---
 .../src/components/xml/XmlOutputFieldComponent.vue | 14 +++++++++-----
 Frontend/src/style.css                             |  4 ++++
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index f510d61..405d801 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -23,6 +23,8 @@ var versionsForCurrentEngine = ref([""]);
 const engine = ref('');
 const version = ref('');
 
+const errorOccurred = ref(false);
+
 
 onMounted(() => {
     changeAvailableEngines();
@@ -111,16 +113,18 @@ function prepareRequestBody():string {
 async function fetchRequest(request: Request):Promise<JSON> {
     var responseBody = await fetch(request)
     .then(response => response.json())
-    .then((body) => body);
-    return responseBody;
+    .then((body) => body)
+    return responseBody
 }
 
 function updateOutputField(data: any) {
-    result.value = data.result;
+    result.value = data.result
+    errorOccurred.value = data.status == "ERR"
 }
 
 function clear() {
-    result.value = "";
+    result.value = ""
+    errorOccurred.value = false
 }
 
 function emitVersionChange() {
@@ -148,7 +152,7 @@ function isVersionSelectionAvailable() {
                 <button class="tool-button" @click="process">Process</button>
             </div>
         </div>
-        <div class="overflow-scroll h-full w-full">
+        <div class="overflow-scroll h-full w-full rounded-2xl" :class="{'text-field-error' : errorOccurred}">
             <CodeEditor :code="result" :config="{disabled:true,language:tool}"></CodeEditor>
         </div>
         
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index 1bb9d69..e9a2af9 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -26,4 +26,8 @@
 
 .file-selector {
     @apply block file:border-none file:font-sans file:text-base file:hover:brightness-110 file:py-2 file:px-4 file:h-full file:w-fit file:rounded-full file:bg-gradient-to-r file:from-blue-400 file:to-sky-300  file:dark:text-white file:dark:from-sky-600 file:dark:to-sky-800 file:hover:bg-blue-400 w-fit rounded-full text-sm text-gray-900 border border-gray-300 cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400
+}
+
+.text-field-error {
+    @apply shadow-[0px_0px_20px_0px_rgba(255,0,0,1)];
 }
\ No newline at end of file
-- 
2.51.0


From 3ff828c8cd75df0c4c5e1ae7d9ea474e051d65bb Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 9 Nov 2023 09:15:08 +0100
Subject: [PATCH 05/13] Fixed out-of-screen tooltips

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

diff --git a/Frontend/src/components/CodeEditorComponent.vue b/Frontend/src/components/CodeEditorComponent.vue
index 1b57d4b..f13f352 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 w-full max-w-full h-full overflow-scroll">
+  <div class="editor w-full h-full bg-[#282C34] rounded-2xl overflow-x-scroll">
     
     <codemirror
-      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
+      style="height: 100%; width: fit-content; 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 ddb6aa9..c04ce47 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -55,7 +55,7 @@ function readFile(file : any) {
 </script>
 
 <template>
-    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none pr-4 pb-2">
+    <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
         <div class="flex place-content-between w-full items-center">
             <span class="dark:text-white mr-2">{{ stylizedName }}</span>
             <div class="flex space-x-2 pb-2 overflow-x-scroll">
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index 405d801..c1fdc13 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -138,7 +138,7 @@ function isVersionSelectionAvailable() {
 </script>
 
 <template>
-    <div class="flex flex-col flex-none w-full 2xl:w-1/2 h-1/3 2xl:h-full items-center pb-2 pr-2">
+    <div class="flex flex-col flex-none w-full 2xl:w-1/2 h-1/3 2xl:h-full items-center pb-2 xl: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 overflow-x-scroll">
diff --git a/Frontend/src/views/XPathView.vue b/Frontend/src/views/XPathView.vue
index bdf181e..be12426 100644
--- a/Frontend/src/views/XPathView.vue
+++ b/Frontend/src/views/XPathView.vue
@@ -17,7 +17,7 @@ function updateVersion(newVersion: string) {
 
 <template>
     <div id="layout" class="flex flex-row w-full h-full">
-        <div class="flex flex-col 2xl:flex-row w-full 2xl:w-7/12 grow overflow-hide pr-2">
+        <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide xl:pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl: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>
-- 
2.51.0


From 6bce4a955735cf9b74d12c1a9dd8c7fb9835ac2f Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 9 Nov 2023 10:28:13 +0100
Subject: [PATCH 06/13] Fixed tooltips in XSLT

---
 Frontend/src/views/XSLTView.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/Frontend/src/views/XSLTView.vue b/Frontend/src/views/XSLTView.vue
index dcb9690..3ca7e0c 100644
--- a/Frontend/src/views/XSLTView.vue
+++ b/Frontend/src/views/XSLTView.vue
@@ -16,13 +16,13 @@ function updateVersion(newVersion: string) {
 
 <template>
     <div id="layout" class="flex flex-row w-full h-full">
-        <div class="flex flex-col 2xl:flex-row w-full 2xl:w-7/12 grow overflow-hide pr-2">
+        <div class="flex flex-col 2xl:flex-row w-full xl:w-7/12 grow overflow-hide pr-2">
             <div class="flex flex-col w-full 2xl:w-1/2 h-2/3 2xl:h-full flex-none items-center">
                 <xmlInputFieldComponent stylized-name="XML" :data="xml" @update="(data) => {xml = data}"></xmlInputFieldComponent>
                 <xmlInputFieldComponent stylized-name="XSLT" :data="query" @update="(data) => {query = data}"></xmlInputFieldComponent>
             </div>
             <xmlOutputFieldComponent tool="xslt" :xml="xml" :query="query" @update="(version) => updateVersion(version)"></xmlOutputFieldComponent>
         </div>
-        <tooltipComponent tool-type="xslt" :version="version"></tooltipComponent>
+        <TooltipComponent tool-type="xslt" :version="version"></TooltipComponent>
     </div>
 </template>
\ No newline at end of file
-- 
2.51.0


From aecbcefc31a6fb1d57a841ce49368d991ca19c9f Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 9 Nov 2023 11:24:38 +0100
Subject: [PATCH 07/13] Implemeted error signal in HTML and JSON formatter

---
 .../HtmlButtonFormatterComponent.vue          | 20 ++++++++++++----
 .../JsonButtonFormatterComponent.vue          |  9 ++++---
 Frontend/src/views/HtmlFormatterView.vue      | 24 +++++++++++++++----
 Frontend/src/views/JsonFormatterView.vue      | 23 ++++++++++++++----
 4 files changed, 60 insertions(+), 16 deletions(-)

diff --git a/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue b/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
index 3a64814..c5f056b 100644
--- a/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
+++ b/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
@@ -1,8 +1,18 @@
 <script setup lang="ts">
 const props = defineProps(
     {
-        formatType: {type:String,required:true},
-        code: {type:String,required:true},
+        formatType: {
+            type:String,
+            required:true
+        },
+        code: {
+            type:String,
+            required:true
+        },
+        isError: {
+            type:Boolean,
+            required:false
+        },
     }
 )
 
@@ -24,7 +34,7 @@ function getTypeInfo(){
 function createBody(){
     return JSON.stringify({
         "data": props.code,
-        "process": getTypeInfo(),
+        "processorData": getTypeInfo(),
         "processor": "libxml",
         "version": "1.0"
     });
@@ -33,11 +43,13 @@ function createBody(){
 const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
 
 const emit = defineEmits([
-    'update:result'
+    'update:result',
+    'update:error'
 ])
 
 function processResponse(formattedCode : any){
     var result = formattedCode.result;
+    emit("update:error", formattedCode.status == "ERR")
     return result
 }
 
diff --git a/Frontend/src/components/formatter/JsonButtonFormatterComponent.vue b/Frontend/src/components/formatter/JsonButtonFormatterComponent.vue
index f368077..d752020 100644
--- a/Frontend/src/components/formatter/JsonButtonFormatterComponent.vue
+++ b/Frontend/src/components/formatter/JsonButtonFormatterComponent.vue
@@ -5,12 +5,12 @@ const props = defineProps({
     isMinimizer: {type: Boolean}
 })
 
-const emit = defineEmits(["update:result"])
+const emit = defineEmits(["update:result", "update:error"])
 
 function process() {
     var request:Request = prepareRequest();
     fetchRequest(request).then((data) => {
-        sendProcessedData(data);
+        sendProcessedData(data);  
     })
 }
 
@@ -36,7 +36,10 @@ function prepareRequestBody():string {
 
 async function fetchRequest(request: Request):Promise<JSON> {
     var responseBody = await fetch(request)
-    .then(response => response.json())
+    .then(response => {
+        emit('update:error', response.status != 200)
+        return response.json()
+    })
     .then((body) => body);
     console.log(responseBody);
     return responseBody;
diff --git a/Frontend/src/views/HtmlFormatterView.vue b/Frontend/src/views/HtmlFormatterView.vue
index c1bf3b4..2d67776 100644
--- a/Frontend/src/views/HtmlFormatterView.vue
+++ b/Frontend/src/views/HtmlFormatterView.vue
@@ -6,15 +6,29 @@ import HtmlButtonFormatterComponent from '@/components/formatter/HtmlButtonForma
 
 
 const html = ref('');
+const inputFile = ref()
+
+const errorOccurred = ref(false);
 
 function clear() {
     html.value = '';
+    errorOccurred.value = false
+    inputFile.value.value = ''
 }
 
 function setTextFieldValue(data: string) {
     html.value = data.toString()
 }
 
+function setErrorOccurred(occurred: boolean) {
+    errorOccurred.value = occurred
+}
+
+function setExample(data: string) {
+    inputFile.value.value = ''
+    setTextFieldValue(data)
+}
+
 function readFile(file : any) {
     
     const reader = new FileReader()
@@ -37,13 +51,13 @@ function readFile(file : any) {
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.html,.htm,text/xml,text/plain,text/html" @change="readFile" />
                 </div>
-                <InsertTemplateComponent stylized-name="HTML" @update:defaultData="setTextFieldValue"></InsertTemplateComponent>
+                <InsertTemplateComponent stylized-name="HTML" @update:defaultData="setExample"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
-                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="Minimize" />
-                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="Prettify" />
-                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" :code="html" format-type="XML Converter" />
+                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="Minimize" />
+                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="Prettify" />
+                <HtmlButtonFormatterComponent @update:result="setTextFieldValue" @update:error="setErrorOccurred" :code="html" format-type="HTML -> XML" />
             </div>
         </div>
-        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
+        <CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="html" :config="{disabled:false,language:'html'}" />
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/JsonFormatterView.vue b/Frontend/src/views/JsonFormatterView.vue
index 78aed6f..1f14dc5 100644
--- a/Frontend/src/views/JsonFormatterView.vue
+++ b/Frontend/src/views/JsonFormatterView.vue
@@ -6,17 +6,32 @@ import { ref } from 'vue';
 
 
 const json = ref('');
+const inputFile = ref()
+
+const errorOccurred = ref(false);
+
 
 function setTextFieldValue(data: string) {
     json.value = data
 }
 
+function setExample(data: string) {
+    inputFile.value.value = ''
+    setTextFieldValue(data)
+}
+
+function setErrorOccurred(occurred: boolean) {
+    errorOccurred.value = occurred
+}
+
 function format(formattedXml: any) {
     json.value = formattedXml.data;
 }
 
 function clear() {
     json.value = '';
+    errorOccurred.value = false
+    inputFile.value.value = ''
 }
 
 function readFile(file : any) {
@@ -41,12 +56,12 @@ function readFile(file : any) {
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".json,text/xml,text/plain,text/json,application/json" @change="readFile" />
                 </div>
-                <InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
+                <InsertTemplateComponent stylized-name="JSON" @update:defaultData="(data: string) => setExample(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
-                <JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
-                <JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
+                <JsonButtonFormatterComponent isMinimizer :json="json" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
+                <JsonButtonFormatterComponent :json="json" @update:result="(data: any) => format(data)" @update:error="setErrorOccurred"></JsonButtonFormatterComponent>
             </div>
         </div>
-        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="json" :config="{disabled:false,language:'json'}" />
+        <CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="json" :config="{disabled:false,language:'json'}" />
     </div>
 </template>
\ No newline at end of file
-- 
2.51.0


From 5799d60db1c3ec41299e55be03dfe1415d3e6402 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 9 Nov 2023 12:45:27 +0100
Subject: [PATCH 08/13] Implemented error signal in XML formatter

---
 .../HtmlButtonFormatterComponent.vue          | 12 +++++-----
 .../formatter/XMLButtonFormatterComponent.vue | 10 +++++++--
 Frontend/src/views/XmlFormatterView.vue       | 22 +++++++++++++++----
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue b/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
index c5f056b..0709bb4 100644
--- a/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
+++ b/Frontend/src/components/formatter/HtmlButtonFormatterComponent.vue
@@ -16,8 +16,13 @@ const props = defineProps(
     }
 )
 
+const emit = defineEmits([
+    'update:result',
+    'update:error'
+])
+
 function chooseType(formatType: String){
-    if (formatType == "XML Converter"){
+    if (formatType == "HTML -> XML"){
         return "convert";
     }
     return formatType.toLowerCase();
@@ -42,11 +47,6 @@ function createBody(){
 
 const fetchLink = document.location.protocol + "//" + document.location.hostname + "/libxml/html/" + chooseType(props.formatType);
 
-const emit = defineEmits([
-    'update:result',
-    'update:error'
-])
-
 function processResponse(formattedCode : any){
     var result = formattedCode.result;
     emit("update:error", formattedCode.status == "ERR")
diff --git a/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
index 024911c..2274d3d 100644
--- a/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
+++ b/Frontend/src/components/formatter/XMLButtonFormatterComponent.vue
@@ -5,7 +5,10 @@ const props = defineProps({
     isMinimizer: {type: Boolean}
 })
 
-const emit = defineEmits(["update:result"])
+const emit = defineEmits([
+    'update:result',
+    'update:error'
+])
 
 function process() {
     var request:Request = prepareRequest()
@@ -42,7 +45,10 @@ function prepareRequestBody():string {
 async function fetchRequest(request: Request):Promise<JSON> {
     var responseBody = await fetch(request)
     .then(response => response.json())
-    .then((body) => body)
+    .then((body) => {
+        emit("update:error", body.status == "ERR")
+        return body
+    })
     return responseBody
 }
 
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
index 093816b..c53ad09 100644
--- a/Frontend/src/views/XmlFormatterView.vue
+++ b/Frontend/src/views/XmlFormatterView.vue
@@ -6,6 +6,9 @@ import { ref } from 'vue';
 
 
 const xml = ref('');
+const inputFile = ref()
+
+const errorOccurred = ref(false);
 
 function setTextFieldValue(data: string) {
     xml.value = data
@@ -15,8 +18,19 @@ function format(formattedXml: any) {
     xml.value = formattedXml.result;
 }
 
+function setErrorOccurred(occurred: boolean) {
+    errorOccurred.value = occurred
+}
+
+function setExample(data: string) {
+    inputFile.value.value = ''
+    setTextFieldValue(data)
+}
+
 function clear() {
     xml.value = '';
+    errorOccurred.value = false
+    inputFile.value.value = ''
 }
 
 function readFile(file : any) {
@@ -41,12 +55,12 @@ function readFile(file : any) {
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 </div>
-                <InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
+                <InsertTemplateComponent stylized-name="XML" @update:defaultData="(data: string) => setExample(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
-                <XMLButtonFormatterComponent is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
-                <XMLButtonFormatterComponent :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
+                <XMLButtonFormatterComponent @update:error="setErrorOccurred" is-minimizer :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
+                <XMLButtonFormatterComponent @update:error="setErrorOccurred" :xml="xml" @update:result="(data: any) => format(data)"></XMLButtonFormatterComponent>
             </div>
         </div>
-        <CodeEditorComponent @update:updated-code="setTextFieldValue" :code="xml" :config="{disabled:false,language:'xml'}" />
+        <CodeEditorComponent :class="{'text-field-error' : errorOccurred}" @update:updated-code="setTextFieldValue" :code="xml" :config="{disabled:false,language:'xml'}" />
     </div>
 </template>
\ No newline at end of file
-- 
2.51.0


From 765d4b052180335ae789bce2cb757cf7ed556e98 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 9 Nov 2023 12:49:09 +0100
Subject: [PATCH 09/13] Reverted change in CodeEditor

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

diff --git a/Frontend/src/components/CodeEditorComponent.vue b/Frontend/src/components/CodeEditorComponent.vue
index f13f352..a337afc 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 h-full bg-[#282C34] rounded-2xl overflow-x-scroll">
     
     <codemirror
-      style="height: 100%; width: fit-content; padding:1rem ; border-radius: 1rem; font-size: large;"
+      style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
       :model-value="code"
       @update:model-value="dataUpdated"
       :extensions="extensions"
-- 
2.51.0


From d48085841112943528e208d37cc0aca38fcef5c0 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Thu, 9 Nov 2023 13:19:58 +0100
Subject: [PATCH 10/13] Polished base64 encoder

---
 .../encoder/EncoderButtonComponent.vue        | 12 ++++++------
 Frontend/src/views/Base64EncoderView.vue      | 19 +++++++++++--------
 2 files changed, 17 insertions(+), 14 deletions(-)

diff --git a/Frontend/src/components/encoder/EncoderButtonComponent.vue b/Frontend/src/components/encoder/EncoderButtonComponent.vue
index 2b307c8..0c8233d 100644
--- a/Frontend/src/components/encoder/EncoderButtonComponent.vue
+++ b/Frontend/src/components/encoder/EncoderButtonComponent.vue
@@ -3,7 +3,7 @@
 
 const props = defineProps(
     {
-        encodeType: {type:String,required:true},
+        operationType: {type:String,required:true},
         code: {type: String, required: true}
     }
 )
@@ -15,16 +15,16 @@ const emit = defineEmits([
 
 function convert(){
     console.log("works")
-    switch(props.encodeType.toLowerCase()){
-        case "base64":{
+    switch(props.operationType.toLowerCase()){
+        case "encode":{
             emit('update:result', btoa(props.code) )
             break;
         }
-        case "text":{
+        case "decode":{
             emit('update:result', atob(props.code) )
             break;
         }
-        case "image":{
+        case "show image":{
             emit('image:show', props.code )
             break;
         }
@@ -35,5 +35,5 @@ function convert(){
 </script>
 
 <template>
-    <button @click="convert()" class="tool-button">{{ props.encodeType }}</button>
+    <button @click="convert()" class="tool-button">{{ props.operationType }}</button>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/views/Base64EncoderView.vue b/Frontend/src/views/Base64EncoderView.vue
index fcc50f8..5e1b817 100644
--- a/Frontend/src/views/Base64EncoderView.vue
+++ b/Frontend/src/views/Base64EncoderView.vue
@@ -21,8 +21,12 @@ function showImage(newImage : string){
 
 function convertImageToBase64(file : any){
     const reader = new FileReader()
-    reader.onloadend = () => (console.log(data.value = reader.result?.toString().split(',')[1]))
+    reader.onloadend = () => {
+        data.value = reader.result?.toString().split(',')[1]
+        showImage(data.value)
+    }
     reader.readAsDataURL(file.target.files[0])
+    
 }
 
 function clear(){
@@ -38,18 +42,17 @@ function clear(){
 <div id="layoutFull" class="w-full h-full flex flex-col xl:flex-row gap-4">
     <div id="layoutLeft" class="flex flex-col w-full xl:w-1/2 h-1/3 xl:h-full gap-4">
         <div class="w-full flex flex-row place-content-between items-center">
-            <label class="dark:text-white text-center">Base64/Text</label>
-            <div class="flex flex-row items-center gap-2">
+            <label class="dark:text-white text-center">Base64 Encoder</label>
+            <div class="flex flex-row items-center gap-2 overflow-x-scroll">
                 <button class="tool-button" @click="clear()">Clear</button>
-                <label class="text-grey-900 dark:text-white">Convert to</label>
-                <EncoderButton @image:show="showImage" :code="data" encode-type="Image"></EncoderButton>
-                <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Text"></EncoderButton>
-                <EncoderButton @update:result="setTextFieldValue" :code="data" encode-type="Base64"></EncoderButton>
+                <EncoderButton @image:show="showImage" :code="data" operation-type="Show Image"></EncoderButton>
+                <div class="w-2"></div>
+                <EncoderButton @update:result="setTextFieldValue" :code="data" operation-type="Encode"></EncoderButton>
+                <EncoderButton @update:result="setTextFieldValue" :code="data" operation-type="Decode"></EncoderButton>
             </div>
             
         </div>
         <div id="codeEditor" class="w-full h-full xl:h-1/3 flex flex-col">
-            
             <CodeEditorComponent @update:updated-code="setTextFieldValue" :config="{language:'base64'}" :code="data"></CodeEditorComponent>
         </div>
         <div class="flex flex-row justify-center w-full">
-- 
2.51.0


From 378dfcf3510310829e6123aaa4c2d0799ea9a26d Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 14 Nov 2023 07:46:28 +0100
Subject: [PATCH 11/13] Set fixed versions of base containers in frontend

---
 Frontend/Dockerfile | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/Frontend/Dockerfile b/Frontend/Dockerfile
index 0b44b57..278b4e0 100644
--- a/Frontend/Dockerfile
+++ b/Frontend/Dockerfile
@@ -1,4 +1,4 @@
-FROM node:latest as build-stage
+FROM node:20.9.0-bullseye-slim as build-stage
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
@@ -7,7 +7,7 @@ RUN npm run build
 
 
 
-FROM nginx:stable-alpine as production-stage
+FROM nginx:stable-alpine3.17-slim as production-stage
 RUN mkdir /app
 
 RUN apk add --no-cache tzdata
@@ -20,7 +20,7 @@ EXPOSE 80
 EXPOSE 443
 
 
-FROM node:latest as dev
+FROM node:20.9.0-bullseye-slim as dev
 WORKDIR /app
 COPY package*.json ./
 RUN npm install
-- 
2.51.0


From 2c03ada393c02e4660aa2f65a6c2ee84c089ae5d Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 14 Nov 2023 08:29:46 +0100
Subject: [PATCH 12/13] Hid unneded scrollbars

---
 Frontend/src/components/CodeEditorComponent.vue           | 2 +-
 Frontend/src/components/mock/HistoryComponent.vue         | 2 +-
 Frontend/src/components/mock/RestMockMessageComponent.vue | 2 +-
 Frontend/src/components/xml/XmlInputFieldComponent.vue    | 2 +-
 Frontend/src/components/xml/XmlOutputFieldComponent.vue   | 4 ++--
 Frontend/src/views/Base64EncoderView.vue                  | 2 +-
 Frontend/src/views/RestMockView.vue                       | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/Frontend/src/components/CodeEditorComponent.vue b/Frontend/src/components/CodeEditorComponent.vue
index a337afc..c505405 100644
--- a/Frontend/src/components/CodeEditorComponent.vue
+++ b/Frontend/src/components/CodeEditorComponent.vue
@@ -55,7 +55,7 @@ import {html} from '@codemirror/lang-html'
 </script>
 
 <template>
-  <div class="editor w-full h-full bg-[#282C34] rounded-2xl overflow-x-scroll">
+  <div class="editor w-full h-full bg-[#282C34] rounded-2xl overflow-x-auto">
     
     <codemirror
       style="height: 100%; width: 100%; padding:1rem ; border-radius: 1rem; font-size: large;"
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index f2a714f..126e4cf 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -36,7 +36,7 @@ function showHeaders(headers: object, index: number){
 <template>
     <div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
         <label class="dark:text-white text-center"><span class="font-bold">Attention: </span>History doesn't refresh automatically! Use refresh button (⟳) on the right!</label>
-        <HistoryRecords class="xl:h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
+        <HistoryRecords class="xl:h-1/3 overflow-y-auto" @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>
diff --git a/Frontend/src/components/mock/RestMockMessageComponent.vue b/Frontend/src/components/mock/RestMockMessageComponent.vue
index b7b6368..698c39d 100644
--- a/Frontend/src/components/mock/RestMockMessageComponent.vue
+++ b/Frontend/src/components/mock/RestMockMessageComponent.vue
@@ -67,7 +67,7 @@ function showUpdatedCode(newCode : string){
       </div>
       
     </div>
-    <div class="flex text-left flex-col overflow-scroll gap-2 h-3/4">
+    <div class="flex text-left flex-col overflow-auto gap-2 h-3/4">
       <label class="text-center" for="messageBody text-center">Response Body</label>
       <CodeEditorComponent
       @update:updated-code="showUpdatedCode"
diff --git a/Frontend/src/components/xml/XmlInputFieldComponent.vue b/Frontend/src/components/xml/XmlInputFieldComponent.vue
index c04ce47..7414e11 100644
--- a/Frontend/src/components/xml/XmlInputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlInputFieldComponent.vue
@@ -58,7 +58,7 @@ function readFile(file : any) {
     <div class="flex flex-col w-full h-1/2 lg:h-1/2 flex-none xl:pr-2 2xl:pr-4 pb-2">
         <div class="flex place-content-between w-full items-center">
             <span class="dark:text-white mr-2">{{ stylizedName }}</span>
-            <div class="flex space-x-2 pb-2 overflow-x-scroll">
+            <div class="flex space-x-2 pb-2 overflow-x-auto">
                 <div class="flex items-stretch w-64">
                     <input id="fileLoader" ref="inputFile" class="file-selector" type="file" accept=".xml,.xql,.xquery,.xslt,text/xml,text/plain" @change="readFile" />
                 </div>
diff --git a/Frontend/src/components/xml/XmlOutputFieldComponent.vue b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
index c1fdc13..0c67af8 100644
--- a/Frontend/src/components/xml/XmlOutputFieldComponent.vue
+++ b/Frontend/src/components/xml/XmlOutputFieldComponent.vue
@@ -141,7 +141,7 @@ function isVersionSelectionAvailable() {
     <div class="flex flex-col flex-none w-full 2xl:w-1/2 h-1/3 2xl:h-full items-center pb-2 xl: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 overflow-x-scroll">
+            <div class="flex space-x-2 overflow-x-auto">
                 <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">
                     <option v-for="engine in enginesForCurrentTool" :value="engine">{{ engine }}</option>
                 </select>
@@ -152,7 +152,7 @@ function isVersionSelectionAvailable() {
                 <button class="tool-button" @click="process">Process</button>
             </div>
         </div>
-        <div class="overflow-scroll h-full w-full rounded-2xl" :class="{'text-field-error' : errorOccurred}">
+        <div class="overflow-auto h-full w-full rounded-2xl" :class="{'text-field-error' : errorOccurred}">
             <CodeEditor :code="result" :config="{disabled:true,language:tool}"></CodeEditor>
         </div>
         
diff --git a/Frontend/src/views/Base64EncoderView.vue b/Frontend/src/views/Base64EncoderView.vue
index 5e1b817..1aae808 100644
--- a/Frontend/src/views/Base64EncoderView.vue
+++ b/Frontend/src/views/Base64EncoderView.vue
@@ -43,7 +43,7 @@ function clear(){
     <div id="layoutLeft" class="flex flex-col w-full xl:w-1/2 h-1/3 xl:h-full gap-4">
         <div class="w-full flex flex-row place-content-between items-center">
             <label class="dark:text-white text-center">Base64 Encoder</label>
-            <div class="flex flex-row items-center gap-2 overflow-x-scroll">
+            <div class="flex flex-row items-center gap-2 overflow-x-auto">
                 <button class="tool-button" @click="clear()">Clear</button>
                 <EncoderButton @image:show="showImage" :code="data" operation-type="Show Image"></EncoderButton>
                 <div class="w-2"></div>
diff --git a/Frontend/src/views/RestMockView.vue b/Frontend/src/views/RestMockView.vue
index 82584b9..3f54d90 100644
--- a/Frontend/src/views/RestMockView.vue
+++ b/Frontend/src/views/RestMockView.vue
@@ -6,7 +6,7 @@ import HistoryComponent from '@components/mock/HistoryComponent.vue'
 
 
 <template>
-    <div class="flex flex-col xl:flex-row gap-6 w-full overflow-y-scroll overflow-x-hidden h-full">
+    <div class="flex flex-col xl:flex-row gap-6 w-full overflow-y-auto overflow-x-hidden h-full">
         <RestMockMessageComponent></RestMockMessageComponent>
         <HistoryComponent></HistoryComponent>
     </div>
-- 
2.51.0


From eb270b9f424fe26672335ac33104246351723ac3 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 14 Nov 2023 14:42:29 +0100
Subject: [PATCH 13/13] Corrections

---
 Frontend/src/components/mock/HeadersDetailComponent.vue | 6 +++---
 Frontend/src/components/mock/HistoryComponent.vue       | 4 ++--
 Frontend/src/style.css                                  | 2 +-
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/Frontend/src/components/mock/HeadersDetailComponent.vue b/Frontend/src/components/mock/HeadersDetailComponent.vue
index ce1ad41..e894979 100644
--- a/Frontend/src/components/mock/HeadersDetailComponent.vue
+++ b/Frontend/src/components/mock/HeadersDetailComponent.vue
@@ -10,14 +10,14 @@ const props = defineProps(
 </script>
 
 <template>
-    <div class="w-full text-center text-white mt-2 flex flex-col gap-4 ">
+    <div class="w-full text-center dark:text-white mt-2 flex flex-col gap-4 ">
         <div class="flex flex-row gap-4"> 
             <div class="w-full font-bold">Name</div> 
             <div class="w-full font-bold">Value</div> 
         </div >
         <div class="flex flex-row gap-4" v-for="(value,name) in JSON.parse(data)" :key="name">
-            <div class="w-full overflow-hidden">{{ name }}</div>
-            <div class="w-full overflow-hidden">{{ value }}</div>
+            <div class="w-1/2 break-words">{{ name }}</div>
+            <div class="w-1/2 break-words">{{ value }}</div>
         </div>
     </div>
 </template>
\ No newline at end of file
diff --git a/Frontend/src/components/mock/HistoryComponent.vue b/Frontend/src/components/mock/HistoryComponent.vue
index 126e4cf..6edca0f 100644
--- a/Frontend/src/components/mock/HistoryComponent.vue
+++ b/Frontend/src/components/mock/HistoryComponent.vue
@@ -34,8 +34,8 @@ function showHeaders(headers: object, index: number){
 
 
 <template>
-    <div class="flex flex-1 flex-col justify-items-stretch gap-y-4">
-        <label class="dark:text-white text-center"><span class="font-bold">Attention: </span>History doesn't refresh automatically! Use refresh button (⟳) on the right!</label>
+    <div class="flex flex-1 flex-col xl:w-3/12 justify-items-stretch gap-y-4">
+        <label class="dark:text-white text-center"><span class="font-bold">Attention! </span>History doesn't refresh automatically! Use refresh button (⟳) on the right!</label>
         <HistoryRecords class="xl:h-1/3 overflow-y-auto" @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>
diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index e9a2af9..1468860 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -29,5 +29,5 @@
 }
 
 .text-field-error {
-    @apply shadow-[0px_0px_20px_0px_rgba(255,0,0,1)];
+    @apply shadow-[0px_0px_10px_0px_rgba(255,0,0,1)];
 }
\ No newline at end of file
-- 
2.51.0