From 3fb961af0d0912c1eefb6e860e92d889211ba5a8 Mon Sep 17 00:00:00 2001
From: Favour Olayinka <csskfaves@gmail.com>
Date: Wed, 4 Sep 2024 10:51:38 +0100
Subject: [PATCH] fix matrix input (#556)

* fix matrix input

* Fix matrix responsiveness

---------

Co-authored-by: Julien Nahum <julien@nahum.net>
---
 client/components/forms/MatrixInput.vue | 18 ++++++++----------
 1 file changed, 8 insertions(+), 10 deletions(-)

diff --git a/client/components/forms/MatrixInput.vue b/client/components/forms/MatrixInput.vue
index 25cdad39..8345ad61 100644
--- a/client/components/forms/MatrixInput.vue
+++ b/client/components/forms/MatrixInput.vue
@@ -4,7 +4,7 @@
       <slot name="label" />
     </template>
     <div
-      class="border border-gray-300"
+      class="border border-gray-300 overflow-x-auto"
       :class="[
         theme.default.borderRadius,
         {
@@ -13,18 +13,16 @@
         },
       ]"
     >
-      <table 
-        class="w-full table-fixed overflow-hidden" 
-      >
+      <table class="w-full table-auto">
         <thead class="">
           <tr>
-            <th />
+            <th class="text-left p-2 w-auto max-w-xs" />
             <td
               v-for="column in columns"
               :key="column"
-              class="border-l border-gray-300"
+              class="border-l border-gray-300 max-w-24 overflow-hidden"
             >
-              <div class="p-2 w-full flex items-center justify-center capitalize text-sm truncate">
+              <div class="p-2 w-full flex items-center justify-center text-sm">
                 {{ column }}
               </div>
             </td>
@@ -37,8 +35,8 @@
             :key="rowIndex"
             class="border-t border-gray-300"
           >
-            <td>
-              <div class="w-full flex-grow p-2 text-sm truncate">
+            <td class="text-left w-auto max-w-24 overflow-hidden">
+              <div class="w-full p-2 text-sm">
                 {{ row }}
               </div>
             </td>
@@ -103,7 +101,7 @@ export default {
     }
   },
   computed: {},
-  beforeMount() {
+  mounted() {
     if (!this.compVal || typeof this.compVal !== 'object') {
       this.compVal = {}
     }