some fix

src/views/PlayerList/PlayerList.vue

@@ -128,7 +128,9 @@
                     <div class="x-friend-item" style="cursor: default">
                         <div class="detail">
                             <span class="name">{{ t('dialog.world.info.last_updated') }}</span>
-                            <span class="block truncate text-xs">{{ formatDateFilter(currentInstanceWorld.lastUpdated, 'long') }}</span>
+                            <span class="block truncate text-xs">{{
+                                formatDateFilter(currentInstanceWorld.lastUpdated, 'long')
+                            }}</span>
                         </div>
                     </div>
                     <div class="x-friend-item" style="cursor: default">
@@ -148,13 +150,10 @@
 
             <div class="current-instance-table flex min-h-0 min-w-0 flex-1">
                 <DataTableLayout
-                    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!"
+                    class="[&_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"
                     :show-pagination="false"
                     :on-row-click="handlePlayerListRowClick" />
             </div>
@@ -255,15 +254,9 @@
         return a[field].toLowerCase().localeCompare(b[field].toLowerCase());
     }
 
-    const initialColumnPinning = {
-        left: ['avatar', 'timer', 'displayName'],
-        right: []
-    };
-
     const playerListColumns = computed(() =>
         createColumns({
             randomUserColours,
-            photonLoggingEnabled,
             chatboxUserBlacklist,
             onBlockChatbox: addChatboxUserBlacklist,
             onUnblockChatbox: deleteChatboxUserBlacklist,
@@ -274,14 +267,8 @@
     const { table: playerListTable } = useVrcxVueTable({
         persistKey: 'playerList',
         data: currentInstanceUsersData,
-        columns: playerListColumns.value,
-        getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}`,
-        enablePinning: true,
-        initialColumnPinning,
-        initialPagination: {
-            pageIndex: 0,
-            pageSize: 500
-        }
+        columns: playerListColumns,
+        getRowId: (row) => `${row?.ref?.id ?? ''}:${row?.displayName ?? ''}`
     });
 
     watch(
@@ -295,6 +282,18 @@
         { immediate: true }
     );
 
+    watch(
+        photonLoggingEnabled,
+        (enabled) => {
+            const column = playerListTable?.getColumn?.('photonId');
+            if (!column) {
+                return;
+            }
+            column.toggleVisibility(Boolean(enabled));
+        },
+        { immediate: true }
+    );
+
     const playerListTotalItems = computed(() => playerListTable.getRowModel().rows.length);
 
     const handlePlayerListRowClick = (row) => {

src/views/PlayerList/columns.jsx

@@ -58,13 +58,11 @@ const sortInstanceIcon = (a, b) =>
 
 export const createColumns = ({
     randomUserColours,
-    photonLoggingEnabled,
     chatboxUserBlacklist,
     onBlockChatbox,
     onUnblockChatbox,
     sortAlphabetically
 }) => {
-    /** @type {import('@tanstack/vue-table').ColumnDef<any, any>[]} */
     const cols = [
         {
             id: 'avatar',
@@ -72,7 +70,6 @@ export const createColumns = ({
             header: () => t('table.playerList.avatar'),
             size: 70,
             enableSorting: false,
-            enableResizing: false,
             cell: ({ row }) => {
                 const userRef = row.original?.ref;
                 const src = userImage(userRef);
@@ -94,7 +91,6 @@ export const createColumns = ({
             header: ({ column }) =>
                 sortButton({ column, label: t('table.playerList.timer') }),
             size: 90,
-            enableResizing: false,
             sortingFn: (rowA, rowB) =>
                 (rowA.original?.timer ?? 0) - (rowB.original?.timer ?? 0),
             cell: ({ row }) => <Timer epoch={row.original?.timer} />
@@ -144,7 +140,11 @@ export const createColumns = ({
             id: 'status',
             accessorFn: (row) => row?.ref?.statusDescription,
             header: () => t('table.playerList.status'),
-            minSize: 200,
+            size:200,
+            minSize: 100,
+            meta: {
+                stretch: true
+            },
             enableSorting: false,
             cell: ({ row }) => {
                 const userRef = row.original?.ref;
@@ -165,16 +165,14 @@ export const createColumns = ({
                     </span>
                 );
             }
-        }
-    ];
-
-    if (photonLoggingEnabled?.value) {
-        cols.push({
+        },
+        {
             id: 'photonId',
             accessorFn: (row) => row?.photonId,
             header: ({ column }) =>
                 sortButton({ column, label: t('table.playerList.photonId') }),
             size: 110,
+            enableHiding: true,
             sortingFn: (rowA, rowB) =>
                 (rowA.original?.photonId ?? 0) - (rowB.original?.photonId ?? 0),
             cell: ({ row }) => {
@@ -208,10 +206,7 @@ export const createColumns = ({
                     </div>
                 );
             }
-        });
-    }
-
-    cols.push(
+        },
         {
             id: 'icon',
             header: ({ column }) =>
@@ -295,6 +290,10 @@ export const createColumns = ({
             id: 'platform',
             header: () => t('table.playerList.platform'),
             size: 90,
+            meta: {
+                stretch: true
+            },
+            minSize: 20,
             enableSorting: false,
             cell: ({ row }) => {
                 const userRef = row.original?.ref;
@@ -405,7 +404,7 @@ export const createColumns = ({
             accessorFn: (row) => row?.ref?.note,
             header: () => t('table.playerList.note'),
             size: 150,
-            minSize: 40,
+            minSize: 20,
             meta: {
                 stretch: true
             },
@@ -419,7 +418,7 @@ export const createColumns = ({
                 return <span>{text}</span>;
             }
         }
-    );
+    ];
 
     return cols;
 };