ui fix for add column

frontend/src/pages/AppVersionManagement.vue

@@ -40,11 +40,17 @@
       </template>
       <template v-slot:body-cell-comment="p">
         <q-td :props="p">
-          <q-scroll-area class="description-cell">
+          <q-scroll-area class="multiline-cell">
             <div v-html="p.row['comment']"></div>
           </q-scroll-area>
         </q-td>
       </template>
+      <template v-slot:body-cell-creator="p">
+        <q-td auto-width :props="p">
+          <q-badge v-if="p.row.creator.id == Number(authStore.userId)" color="purple">自分</q-badge>
+          <span v-else>{{ p.row.creator.fullName }}</span>
+        </q-td>
+      </template>
       <template v-slot:body-cell-actions="p">
         <q-td :props="p">
           <table-action-menu :row="p.row" minWidth="140px" :actions="actionList" />
@@ -83,12 +89,14 @@
 import { useQuasar } from 'quasar';
 import { ref, onMounted } from 'vue';
 import { useAppStore } from 'stores/useAppStore';
+import { useAuthStore } from 'stores/useAuthStore';
 import { useFlowEditorStore } from 'stores/flowEditor';
 import { router } from 'src/router';
 import { useRoute } from 'vue-router';
 import { IAppDisplay, IAppVersionDisplay } from 'src/types/AppTypes';
 import TableActionMenu from 'components/TableActionMenu.vue';
 
+const authStore = useAuthStore();
 const appStore = useAppStore();
 const route = useRoute()
 
@@ -101,8 +109,8 @@ const columns = [
       { name: 'id', label: 'バージョン番号', field: 'version', align: 'left', sortable: true },
       { name: 'name', label: 'バージョン名', field: 'name', align: 'left', sortable: true },
       { name: 'comment', label: 'コメント', field: 'comment', align: 'left', sortable: true },
-      // { name: 'creator', label: '作成者', field: (row: IVersionDisplay) => row.creator.fullName, align: 'left', sortable: true },
-      // { name: 'createTime', label: '作成日時', field: 'createTime', align: 'left', sortable: true },
+      { name: 'creator', label: '作成者', field: '', align: 'left', sortable: true },
+      { name: 'createTime', label: '作成日時', field: 'createTime', align: 'left', sortable: true },
       // { name: 'updater', label: '更新者', field: (row: IVersionDisplay) => row.updater.fullName, align: 'left', sortable: true },
       // { name: 'updateTime', label: '更新日時', field: 'updateTime', align: 'left', sortable: true },
       { name: 'actions', label: '', field: 'actions' }
@@ -149,6 +157,7 @@ function isVersionEditing() {
 };
 
 onMounted(async () => {
+  versionLoading.value = true;
   let isSuccess = getAppById();
   if (!isSuccess) {
     await getApps();
@@ -201,10 +210,10 @@ async function toEditFlowPage() {
 </script>
 
 <style lang="scss">
-.description-cell {
-  height: 30px;
+.multiline-cell {
+  height: 45px;
   min-width: 300px;
-  max-height: 30px;
+  max-height: 45px;
   white-space: break-spaces;
 
   .q-scrollarea__content {