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 shadow-lg">
+    <div class="relative p-6 w-full m-4 bg-blue-50 dark:bg-gray-700 rounded-2xl overflow-hidden shadow-lg">
       <RouterView></RouterView>
     </div>
   </div>

Frontend/src/components/mock/BodyDetailComponent.vue

@@ -9,7 +9,7 @@ const props = defineProps(
 </script>
 
 <template>
-    <span class="text-white text-center h-screen">
+    <span class="text-white text-center h-screen overflow-x-scroll ">
         {{ props.data.replace(/\\n/g,"") }}
     </span>
 </template>

Frontend/src/components/mock/HeadersComponent.vue

@@ -42,20 +42,21 @@ function addNewHeader(name : string, value : string){
 </script>
 
 <template>
-    <div class="w-full flex">
+    <div class="w-full gap-4 flex">
         <div class="w-full">Header name</div>
         <div class="w-full">Header value</div>
+        <div class="w-1/5"></div>
     </div>
     <div class="flex flex-col gap-4">
         <div class="flex gap-9 flex-row" v-for="(item, index) in headerData" :key="index">
             <input type="text" :value="index" class="text-field" />
             <input type="text" :value="item" class="text-field" />
-            <button @click="deleteHeader(index)" class="tool-button" :class="setEssentialHeaderStyle(index)">X</button>
+            <button @click="deleteHeader(index)" class="tool-button w-1/5" :class="setEssentialHeaderStyle(index)">Remove</button>
         </div>
         <div class="flex gap-9 flex-row">
             <input type="text" v-model="newHeaderName" class="text-field"  />
             <input type="text" v-model="newHeaderValue" class="text-field"  />
-            <button class="tool-button" @click="addNewHeader(newHeaderName, newHeaderValue)" >+</button>
+            <button class="tool-button w-1/5" @click="addNewHeader(newHeaderName, newHeaderValue)" >Add</button>
         </div>
     </div>
 </template>

Frontend/src/components/mock/HeadersDetailComponent.vue

@@ -10,11 +10,14 @@ const props = defineProps(
 </script>
 
 <template>
-    <table class="w-full text-center text-white mt-2">
-        <tr> <th>Name</th> <th>Value</th> </tr>
-        <tr v-for="(value,name) in JSON.parse(data)" :key="name">
-            <td>{{ name }}</td>
-            <td>{{ value }}</td>
-        </tr>
-    </table>
+    <div class="w-full text-center 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>
+    </div>
 </template>

Frontend/src/components/mock/HistoryComponent.vue

@@ -33,7 +33,7 @@ function showHeaders(headers: object, index: number){
 
 <template>
     <div class="w-full xl:w-5/12 flex flex-col gap-y-4">
-    <HistoryRecords @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
+    <HistoryRecords class="h-1/3 overflow-y-scroll" @click:show-headers="showHeaders" @click:show-body="showBody"></HistoryRecords>
     <BodyDetailComponent :data="currentShownData" v-if="shownDetail == 'body' "></BodyDetailComponent>
     <HeadersDetailComponent :data="currentShownData"  v-if="shownDetail == 'headers' "></HeadersDetailComponent>
     </div>

Frontend/src/components/mock/MockedMessageToastComponent.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import { ref} from 'vue';
+import { ref } from 'vue';
 
 const emit = defineEmits([
-    'closed:toast_closed'
+    'closed:toast_closed',
 ])
 
 const props = defineProps(
@@ -22,7 +22,7 @@ function hideToast(){
 
 
 <template>
-    <div id="toast-success" :class="visible" class="flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800" role="alert">
+    <div id="toast-success" class="transition-opacity duration-1000 flex items-center w-full max-w-xs p-4 mb-4 text-gray-500 bg-white rounded-lg shadow dark:text-gray-400 dark:bg-gray-800 " :class="visible" role="alert">
     <div class="inline-flex items-center justify-center flex-shrink-0 w-8 h-8 text-green-500 bg-green-100 rounded-lg dark:bg-green-800 dark:text-green-200">
         <svg aria-hidden="true" class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd"></path></svg>
         <span class="sr-only">Check icon</span>

Frontend/src/components/mock/SaveComponent.vue

@@ -27,6 +27,7 @@ function prepareAndSendData(){
 
 function showToast(){
     visible.value = "visible";
+    setTimeout( () => { visible.value = "opacity-0" } , 1500 )
 }
 
 function hideToast(){

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 h-full">
+    <div class="flex flex-col xl:flex-row gap-6 w-full overflow-hidden h-full">
         <RestMockMessageComponent></RestMockMessageComponent>
         <HistoryComponent></HistoryComponent>
     </div>