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] 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>