From 7066f13193621a7a46f92135107ee19e7ac1c2e8 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Tue, 27 Jun 2023 08:52:50 +0200
Subject: [PATCH] Layout adjustments

---
 .../src/components/xml/tooltips/TooltipComponent.vue  |  2 +-
 .../components/xml/tooltips/TooltipEntryComponent.vue | 11 +++++++----
 2 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/Frontend/src/components/xml/tooltips/TooltipComponent.vue b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
index e042ea2..651449b 100644
--- a/Frontend/src/components/xml/tooltips/TooltipComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipComponent.vue
@@ -30,7 +30,7 @@ function toggleTooltips() {
 </script>
 
 <template>
-    <div :class="{ 'w-1/2' : !areTooltipsHidden }" class="flex items-stretch p-2 flex-row rounded-xl shadow-lg bg-gradient-to-r from-blue-400 to-blue-300 dark:from-sky-700 dark:to-sky-900">
+    <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-700 dark:to-sky-900">
         <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/components/xml/tooltips/TooltipEntryComponent.vue b/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
index 072d6e2..81fb8f2 100644
--- a/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
+++ b/Frontend/src/components/xml/tooltips/TooltipEntryComponent.vue
@@ -31,7 +31,7 @@ function entryHasExamples() {
                 </p>
             </span>
             
-            <h4 v-if="entryHasArguments()" class="text-xl mt-4 mb-2 font-bold">Arguments</h4>
+            <h4 class="text-xl mt-4 mb-2 font-bold">Args and Output</h4>
             <table v-if="entryHasArguments()" class="w-full">
                 <tr>
                     <th>Type</th>
@@ -42,7 +42,10 @@ function entryHasExamples() {
                     <td class="text-center">{{ arg.description }}</td>
                 </tr>
             </table>
-            <strong>Output: </strong>{{ props.entryData.output }}
+            <div class="mt-2">
+                <strong>Output: </strong>{{ props.entryData.output }}
+            </div>
+            
 
             <h4 v-if="entryHasExamples()" class="text-xl mt-4 mb-2 font-bold">Example</h4>
             <table v-if="entryHasExamples()" class="w-full">
@@ -51,11 +54,11 @@ function entryHasExamples() {
                     <th>Output</th>
                 </tr>
                 <tr v-for="ex in props.entryData.examples">
-                    <td class="text-center">{{ ex.command }}</td>
+                    <td class="text-center"><code>{{ ex.command }}</code></td>
                     <td class="text-center">{{ ex.output }}</td>
                 </tr>
             </table>
-            <div>
+            <div class="mt-2">
                 <a :href="props.entryData.documentationReferenceURL" class="underline" target="_blank" rel="noreferrer noopener">W3C Documentation Reference</a>
             </div>