From 15a55a04cea2fce11c45c368847e4340da7df3a3 Mon Sep 17 00:00:00 2001
From: Peter Olu <pemeraldy@gmail.com>
Date: Tue, 24 May 2022 16:51:21 +0100
Subject: [PATCH] implemeted both flexibility for both table header and columns
 to be responsive to available space

---
 .../related/components/LogTable/Index.vue         | 15 ++++++++++++---
 .../related/components/LogTable/LogService.vue    |  7 +++++++
 2 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/views/dashboard/related/components/LogTable/Index.vue b/src/views/dashboard/related/components/LogTable/Index.vue
index c47a665a..2f2b2e01 100644
--- a/src/views/dashboard/related/components/LogTable/Index.vue
+++ b/src/views/dashboard/related/components/LogTable/Index.vue
@@ -15,7 +15,7 @@ limitations under the License. -->
 
 <template>
   <div class="log">
-    <div class="log-header">
+    <div :class="{ 'd-flex': visibleColumns.length < 6 }" class="log-header">
       <template v-for="(item, index) in columns">
         <template v-if="item.isVisible">
           <div
@@ -85,14 +85,16 @@ const currentLog = ref<any>({});
 const showDetail = ref<boolean>(false);
 const dragger = ref<Nullable<HTMLSpanElement>>(null);
 // const method = ref<number>(380);
-// props.type === "browser" ? BrowserLogConstants : ServiceLogConstants;
+
 const columns = ref<any[]>(
   props.type === "browser"
     ? useLogStore.browserLogColumn
     : useLogStore.serviceLogColumn
 );
-// const portalVisibleDefaultCols:string[] = ['Service', 'Instance','Content']
 
+const visibleColumns = computed(() =>
+  columns.value.filter((column) => column.isVisible)
+);
 function setCurrentLog(log: any) {
   showDetail.value = true;
   currentLog.value = log;
@@ -143,4 +145,11 @@ function setCurrentLog(log: any) {
   text-overflow: ellipsis;
   white-space: nowrap;
 }
+
+.d-flex{
+  display: flex;
+  div{
+    flex-grow: 1;
+  }
+}
 </style>
diff --git a/src/views/dashboard/related/components/LogTable/LogService.vue b/src/views/dashboard/related/components/LogTable/LogService.vue
index 89434c71..b9a324b7 100644
--- a/src/views/dashboard/related/components/LogTable/LogService.vue
+++ b/src/views/dashboard/related/components/LogTable/LogService.vue
@@ -131,4 +131,11 @@ function showSelectSpan() {
   height: 100%;
   padding: 3px 8px;
 }
+
+.d-flex{
+  display: flex;
+  div{
+    flex-grow: 1;
+  }
+}
 </style>