From 767493057ff14d518cecd93ad64cb5c8ac21e3e1 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 20 Jun 2023 14:33:14 +0200
Subject: [PATCH] Buttons in Formatters are now better placed

---
 Frontend/src/style.css                   | 2 +-
 Frontend/src/views/JsonFormatterView.vue | 2 +-
 Frontend/src/views/XmlFormatterView.vue  | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/Frontend/src/style.css b/Frontend/src/style.css
index 327b065..4762ca1 100644
--- a/Frontend/src/style.css
+++ b/Frontend/src/style.css
@@ -3,7 +3,7 @@
 @tailwind utilities;
 
 .tool-button {
-    @apply py-1 px-4 rounded-full bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
+    @apply py-1 px-4 rounded-full w-fit bg-gradient-to-r from-blue-300 to-sky-200  dark:text-white dark:from-sky-600 dark:to-sky-800 hover:bg-blue-400
 }
 
 .text-field {
diff --git a/Frontend/src/views/JsonFormatterView.vue b/Frontend/src/views/JsonFormatterView.vue
index 72f4d6a..ca70ad8 100644
--- a/Frontend/src/views/JsonFormatterView.vue
+++ b/Frontend/src/views/JsonFormatterView.vue
@@ -24,7 +24,7 @@ function clear() {
     <div id="layout" class="flex flex-col w-full h-full gap-4">
         <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="space-x-2">
+            <div class="flex flex-wrap gap-2 justify-center">
                 <InsertTemplateComponent pretty-name="JSON" @update:defaultData="(data: string) => setTextFieldValue(data)"></InsertTemplateComponent>
                 <button class="tool-button" @click="clear()">Clear</button>
                 <JsonButtonFormatterComponent isMinimizer :xml="json" @update:result="(data: any) => format(data)"></JsonButtonFormatterComponent>
diff --git a/Frontend/src/views/XmlFormatterView.vue b/Frontend/src/views/XmlFormatterView.vue
index cd225dc..7ef3271 100644
--- a/Frontend/src/views/XmlFormatterView.vue
+++ b/Frontend/src/views/XmlFormatterView.vue
@@ -24,7 +24,7 @@ function clear() {
     <div id="layout" class="flex flex-col w-full h-full gap-4">
         <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="space-x-2">
+            <div class="flex flex-wrap gap-2 justify-center">
                 <InsertTemplateComponent pretty-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>