From 02e221e307dc67e760bcda69726f24c51b5d5c63 Mon Sep 17 00:00:00 2001
From: pa <maplenagisa@gmail.com>
Date: Wed, 7 Jan 2026 17:00:11 +0900
Subject: [PATCH] tidy up

---
 .../ui/data-table/DataTableLayout.vue         | 19 ++++++++++++++++++-
 src/components/ui/table/Table.vue             |  6 ++++--
 src/stores/feed.js                            | 12 +-----------
 src/stores/friend.js                          | 10 +---------
 src/stores/gameLog.js                         | 10 ----------
 src/stores/moderation.js                      | 13 +------------
 src/views/Feed/columns.jsx                    |  2 +-
 src/views/FriendLog/columns.jsx               |  8 ++++----
 src/views/GameLog/columns.jsx                 |  6 +++---
 src/views/Moderation/columns.jsx              | 10 +++++-----
 src/views/PlayerList/PlayerList.vue           |  6 ++++--
 src/views/PlayerList/columns.jsx              |  2 +-
 12 files changed, 43 insertions(+), 61 deletions(-)

diff --git a/src/components/ui/data-table/DataTableLayout.vue b/src/components/ui/data-table/DataTableLayout.vue
index ccd33118..513cbff2 100644
--- a/src/components/ui/data-table/DataTableLayout.vue
+++ b/src/components/ui/data-table/DataTableLayout.vue
@@ -6,7 +6,7 @@
 
         <div class="rounded-md border">
             <div v-loading="loading" class="overflow-auto" :style="tableStyle">
-                <Table class="table-fixed">
+                <Table :class="tableClassValue" :style="tableElementStyle">
                     <TableHeader>
                         <TableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
                             <TableHead
@@ -119,6 +119,14 @@
             type: Object,
             required: true
         },
+        tableClass: {
+            type: [String, Array],
+            default: null
+        },
+        useTableMinWidth: {
+            type: Boolean,
+            default: false
+        },
         tableStyle: {
             type: Object,
             default: null
@@ -184,6 +192,15 @@
             .filter(Boolean)
             .join(' ');
 
+    const tableClassValue = computed(() => joinClasses('table-fixed', props.tableClass));
+
+    const tableElementStyle = computed(() => {
+        if (!props.useTableMinWidth) return undefined;
+        const size = props.table?.getTotalSize?.();
+        if (!Number.isFinite(size) || size <= 0) return undefined;
+        return { minWidth: `${size}px` };
+    });
+
     const resolveClassValue = (value, ctx) => {
         if (typeof value === 'function') {
             return value(ctx);
diff --git a/src/components/ui/table/Table.vue b/src/components/ui/table/Table.vue
index a1446779..f3d6f1bb 100644
--- a/src/components/ui/table/Table.vue
+++ b/src/components/ui/table/Table.vue
@@ -2,7 +2,8 @@
     import { cn } from '@/lib/utils';
 
     const props = defineProps({
-        class: { type: null, required: false }
+        class: { type: null, required: false },
+        style: { type: [String, Array, Object], required: false }
     });
 </script>
 
@@ -10,7 +11,8 @@
     <div data-slot="table-container" class="relative w-full">
         <table
             data-slot="table"
-            :class="cn('w-full caption-bottom text-[13px] in-[.is-compact-table]:text-[12px]', props.class)">
+            :class="cn('w-full caption-bottom text-[13px] in-[.is-compact-table]:text-[12px]', props.class)"
+            :style="props.style">
             <slot />
         </table>
     </div>
diff --git a/src/stores/feed.js b/src/stores/feed.js
index d5c5fcea..0a30061c 100644
--- a/src/stores/feed.js
+++ b/src/stores/feed.js
@@ -24,18 +24,8 @@ export const useFeedStore = defineStore('Feed', () => {
         vip: false,
         loading: false,
         filter: [],
-        tableProps: {
-            stripe: true,
-            size: 'small',
-            defaultSort: null,
-            rowKey: (row) =>
-                `${row.type}:${row.rowId ?? row.uid}:${row.created_at ?? ''}`
-        },
         pageSize: 20,
-        pageSizeLinked: true,
-        paginationProps: {
-            layout: 'sizes,prev,pager,next,total'
-        }
+        pageSizeLinked: true
     });
 
     const feedSessionTable = ref([]);
diff --git a/src/stores/friend.js b/src/stores/friend.js
index 4d1db7b9..33d63d89 100644
--- a/src/stores/friend.js
+++ b/src/stores/friend.js
@@ -87,16 +87,8 @@ export const useFriendStore = defineStore('Friend', () => {
                     !(filter.value && row.type === 'Unfriend')
             }
         ],
-        tableProps: {
-            stripe: true,
-            size: 'small',
-            defaultSort: null
-        },
         pageSize: 20,
-        pageSizeLinked: true,
-        paginationProps: {
-            layout: 'sizes,prev,pager,next,total'
-        }
+        pageSizeLinked: true
     });
 
     const vipFriends = computed(() => {
diff --git a/src/stores/gameLog.js b/src/stores/gameLog.js
index 0800deb3..69ce9b7a 100644
--- a/src/stores/gameLog.js
+++ b/src/stores/gameLog.js
@@ -63,18 +63,8 @@ export const useGameLogStore = defineStore('GameLog', () => {
         loading: false,
         search: '',
         filter: [],
-        tableProps: {
-            stripe: true,
-            size: 'small',
-            defaultSort: null,
-            rowKey: (row) =>
-                `${row.type}:${row.rowId ?? row.uid ?? row.displayName + row.location + row.time}:${row.created_at ?? ''}`
-        },
         pageSize: 20,
         pageSizeLinked: true,
-        paginationProps: {
-            layout: 'sizes,prev,pager,next,total'
-        },
         vip: false
     });
 
diff --git a/src/stores/moderation.js b/src/stores/moderation.js
index 7d121db6..5773dbaf 100644
--- a/src/stores/moderation.js
+++ b/src/stores/moderation.js
@@ -26,19 +26,8 @@ export const useModerationStore = defineStore('Moderation', () => {
                 value: ''
             }
         ],
-        tableProps: {
-            stripe: true,
-            size: 'small',
-            defaultSort: {
-                prop: 'created',
-                order: 'descending'
-            }
-        },
         pageSize: 20,
-        pageSizeLinked: true,
-        paginationProps: {
-            layout: 'sizes,prev,pager,next,total'
-        }
+        pageSizeLinked: true
     });
 
     watch(
diff --git a/src/views/Feed/columns.jsx b/src/views/Feed/columns.jsx
index 94dc9cfc..9225cb82 100644
--- a/src/views/Feed/columns.jsx
+++ b/src/views/Feed/columns.jsx
@@ -286,7 +286,7 @@ export const columns = [
         header: () => t('table.feed.detail'),
         enableSorting: false,
         meta: {
-            class: 'min-w-0 overflow-hidden'
+            class: 'min-w-[240px] overflow-hidden'
         },
         cell: ({ row }) => {
             const original = row.original;
diff --git a/src/views/FriendLog/columns.jsx b/src/views/FriendLog/columns.jsx
index 1cb722c9..0faa03d8 100644
--- a/src/views/FriendLog/columns.jsx
+++ b/src/views/FriendLog/columns.jsx
@@ -32,7 +32,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
         {
             accessorKey: 'created_at',
             meta: {
-                class: 'w-[140px]'
+                class: 'w-[90px]'
             },
             header: ({ column }) => (
                 <Button
@@ -67,7 +67,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
         {
             accessorKey: 'type',
             meta: {
-                class: 'w-[180px]'
+                class: 'w-[110px]'
             },
             header: () => t('table.friendLog.type'),
             cell: ({ row }) => {
@@ -82,7 +82,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
         {
             accessorKey: 'displayName',
             meta: {
-                class: 'min-w-0 overflow-hidden'
+                class: 'w-[260px]'
             },
             header: () => t('table.friendLog.user'),
             cell: ({ row }) => {
@@ -90,7 +90,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
                 const displayName =
                     original.displayName || original.userId || '';
                 return (
-                    <span class="block w-full min-w-0 truncate">
+                    <span class="block w-full whitespace-normal break-words">
                         {original.type === 'DisplayName' ? (
                             <span class="mr-1">
                                 {original.previousDisplayName}
diff --git a/src/views/GameLog/columns.jsx b/src/views/GameLog/columns.jsx
index 976314a8..0bc086a2 100644
--- a/src/views/GameLog/columns.jsx
+++ b/src/views/GameLog/columns.jsx
@@ -139,9 +139,9 @@ export const createColumns = ({ getCreatedAt, onDelete, onDeletePrompt }) => {
             id: 'detail',
             header: () => t('table.gameLog.detail'),
             enableSorting: false,
-            meta: {
-                class: 'min-w-0 overflow-hidden'
-            },
+        meta: {
+            class: 'min-w-[240px] overflow-hidden'
+        },
             cell: ({ row }) => {
                 const original = row.original;
                 if (original.type === 'Location') {
diff --git a/src/views/Moderation/columns.jsx b/src/views/Moderation/columns.jsx
index c4615d13..fa8e426c 100644
--- a/src/views/Moderation/columns.jsx
+++ b/src/views/Moderation/columns.jsx
@@ -33,7 +33,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
         {
             accessorKey: 'created',
             meta: {
-                class: 'w-[140px]'
+                class: 'w-[90px]'
             },
             header: ({ column }) => (
                 <Button
@@ -68,7 +68,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
         {
             accessorKey: 'type',
             meta: {
-                class: 'w-[160px]'
+                class: 'w-[80px]'
             },
             header: () => t('table.moderation.type'),
             cell: ({ row }) => {
@@ -83,7 +83,7 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
         {
             accessorKey: 'sourceDisplayName',
             meta: {
-                class: 'w-[200px] min-w-0 overflow-hidden'
+                class: 'w-[120px] min-w-0 overflow-hidden'
             },
             header: () => t('table.moderation.source'),
             cell: ({ row }) => {
@@ -101,14 +101,14 @@ export const createColumns = ({ onDelete, onDeletePrompt }) => {
         {
             accessorKey: 'targetDisplayName',
             meta: {
-                class: 'min-w-0 overflow-hidden'
+                class: 'w-[200px]'
             },
             header: () => t('table.moderation.target'),
             cell: ({ row }) => {
                 const original = row.original;
                 return (
                     <span
-                        class="x-link block w-full min-w-0 truncate pr-2.5"
+                        class="x-link block w-full whitespace-normal break-words pr-2.5"
                         onClick={() => showUserDialog(original.targetUserId)}
                     >
                         {original.targetDisplayName}
diff --git a/src/views/PlayerList/PlayerList.vue b/src/views/PlayerList/PlayerList.vue
index 4cf1fbd5..74adab8c 100644
--- a/src/views/PlayerList/PlayerList.vue
+++ b/src/views/PlayerList/PlayerList.vue
@@ -179,10 +179,12 @@
                 <PhotonEventTable @show-chatbox-blacklist="showChatboxBlacklistDialog" />
             </div>
 
-            <div class="current-instance-table flex min-h-0 flex-1">
+            <div class="current-instance-table flex min-h-0 min-w-0 flex-1">
                 <DataTableLayout
-                    class="[&_th]:px-2.5! [&_th]:py-0.75! [&_td]:px-2.5! [&_td]:py-0.75! [&_tr]:h-7!"
+                    class="min-w-0 w-full [&_th]:px-2.5! [&_th]:py-0.75! [&_td]:px-2.5! [&_td]:py-0.75! [&_tr]:h-7!"
                     :table="playerListTable"
+                    table-class="min-w-max w-max"
+                    :use-table-min-width="true"
                     :table-style="playerListTableStyle"
                     :loading="false"
                     :total-items="playerListTotalItems"
diff --git a/src/views/PlayerList/columns.jsx b/src/views/PlayerList/columns.jsx
index d83ab346..8eb70e0a 100644
--- a/src/views/PlayerList/columns.jsx
+++ b/src/views/PlayerList/columns.jsx
@@ -147,7 +147,7 @@ export const createColumns = ({
             minSize: 200,
             enableSorting: false,
             meta: {
-                class: 'min-w-[200px]'
+                class: 'w-[200px]'
             },
             cell: ({ row }) => {
                 const userRef = row.original?.ref;