Layout adjustments

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>

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>