From f16f22cb2502b1791803e37c11d3dc65856c5c60 Mon Sep 17 00:00:00 2001
From: why-Mia <xenonpowered@gmail.com>
Date: Sun, 14 Sep 2025 00:37:05 +0100
Subject: [PATCH 01/10] implement timecolumn col & row options

---
 src/components/MapDetails.vue           |  4 ++
 src/components/PlayerDetails.vue        |  4 ++
 src/components/RecentTimes.vue          | 77 +++++++++++++++----------
 src/components/TimesListItem.vue        | 31 ++++++++--
 src/components/TimesListItemContent.vue |  2 +-
 src/types/TimeListColumn.ts             |  4 ++
 6 files changed, 84 insertions(+), 38 deletions(-)

diff --git a/src/components/MapDetails.vue b/src/components/MapDetails.vue
index a0455bb..b8bceba 100644
--- a/src/components/MapDetails.vue
+++ b/src/components/MapDetails.vue
@@ -42,6 +42,7 @@
       data: 'name',
       placement: true,
       width:'25%',
+      col:1,
       alignmentClasses: 'text-left',
       link: timeLinks.playerLink
     }, 
@@ -49,6 +50,7 @@
       label: 'Server',
       data: 'server',
       width: '30%',
+      col:2,
       classes: 'text-sm text-gray-400',
       alignmentClasses: 'text-left text-gray-300'
     },
@@ -56,12 +58,14 @@
       label: 'Date',
       data: 'date',
       width:'15%',
+      col:3,
       alignmentClasses: 'text-right justify-end',
     },
     {
       label: 'Time',
       data: 'time',
       width: '30%',
+      col:4,
       alignmentClasses: 'text-right justify-end monospace',
       numFormat: dateTimeFormats.time
     }]"
diff --git a/src/components/PlayerDetails.vue b/src/components/PlayerDetails.vue
index f7f6c69..bfa67fd 100644
--- a/src/components/PlayerDetails.vue
+++ b/src/components/PlayerDetails.vue
@@ -163,6 +163,7 @@
       label: 'Map',
       data: 'map',
       width:'25%',
+      col:1,
       alignmentClasses: 'text-left',
       link: timeLinks.mapLink
     }, 
@@ -170,6 +171,7 @@
       label: 'Server',
       data: 'server',
       width: '30%',
+      col:2,
       classes: 'text-sm text-gray-400',
       alignmentClasses: 'text-left text-gray-300'
     },
@@ -177,12 +179,14 @@
       label: 'Date',
       data: 'date',
       width:'15%',
+      col:3,
       alignmentClasses: 'text-right justify-end',
     },
     {
       label: 'Time',
       data: 'time',
       width: '30%',
+      col:4,
       alignmentClasses: 'text-right justify-end monospace',
       numFormat: dateTimeFormats.time
     }]"
diff --git a/src/components/RecentTimes.vue b/src/components/RecentTimes.vue
index 3abe8fa..f254696 100644
--- a/src/components/RecentTimes.vue
+++ b/src/components/RecentTimes.vue
@@ -25,14 +25,16 @@
  
   const currentStyle: Ref<number> = ref(urlParams.getAsObject().style ? Number(urlParams.getAsObject().style) : Style.all);
 
-  const showStyleColumn = computed(() => currentStyle.value === Style.all);
-
   const tableColumns = computed((): TimeListColumn[] => {
     const columns: TimeListColumn[] = [
       {
         label: 'Player',
         data: 'name',
-        width: showStyleColumn.value ? '18%' : '20%',
+        col:1,
+        colSpan:1,
+        row:1,
+        rowSpan:2,
+        width: '20%',
         classes: 'font-semibold',
         alignmentClasses: 'text-left',
         link: timeLinks.playerLink
@@ -40,47 +42,60 @@
       {
         label: 'Map',
         data: 'map',
-        width: showStyleColumn.value ? '18%' : '20%',
+        col:2,
+        colSpan:1,
+        row:1,
+        rowSpan:1,
+        width: '35%',
         classes: 'text-gray-200',
         alignmentClasses: 'text-right justify-end md:justify-start md:text-left',
         link: timeLinks.mapLink
-      }
-    ];
-
-    if (showStyleColumn.value) {
-      columns.push({
-        label: 'Style',
-        data: 'style',
-        width: '12%',
-        classes: 'text-sm text-gray-400',
-        alignmentClasses: 'text-right justify-end md:justify-start md:text-left',
-        numFormat: styleFormat.name
-      });
-    }
-
-    columns.push(
+      },
       {
         label: 'Server',
         data: 'server',
-        width: showStyleColumn.value ? '18%' : '20%',
-        classes: 'text-sm text-gray-400',
-        alignmentClasses: 'text-right justify-end md:justify-start md:text-left text-gray-300'
+        col:2,
+        colSpan:1,
+        row:2,
+        rowSpan:1,
+        classes: 'text-xs text-gray-400',
+        alignmentClasses: 'justify-start text-left'
+      },
+      {
+        label: 'Time',
+        data: 'time',
+        col:3,
+        colSpan:1,
+        row:1,
+        rowSpan:2,
+        width: '25%',
+        alignmentClasses: 'text-right justify-end monospace',
+        numFormat: dateTimeFormats.time
+      },
+      {
+        label: 'Style',
+        data: 'style',
+        col:4,
+        colSpan:1,
+        row:1,
+        rowSpan:1,
+        width: '20%',
+        classes: '',
+        alignmentClasses: 'text-right justify-end',
+        numFormat: styleFormat.name
       },
       {
         label: 'Date',
         data: 'date',
-        width: showStyleColumn.value ? '12%' : '15%',
+        col:4,
+        colSpan:1,
+        row:2,
+        rowSpan:1,
+        classes: 'text-xs text-gray-400',
         alignmentClasses: 'text-right justify-end',
         numFormat: dateTimeFormats.date
       },
-      {
-        label: 'Time',
-        data: 'time',
-        width: showStyleColumn.value ? '22%' : '25%',
-        alignmentClasses: 'text-right justify-end monospace',
-        numFormat: dateTimeFormats.time
-      }
-    );
+    ];
 
     return columns;
   });
diff --git a/src/components/TimesListItem.vue b/src/components/TimesListItem.vue
index 5c0975a..8a59b52 100644
--- a/src/components/TimesListItem.vue
+++ b/src/components/TimesListItem.vue
@@ -25,21 +25,39 @@
   const contextMenuX: Ref<number> = ref(0);
   const contextMenuY: Ref<number> = ref(0);
 
+
+  const totalCols = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.col && v.colSpan ? v.col+v.colSpan : 1}));
+  })
+  const totalRows = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.row && v.rowSpan ? v.row+v.rowSpan : 1}));
+  })
+
   const colWidthsStyle = computed(()=>{
-    return props.cols.map((v)=>v.width ? v.width : 'auto').join(' ');
+    return props.cols.filter((v)=>v.row === undefined || v.row === 1)
+    .sort((a,b)=>a.col - b.col)
+    .map((v)=>v.width ? v.width : 'auto').join(' ');
   })
+
+  const rowWidthsStyle = computed(()=>{
+    return totalRows.value > 1 ? '1fr 0.5fr' : '1fr'; 
+  })
+
   const moreDetailsCols: TimeListColumn[] = [
     {
       label:'Jumps',
-      data:'jumps'
+      data:'jumps',
+      col:1,
     },
     {
       label: 'Strafes',
-      data:'strafes'
+      data:'strafes',
+      col:2,
     },
     {
       label: 'Sync',
-      data:'sync'
+      data:'sync',
+      col:3,
     },
   ];
 
@@ -122,8 +140,8 @@
       'pb-2' : ''" 
     @click="toggleDetails()"
     @contextmenu="handleRightClick">
-      
-      <div v-for="(col,index) in props.cols" :key="index" class="grid-col flex" :class="col.alignmentClasses">
+      <div v-for="(col,index) in props.cols" :key="index" class="flex" :class="col.alignmentClasses"
+      :style="`grid-column:${col.col} / span ${col.colSpan ?? 0}; grid-row:${col.row} / span ${col.rowSpan ?? 0};`">
         <a v-if="col.link" :href="col.link(props.time)" class="group/timeLink flex w-full px-1.5" @click.stop :class="`${col.classes} ${col.alignmentClasses}`">
           <TimesListItemContent :col="col" :time="props.time" :wrTime="props.wrTime"></TimesListItemContent>
         </a>
@@ -163,6 +181,7 @@
 <style scoped>
   .os-grid-cols-auto{
     grid-template-columns: v-bind('colWidthsStyle');
+    grid-template-rows: v-bind('rowWidthsStyle');
   }
   @media(max-width:767px){
     .os-grid-cols-auto{
diff --git a/src/components/TimesListItemContent.vue b/src/components/TimesListItemContent.vue
index 8e8d80c..6179b8c 100644
--- a/src/components/TimesListItemContent.vue
+++ b/src/components/TimesListItemContent.vue
@@ -60,7 +60,7 @@
     props.time.time - wrTime < 0 ? 'text-green-600 opacity-80' : 
    'text-gray-500'
   "
-  class="ml-1"> 
+  class="ml-1 flex items-center"> 
     ({{ props.time.time - wrTime > 0 ? '+' : '-' }}{{ dateTimeFormats.time(Math.abs(props.time.time - wrTime)) }})
   </span>
 </template>
diff --git a/src/types/TimeListColumn.ts b/src/types/TimeListColumn.ts
index c9b065d..d09fe86 100644
--- a/src/types/TimeListColumn.ts
+++ b/src/types/TimeListColumn.ts
@@ -4,6 +4,10 @@ export interface TimeListColumn {
     label: string,
     data: keyof Time,
     placement?: boolean,
+    col:number,
+    colSpan?:number,
+    row?:number,
+    rowSpan?:number,
     width?: string,
     classes?: string,
     alignmentClasses?: string,

From 887d5e73ac9aecf72a6b1b39719f0e0c55b0d141 Mon Sep 17 00:00:00 2001
From: why-Mia <xenonpowered@gmail.com>
Date: Sun, 14 Sep 2025 00:44:49 +0100
Subject: [PATCH 02/10] fix player/map links taking full width of time list
 column

---
 src/components/TimesListItem.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/TimesListItem.vue b/src/components/TimesListItem.vue
index 8a59b52..ed57cca 100644
--- a/src/components/TimesListItem.vue
+++ b/src/components/TimesListItem.vue
@@ -142,10 +142,10 @@
     @contextmenu="handleRightClick">
       <div v-for="(col,index) in props.cols" :key="index" class="flex" :class="col.alignmentClasses"
       :style="`grid-column:${col.col} / span ${col.colSpan ?? 0}; grid-row:${col.row} / span ${col.rowSpan ?? 0};`">
-        <a v-if="col.link" :href="col.link(props.time)" class="group/timeLink flex w-full px-1.5" @click.stop :class="`${col.classes} ${col.alignmentClasses}`">
+        <a v-if="col.link" :href="col.link(props.time)" class="group/timeLink flex max-w-full px-1.5" @click.stop :class="`${col.classes} ${col.alignmentClasses}`">
           <TimesListItemContent :col="col" :time="props.time" :wrTime="props.wrTime"></TimesListItemContent>
         </a>
-        <div v-else class="flex w-full px-1.5" :class="col.classes">
+        <div v-else class="flex max-w-full px-1.5" :class="col.classes">
           <TimesListItemContent :col="col" :time="props.time" :wrTime="props.wrTime"></TimesListItemContent>
         </div>
       </div>

From 6195a50a2dde4c5697c5b9476431bb42f762c14e Mon Sep 17 00:00:00 2001
From: why-Mia <xenonpowered@gmail.com>
Date: Sun, 14 Sep 2025 14:14:56 +0100
Subject: [PATCH 03/10] move time list components to new TimeLists folder

---
 src/components/MapDetails.vue                               | 4 ++--
 src/components/PlayerDetails.vue                            | 4 ++--
 src/components/RecentTimes.vue                              | 4 ++--
 src/components/{ => TimeLists}/TimesList.vue                | 2 +-
 src/components/{ => TimeLists}/TimesListHeading.vue         | 0
 src/components/{ => TimeLists}/TimesListItem.vue            | 2 +-
 src/components/{ => TimeLists}/TimesListItemContent.vue     | 4 ++--
 src/components/{ => TimeLists}/TimesListItemMoreDetails.vue | 2 +-
 src/components/{ => TimeLists}/TimesListPagination.vue      | 0
 9 files changed, 11 insertions(+), 11 deletions(-)
 rename src/components/{ => TimeLists}/TimesList.vue (96%)
 rename src/components/{ => TimeLists}/TimesListHeading.vue (100%)
 rename src/components/{ => TimeLists}/TimesListItem.vue (99%)
 rename src/components/{ => TimeLists}/TimesListItemContent.vue (95%)
 rename src/components/{ => TimeLists}/TimesListItemMoreDetails.vue (96%)
 rename src/components/{ => TimeLists}/TimesListPagination.vue (100%)

diff --git a/src/components/MapDetails.vue b/src/components/MapDetails.vue
index b8bceba..6203947 100644
--- a/src/components/MapDetails.vue
+++ b/src/components/MapDetails.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import TimesList from './TimesList.vue';
+  import TimesList from './TimeLists/TimesList.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
@@ -8,7 +8,7 @@
   import { Style } from "@/types/Style";
   import urlParams from '@/utils/urlParams';
   import { useRouter } from 'vue-router';
-  import TimesListPagination from './TimesListPagination.vue';
+  import TimesListPagination from './TimeLists/TimesListPagination.vue';
   const router = useRouter();
 
   const emit = defineEmits(['updateMap']);
diff --git a/src/components/PlayerDetails.vue b/src/components/PlayerDetails.vue
index bfa67fd..301bb3c 100644
--- a/src/components/PlayerDetails.vue
+++ b/src/components/PlayerDetails.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import TimesList from './TimesList.vue';
+  import TimesList from './TimeLists/TimesList.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
@@ -14,7 +14,7 @@
   import OffstylesApi from '@/api/offstylesApi';
   import ModerationModal from './Moderation/ModerationModal.vue';
   import { useModerationStore, type ModerationTarget } from '@/stores/moderation';
-  import TimesListPagination from './TimesListPagination.vue';
+  import TimesListPagination from './TimeLists/TimesListPagination.vue';
   const router = useRouter();
 
   const emit = defineEmits(['updatePlayer']);
diff --git a/src/components/RecentTimes.vue b/src/components/RecentTimes.vue
index f254696..eef2e3f 100644
--- a/src/components/RecentTimes.vue
+++ b/src/components/RecentTimes.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-  import TimesList from './TimesList.vue';
+  import TimesList from './TimeLists/TimesList.vue';
   import dateTimeFormats from '@/utils/dateTimeFormats';
   import timeLinks from '@/utils/timeLinks';
   import type { Time } from '@/types/Time';
@@ -10,7 +10,7 @@
   import urlParams from '@/utils/urlParams';
   import { useRouter } from 'vue-router';
   import CheckboxInput from './CheckboxInput.vue';
-  import TimesListPagination from './TimesListPagination.vue';
+  import TimesListPagination from './TimeLists/TimesListPagination.vue';
   import { ref, computed } from 'vue';
   import type { Ref } from 'vue';
 
diff --git a/src/components/TimesList.vue b/src/components/TimeLists/TimesList.vue
similarity index 96%
rename from src/components/TimesList.vue
rename to src/components/TimeLists/TimesList.vue
index 6e8da3c..3e076dd 100644
--- a/src/components/TimesList.vue
+++ b/src/components/TimeLists/TimesList.vue
@@ -5,7 +5,7 @@ import TimesListItem from './TimesListItem.vue';
 import type { Time } from '@/types/Time';
 import type { TimeListColumn } from '@/types/TimeListColumn';
 import TimesListHeading from './TimesListHeading.vue';
-import BulkModerationModal from './Moderation/BulkModerationModal.vue';
+import BulkModerationModal from '../Moderation/BulkModerationModal.vue';
 import { useModerationStore } from '@/stores/moderation';
 
   const props = defineProps<{
diff --git a/src/components/TimesListHeading.vue b/src/components/TimeLists/TimesListHeading.vue
similarity index 100%
rename from src/components/TimesListHeading.vue
rename to src/components/TimeLists/TimesListHeading.vue
diff --git a/src/components/TimesListItem.vue b/src/components/TimeLists/TimesListItem.vue
similarity index 99%
rename from src/components/TimesListItem.vue
rename to src/components/TimeLists/TimesListItem.vue
index ed57cca..cb774c5 100644
--- a/src/components/TimesListItem.vue
+++ b/src/components/TimeLists/TimesListItem.vue
@@ -5,7 +5,7 @@
   import { computed, ref } from 'vue';
   import TimesListItemContent from './TimesListItemContent.vue';
   import TimesListItemMoreDetails from './TimesListItemMoreDetails.vue';
-  import ModerationModal from './Moderation/ModerationModal.vue';
+  import ModerationModal from '../Moderation/ModerationModal.vue';
   import { useModerationStore, type ModerationTarget } from '@/stores/moderation';
   
   const props = defineProps<{
diff --git a/src/components/TimesListItemContent.vue b/src/components/TimeLists/TimesListItemContent.vue
similarity index 95%
rename from src/components/TimesListItemContent.vue
rename to src/components/TimeLists/TimesListItemContent.vue
index 6179b8c..3c5fb78 100644
--- a/src/components/TimesListItemContent.vue
+++ b/src/components/TimeLists/TimesListItemContent.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
   import type { Time } from '@/types/Time';
   import dateTimeFormats from '@/utils/dateTimeFormats';
-  import RelativeDate from './RelativeDate.vue';
+  import RelativeDate from '../RelativeDate.vue';
   import type { TimeListColumn } from '@/types/TimeListColumn';
-  import ValidityIndicator from './ValidityIndicator.vue';
+  import ValidityIndicator from '../ValidityIndicator.vue';
   import { computed } from 'vue';
   import { useRoute } from 'vue-router';
   
diff --git a/src/components/TimesListItemMoreDetails.vue b/src/components/TimeLists/TimesListItemMoreDetails.vue
similarity index 96%
rename from src/components/TimesListItemMoreDetails.vue
rename to src/components/TimeLists/TimesListItemMoreDetails.vue
index 34b5bc8..4cae4ea 100644
--- a/src/components/TimesListItemMoreDetails.vue
+++ b/src/components/TimeLists/TimesListItemMoreDetails.vue
@@ -3,7 +3,7 @@
   import type { TimeListColumn } from '@/types/TimeListColumn';
   import timeLinks from '@/utils/timeLinks';
   import { computed } from 'vue';
-  import RelativeDate from './RelativeDate.vue';
+  import RelativeDate from '../RelativeDate.vue';
   const props = defineProps<{
       time: Time,
       cols: TimeListColumn[]
diff --git a/src/components/TimesListPagination.vue b/src/components/TimeLists/TimesListPagination.vue
similarity index 100%
rename from src/components/TimesListPagination.vue
rename to src/components/TimeLists/TimesListPagination.vue

From 1b0085442e99761433938875eaceaa7c25c5eb79 Mon Sep 17 00:00:00 2001
From: why-Mia <xenonpowered@gmail.com>
Date: Sun, 14 Sep 2025 14:56:57 +0100
Subject: [PATCH 04/10] update styling of time 'more details'

---
 .../TimeLists/TimesListItemMoreDetails.vue           | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/src/components/TimeLists/TimesListItemMoreDetails.vue b/src/components/TimeLists/TimesListItemMoreDetails.vue
index 4cae4ea..5e78cc8 100644
--- a/src/components/TimeLists/TimesListItemMoreDetails.vue
+++ b/src/components/TimeLists/TimesListItemMoreDetails.vue
@@ -9,25 +9,25 @@
       cols: TimeListColumn[]
     }>();
   const colWidthsStyle = computed(()=>{
-    return props.cols.map((v)=>v.width ? v.width : 'auto').join(' ');
+    return props.cols.map((v)=>v.width ? v.width : '1fr').join(' ');
   })
 </script>
 
 
 <template>
-  <div class="grid os-subgrid-cols-auto p-2 px-2 bg-main-800" :style="{ gridTemplateColumns: colWidthsStyle }">
+  <div class="grid os-subgrid-cols-auto py-3 px-2 bg-main-800" :style="{ gridTemplateColumns: colWidthsStyle }">
     <div v-for="(col, index) in props.cols" :key="index" :class="col.alignmentClasses" class="flex flex-col">
       <span class="text-gray-400 text-xs">{{ col.label }}:</span>
-      <span v-if="col.data === 'date'">
+      <span v-if="col.data === 'date'" class="monospace text-lg">
         <RelativeDate :date="props.time[col.data]" />
       </span>
-      <span v-else>{{ col.data === 'sync' ? props.time[col.data].toFixed(2) + '%' : props.time[col.data] }}</span>
+      <span class="monospace text-lg" v-else>{{ col.data === 'sync' ? props.time[col.data].toFixed(2) + '%' : props.time[col.data] }}</span>
     </div>
     <!-- Add link to individual record -->
-    <div v-if="props.time._id" class="flex flex-col justify-center">
+    <div v-if="props.time._id" class="flex flex-col justify-center items-center pt-2 pb-1 col-span-3">
       <a 
         :href="timeLinks.recordLink(props.time)" 
-        class="text-blue-400 hover:text-blue-300 text-xs px-2 py-1 bg-main-700 rounded hover:bg-main-600 transition-colors text-center"
+        class="px-8 py-2 bg-blue-700 hover:bg-blue-600 rounded transition-colors text-center text-sm"
       >
         View Record
       </a>

From 72dd7ed737c0d59fcccb2a7b187f5029016d5a9b Mon Sep 17 00:00:00 2001
From: why-Mia <xenonpowered@gmail.com>
Date: Mon, 15 Sep 2025 00:17:56 +0100
Subject: [PATCH 05/10] add support for new formatting to time list headings

---
 src/components/TimeLists/TimesListHeading.vue | 39 ++++++++++++++-----
 src/components/TimeLists/TimesListItem.vue    | 34 ++--------------
 2 files changed, 32 insertions(+), 41 deletions(-)

diff --git a/src/components/TimeLists/TimesListHeading.vue b/src/components/TimeLists/TimesListHeading.vue
index fbd4d98..d1cf9f1 100644
--- a/src/components/TimeLists/TimesListHeading.vue
+++ b/src/components/TimeLists/TimesListHeading.vue
@@ -5,16 +5,30 @@
       cols: TimeListColumn[]
     }>();
 
+    const totalCols = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.col && v.colSpan ? v.col+v.colSpan : 1}));
+  })
+  const totalRows = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.row && v.rowSpan ? v.row+v.rowSpan : 1}));
+  })
+
   const colWidthsStyle = computed(()=>{
-    return props.cols.map((v)=>v.width ? v.width : 'auto').join(' ');
+    return props.cols.filter((v)=>v.row === undefined || v.row === 1) //only first row
+    .sort((a,b)=>a.col - b.col) //sort into correct col order
+    .map((v)=>v.width ? v.width : 'auto').join(' '); //make css
+  })
+
+  const rowWidthsStyle = computed(()=>{
+    return '1fr'; 
   })
 </script>
 
 
 <template>
-  <div class="grid os-grid-cols-auto px-1 bg-main-900 fw-700 text-xs pt-1.5 pb-2 text-gray-200">
-    <div v-for="(col,index) in props.cols" :key="index" class="grid-col px-1.5" :class="col.alignmentClasses">
-      <div :class="col.alignmentClasses">{{ col.label }}</div>
+  <div class="grid os-grid-cols-auto px-1 bg-main-900 fw-700 text-xs pt-1.5 pb-2 text-gray-200 items-center">
+    <div v-for="(col,index) in props.cols" :key="index" class="px-1.5" 
+    :style="`grid-column:${col.col} / span ${col.colSpan ?? 0}; grid-row:${col.row} / span ${col.rowSpan ?? 0};`">
+      <div v-if="!(col.row && col.row>1)" :class="`${col.alignmentClasses} ${col.row && col.row > 1 ? 'text-gray-500 leading-[1.17em]' : ''}`">{{ col.label }}</div>
     </div>
   </div>
 </template>
@@ -22,21 +36,26 @@
 <style scoped>
   .os-grid-cols-auto{
     grid-template-columns: v-bind('colWidthsStyle');
+    grid-template-rows: v-bind('rowWidthsStyle');
   }
-  @media(max-width:768px){
+  @media(max-width:767px){
     .os-grid-cols-auto{
-      grid-template-columns: repeat(2, 1fr);
+      grid-template-columns: 40% 60%;
       grid-template-rows: repeat(2, 1fr);
     }
-    .os-grid-cols-auto>.grid-col:nth-child(1n),
-    .os-grid-cols-auto>.grid-col:nth-child(1n)>div{
+    .os-grid-cols-auto>.grid-col{
+      width:100%;
+    }
+    .os-grid-cols-auto>.grid-col:nth-child(1n){
       text-align: left;
       justify-content: left;
     }
-    .os-grid-cols-auto>.grid-col:nth-child(2n),
-    .os-grid-cols-auto>.grid-col:nth-child(2n)>div{
+    .os-grid-cols-auto>.grid-col:nth-child(2n){
       text-align: right;
       justify-content: right;
     }
+    .os-grid-cols-auto>.grid-col:nth-child(2n+1):last-child{
+      grid-column:span 2;
+    }
   }
 </style>
\ No newline at end of file
diff --git a/src/components/TimeLists/TimesListItem.vue b/src/components/TimeLists/TimesListItem.vue
index cb774c5..6ee0214 100644
--- a/src/components/TimeLists/TimesListItem.vue
+++ b/src/components/TimeLists/TimesListItem.vue
@@ -34,9 +34,9 @@
   })
 
   const colWidthsStyle = computed(()=>{
-    return props.cols.filter((v)=>v.row === undefined || v.row === 1)
-    .sort((a,b)=>a.col - b.col)
-    .map((v)=>v.width ? v.width : 'auto').join(' ');
+    return props.cols.filter((v)=>v.row === undefined || v.row === 1) //only first row
+    .sort((a,b)=>a.col - b.col) //sort into correct col order
+    .map((v)=>v.width ? v.width : 'auto').join(' '); //make css
   })
 
   const rowWidthsStyle = computed(()=>{
@@ -203,32 +203,4 @@
       grid-column:span 2;
     }
   }
-</style>
-
-
-
-<style scoped>
-  .os-grid-cols-auto{
-    grid-template-columns: v-bind('colWidthsStyle');
-  }
-  @media(max-width:767px){
-    .os-grid-cols-auto{
-      grid-template-columns: 40% 60%;
-      grid-template-rows: repeat(2, 1fr);
-    }
-    .os-grid-cols-auto>.grid-col{
-      width:100%;
-    }
-    .os-grid-cols-auto>.grid-col:nth-child(1n){
-      text-align: left;
-      justify-content: left;
-    }
-    .os-grid-cols-auto>.grid-col:nth-child(2n){
-      text-align: right;
-      justify-content: right;
-    }
-    .os-grid-cols-auto>.grid-col:nth-child(2n+1):last-child{
-      grid-column:span 2;
-    }
-  }
 </style>
\ No newline at end of file

From a09dfd29ae3c8a1ce41fcd53803b99feb6867aac Mon Sep 17 00:00:00 2001
From: why-Mia <xenonpowered@gmail.com>
Date: Mon, 15 Sep 2025 00:18:41 +0100
Subject: [PATCH 06/10] adjust recent times column spacing

---
 src/components/RecentTimes.vue | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/src/components/RecentTimes.vue b/src/components/RecentTimes.vue
index eef2e3f..aecea29 100644
--- a/src/components/RecentTimes.vue
+++ b/src/components/RecentTimes.vue
@@ -68,8 +68,9 @@
         colSpan:1,
         row:1,
         rowSpan:2,
-        width: '25%',
-        alignmentClasses: 'text-right justify-end monospace',
+        width: '30%',
+        classes: 'monospace',
+        alignmentClasses: 'text-right justify-end lg:text-left lg:justify-start lg:ml-12',
         numFormat: dateTimeFormats.time
       },
       {
@@ -79,7 +80,7 @@
         colSpan:1,
         row:1,
         rowSpan:1,
-        width: '20%',
+        width: '15%',
         classes: '',
         alignmentClasses: 'text-right justify-end',
         numFormat: styleFormat.name

From fd27bc15e91481c57c6a3ab8ad8362e07c0b249f Mon Sep 17 00:00:00 2001
From: why-Mia <xenonpowered@gmail.com>
Date: Mon, 15 Sep 2025 15:33:13 +0100
Subject: [PATCH 07/10] [WIP] support for separate mobile & desktop styling

---
 src/components/RecentTimes.vue                | 10 ---
 src/components/TimeLists/TimesListItem.vue    | 10 +--
 .../TimeLists/TimesListItemContent.vue        | 62 +++++++++++--------
 3 files changed, 38 insertions(+), 44 deletions(-)

diff --git a/src/components/RecentTimes.vue b/src/components/RecentTimes.vue
index aecea29..e274b97 100644
--- a/src/components/RecentTimes.vue
+++ b/src/components/RecentTimes.vue
@@ -31,7 +31,6 @@
         label: 'Player',
         data: 'name',
         col:1,
-        colSpan:1,
         row:1,
         rowSpan:2,
         width: '20%',
@@ -43,9 +42,7 @@
         label: 'Map',
         data: 'map',
         col:2,
-        colSpan:1,
         row:1,
-        rowSpan:1,
         width: '35%',
         classes: 'text-gray-200',
         alignmentClasses: 'text-right justify-end md:justify-start md:text-left',
@@ -55,9 +52,7 @@
         label: 'Server',
         data: 'server',
         col:2,
-        colSpan:1,
         row:2,
-        rowSpan:1,
         classes: 'text-xs text-gray-400',
         alignmentClasses: 'justify-start text-left'
       },
@@ -65,7 +60,6 @@
         label: 'Time',
         data: 'time',
         col:3,
-        colSpan:1,
         row:1,
         rowSpan:2,
         width: '30%',
@@ -77,9 +71,7 @@
         label: 'Style',
         data: 'style',
         col:4,
-        colSpan:1,
         row:1,
-        rowSpan:1,
         width: '15%',
         classes: '',
         alignmentClasses: 'text-right justify-end',
@@ -89,9 +81,7 @@
         label: 'Date',
         data: 'date',
         col:4,
-        colSpan:1,
         row:2,
-        rowSpan:1,
         classes: 'text-xs text-gray-400',
         alignmentClasses: 'text-right justify-end',
         numFormat: dateTimeFormats.date
diff --git a/src/components/TimeLists/TimesListItem.vue b/src/components/TimeLists/TimesListItem.vue
index 6ee0214..5f0192e 100644
--- a/src/components/TimeLists/TimesListItem.vue
+++ b/src/components/TimeLists/TimesListItem.vue
@@ -140,15 +140,7 @@
       'pb-2' : ''" 
     @click="toggleDetails()"
     @contextmenu="handleRightClick">
-      <div v-for="(col,index) in props.cols" :key="index" class="flex" :class="col.alignmentClasses"
-      :style="`grid-column:${col.col} / span ${col.colSpan ?? 0}; grid-row:${col.row} / span ${col.rowSpan ?? 0};`">
-        <a v-if="col.link" :href="col.link(props.time)" class="group/timeLink flex max-w-full px-1.5" @click.stop :class="`${col.classes} ${col.alignmentClasses}`">
-          <TimesListItemContent :col="col" :time="props.time" :wrTime="props.wrTime"></TimesListItemContent>
-        </a>
-        <div v-else class="flex max-w-full px-1.5" :class="col.classes">
-          <TimesListItemContent :col="col" :time="props.time" :wrTime="props.wrTime"></TimesListItemContent>
-        </div>
-      </div>
+      <TimesListItemContent v-for="(col,index) in props.cols" :key="index" :time="time" :wrTime="wrTime" :col="col"></TimesListItemContent>
     </div>
     <TimesListItemMoreDetails v-if="showDetails" :time="props.time" :cols="moreDetailsCols"></TimesListItemMoreDetails>
 
diff --git a/src/components/TimeLists/TimesListItemContent.vue b/src/components/TimeLists/TimesListItemContent.vue
index 3c5fb78..1884c61 100644
--- a/src/components/TimeLists/TimesListItemContent.vue
+++ b/src/components/TimeLists/TimesListItemContent.vue
@@ -13,6 +13,7 @@
       time: Time,
       wrTime: Time | undefined,
       col: TimeListColumn,
+      key: number | string,
     }>();
     
     const data = computed(()=>{
@@ -38,35 +39,46 @@
 
 
 <template>
-  <span v-if="props.col.placement" class="inline-flex items-center justify-end text-end mr-1.5 min-w-5 text-sm text-gray-400">{{ props.time.rank }}.</span>
-  <div class="flex items-center gap-1.5 w-full min-w-0">
-    <template v-if="props.col.data === 'date'">
-      <RelativeDate :date="(data ?? '') as string | number | Date" class="truncate group-hover/timeLink:underline flex-1" />
-    </template>
-    <template v-else>
-      <span class="truncate group-hover/timeLink:underline flex-1">{{ data }}</span>
-    </template>
-    <!-- Show validity indicator for time column only in player lookup context -->
-    <ValidityIndicator 
-      v-if="props.col.data === 'time' && isPlayerLookupContext"
-      :is-invalid="props.time.is_invalid"
-      :is-banned="props.time.is_banned"
-      size="sm"
-    />
+  <div class="flex time-grid-col" :class="`${col.alignmentClasses}`">
+    <span v-if="props.col.placement" class="inline-flex items-center justify-end text-end mr-1.5 min-w-5 text-sm text-gray-400">{{ props.time.rank }}.</span>
+    <div class="flex items-center gap-1.5 w-full min-w-0">
+      <template v-if="props.col.data === 'date'">
+        <RelativeDate :date="(data ?? '') as string | number | Date" class="truncate group-hover/timeLink:underline flex-1" />
+      </template>
+      <template v-else>
+        <a v-if="col.link" :href="col.link(props.time)" class="group/timeLink flex max-w-full px-1.5" @click.stop :class="`${col.classes} ${col.alignmentClasses}`">
+          <span class="truncate group-hover/timeLink:underline flex-1">{{ data }}</span>
+        </a>
+        <div v-else class="flex max-w-full px-1.5" :class="col.classes">
+          <span class="truncate group-hover/timeLink:underline flex-1">{{ data }}</span>
+        </div>
+      </template>
+      <!-- Show validity indicator for time column only in player lookup context -->
+      <ValidityIndicator 
+        v-if="props.col.data === 'time' && isPlayerLookupContext"
+        :is-invalid="props.time.is_invalid"
+        :is-banned="props.time.is_banned"
+        size="sm"
+      />
+    </div>
+    <span v-if="props.col.data === 'time' && wrTime" 
+    :class="
+      props.time.time - wrTime > 0 ? 'nonWrTimeColor opacity-70' :
+      props.time.time - wrTime < 0 ? 'text-green-600 opacity-80' : 
+    'text-gray-500'
+    "
+    class="ml-1 flex items-center"> 
+      ({{ props.time.time - wrTime > 0 ? '+' : '-' }}{{ dateTimeFormats.time(Math.abs(props.time.time - wrTime)) }})
+    </span>
   </div>
-  <span v-if="props.col.data === 'time' && wrTime" 
-  :class="
-    props.time.time - wrTime > 0 ? 'nonWrTimeColor opacity-70' :
-    props.time.time - wrTime < 0 ? 'text-green-600 opacity-80' : 
-   'text-gray-500'
-  "
-  class="ml-1 flex items-center"> 
-    ({{ props.time.time - wrTime > 0 ? '+' : '-' }}{{ dateTimeFormats.time(Math.abs(props.time.time - wrTime)) }})
-  </span>
 </template>
 
-<style>
+<style scoped>
 .nonWrTimeColor{
   color:hsl(357, v-bind('wrTime ? `${($props.time.time - wrTime)*200+40}%` : "90%"'), 58%)
 }
+.time-grid-col{
+  grid-column: v-bind('`${col.col} / span ${col.colSpan ?? 1}`');
+  grid-row: v-bind('`${col.row ?? 1} / span ${col.rowSpan ?? 1}`')
+}
 </style>
\ No newline at end of file

From 8b3188543a75d5cf3290b57d13917fece98b0f07 Mon Sep 17 00:00:00 2001
From: why-Mia <xenonpowered@gmail.com>
Date: Wed, 17 Sep 2025 01:24:25 +0100
Subject: [PATCH 08/10] add  separate time list cols/rows on mobile

---
 src/components/MapDetails.vue                 | 26 +++++++++++-----
 src/components/PlayerDetails.vue              | 25 +++++++++++-----
 src/components/RecentTimes.vue                | 19 +++++++++++-
 src/components/TimeLists/TimesListHeading.vue | 23 +++++++++++---
 src/components/TimeLists/TimesListItem.vue    | 30 ++++++++++++++-----
 ...temContent.vue => TimesListItemColumn.vue} | 21 ++++++++-----
 src/types/TimeListColumn.ts                   |  5 ++++
 7 files changed, 113 insertions(+), 36 deletions(-)
 rename src/components/TimeLists/{TimesListItemContent.vue => TimesListItemColumn.vue} (80%)

diff --git a/src/components/MapDetails.vue b/src/components/MapDetails.vue
index 6203947..fac011d 100644
--- a/src/components/MapDetails.vue
+++ b/src/components/MapDetails.vue
@@ -43,6 +43,8 @@
       placement: true,
       width:'25%',
       col:1,
+      colMobile:1,
+      widthMobile:'40%',
       alignmentClasses: 'text-left',
       link: timeLinks.playerLink
     }, 
@@ -51,23 +53,31 @@
       data: 'server',
       width: '30%',
       col:2,
+      colMobile:1,
+      rowMobile:2,
       classes: 'text-sm text-gray-400',
       alignmentClasses: 'text-left text-gray-300'
     },
-    {
-      label: 'Date',
-      data: 'date',
-      width:'15%',
-      col:3,
-      alignmentClasses: 'text-right justify-end',
-    },
     {
       label: 'Time',
       data: 'time',
       width: '30%',
-      col:4,
+      col:3,
+      colMobile:2,
+      colSpanMobile:2,
+      rowMobile:1,
+      widthMobile:'20%',
       alignmentClasses: 'text-right justify-end monospace',
       numFormat: dateTimeFormats.time
+    },
+    {
+      label: 'Date',
+      data: 'date',
+      width:'15%',
+      col:4,
+      colMobile:3,
+      rowMobile:2,
+      alignmentClasses: 'text-right justify-end',
     }]"
     @refresh-data="() => emit('updateMap', props.mapName)"
     ></TimesList>
diff --git a/src/components/PlayerDetails.vue b/src/components/PlayerDetails.vue
index 301bb3c..11c12e8 100644
--- a/src/components/PlayerDetails.vue
+++ b/src/components/PlayerDetails.vue
@@ -164,6 +164,8 @@
       data: 'map',
       width:'25%',
       col:1,
+      colMobile:1,
+      widthMobile:'35%',
       alignmentClasses: 'text-left',
       link: timeLinks.mapLink
     }, 
@@ -172,23 +174,30 @@
       data: 'server',
       width: '30%',
       col:2,
+      colMobile:1,
+      rowMobile:2,
       classes: 'text-sm text-gray-400',
       alignmentClasses: 'text-left text-gray-300'
     },
-    {
-      label: 'Date',
-      data: 'date',
-      width:'15%',
-      col:3,
-      alignmentClasses: 'text-right justify-end',
-    },
     {
       label: 'Time',
       data: 'time',
       width: '30%',
-      col:4,
+      col:3,
+      colMobile:2,
+      colSpanMobile:2,
+      widthMobile:'20%',
       alignmentClasses: 'text-right justify-end monospace',
       numFormat: dateTimeFormats.time
+    },
+    {
+      label: 'Date',
+      data: 'date',
+      width:'15%',
+      col:4,
+      colMobile:3,
+      rowMobile:2,
+      alignmentClasses: 'text-right justify-end',
     }]"
     @refresh-data="() => emit('updatePlayer', props.playerSteamId)"
     ></TimesList>
diff --git a/src/components/RecentTimes.vue b/src/components/RecentTimes.vue
index e274b97..e71b8f9 100644
--- a/src/components/RecentTimes.vue
+++ b/src/components/RecentTimes.vue
@@ -33,7 +33,10 @@
         col:1,
         row:1,
         rowSpan:2,
+        colMobile: 1,
+        rowMobile: 1,
         width: '20%',
+        widthMobile:'30%',
         classes: 'font-semibold',
         alignmentClasses: 'text-left',
         link: timeLinks.playerLink
@@ -43,9 +46,12 @@
         data: 'map',
         col:2,
         row:1,
+        colMobile:1,
+        colSpanMobile:2,
+        rowMobile:2,
         width: '35%',
         classes: 'text-gray-200',
-        alignmentClasses: 'text-right justify-end md:justify-start md:text-left',
+        alignmentClasses: 'text-left justify-start',
         link: timeLinks.mapLink
       },
       {
@@ -53,6 +59,9 @@
         data: 'server',
         col:2,
         row:2,
+        colMobile:1,
+        colSpanMobile:2,
+        rowMobile:3,
         classes: 'text-xs text-gray-400',
         alignmentClasses: 'justify-start text-left'
       },
@@ -62,7 +71,11 @@
         col:3,
         row:1,
         rowSpan:2,
+        colMobile:2,
+        colSpanMobile:2,
+        rowMobile:1,
         width: '30%',
+        widthMobile: '20%',
         classes: 'monospace',
         alignmentClasses: 'text-right justify-end lg:text-left lg:justify-start lg:ml-12',
         numFormat: dateTimeFormats.time
@@ -72,6 +85,8 @@
         data: 'style',
         col:4,
         row:1,
+        colMobile:3,
+        rowMobile:2,
         width: '15%',
         classes: '',
         alignmentClasses: 'text-right justify-end',
@@ -82,6 +97,8 @@
         data: 'date',
         col:4,
         row:2,
+        colMobile:3,
+        rowMobile:3,
         classes: 'text-xs text-gray-400',
         alignmentClasses: 'text-right justify-end',
         numFormat: dateTimeFormats.date
diff --git a/src/components/TimeLists/TimesListHeading.vue b/src/components/TimeLists/TimesListHeading.vue
index d1cf9f1..125a222 100644
--- a/src/components/TimeLists/TimesListHeading.vue
+++ b/src/components/TimeLists/TimesListHeading.vue
@@ -5,7 +5,7 @@
       cols: TimeListColumn[]
     }>();
 
-    const totalCols = computed(()=>{
+  const totalCols = computed(()=>{
     return Math.max(...props.cols.map((v)=>{return v.col && v.colSpan ? v.col+v.colSpan : 1}));
   })
   const totalRows = computed(()=>{
@@ -21,13 +21,28 @@
   const rowWidthsStyle = computed(()=>{
     return '1fr'; 
   })
+
+    const totalRowsMobile = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.rowMobile && v.rowSpanMobile ? v.rowMobile+v.rowSpanMobile : 1}));
+  })
+
+  const colWidthsStyleMobile = computed(()=>{
+    return props.cols.filter((v)=>(v.rowMobile === undefined || v.rowMobile === 1)) //only first row
+    .sort((a,b)=>(a.colMobile ?? 1) - (b.colMobile ?? 1)) //sort into correct col order
+    .map((v)=>v.widthMobile ? v.widthMobile : 'auto').join(' '); //make css
+  })
+
+  const rowWidthsStyleMobile = computed(()=>{
+    return totalRowsMobile.value > 1 ? '1fr 0.5fr' : '1fr'; 
+  })
+
 </script>
 
 
 <template>
   <div class="grid os-grid-cols-auto px-1 bg-main-900 fw-700 text-xs pt-1.5 pb-2 text-gray-200 items-center">
     <div v-for="(col,index) in props.cols" :key="index" class="px-1.5" 
-    :style="`grid-column:${col.col} / span ${col.colSpan ?? 0}; grid-row:${col.row} / span ${col.rowSpan ?? 0};`">
+    :style="`grid-column:${col.col} / span ${col.colSpan ?? 1}; grid-row:${col.row ?? 1} / span ${col.rowSpan ?? 1};`">
       <div v-if="!(col.row && col.row>1)" :class="`${col.alignmentClasses} ${col.row && col.row > 1 ? 'text-gray-500 leading-[1.17em]' : ''}`">{{ col.label }}</div>
     </div>
   </div>
@@ -40,8 +55,8 @@
   }
   @media(max-width:767px){
     .os-grid-cols-auto{
-      grid-template-columns: 40% 60%;
-      grid-template-rows: repeat(2, 1fr);
+      grid-template-columns: v-bind('colWidthsStyleMobile');
+      grid-template-rows: v-bind('rowWidthsStyleMobile');
     }
     .os-grid-cols-auto>.grid-col{
       width:100%;
diff --git a/src/components/TimeLists/TimesListItem.vue b/src/components/TimeLists/TimesListItem.vue
index 5f0192e..389ff1a 100644
--- a/src/components/TimeLists/TimesListItem.vue
+++ b/src/components/TimeLists/TimesListItem.vue
@@ -3,7 +3,7 @@
   import type { TimeListColumn } from '@/types/TimeListColumn';
   import type { Ref } from 'vue';
   import { computed, ref } from 'vue';
-  import TimesListItemContent from './TimesListItemContent.vue';
+  import TimesListItemColumn from './TimesListItemColumn.vue';
   import TimesListItemMoreDetails from './TimesListItemMoreDetails.vue';
   import ModerationModal from '../Moderation/ModerationModal.vue';
   import { useModerationStore, type ModerationTarget } from '@/stores/moderation';
@@ -43,6 +43,20 @@
     return totalRows.value > 1 ? '1fr 0.5fr' : '1fr'; 
   })
 
+  const totalRowsMobile = computed(()=>{
+    return Math.max(...props.cols.map((v)=>{return v.rowMobile && v.rowSpanMobile ? v.rowMobile+v.rowSpanMobile : 1}));
+  })
+
+  const colWidthsStyleMobile = computed(()=>{
+    return props.cols.filter((v)=>(v.rowMobile === undefined || v.rowMobile === 1)) //only first row
+    .sort((a,b)=>(a.colMobile ?? 1) - (b.colMobile ?? 1)) //sort into correct col order
+    .map((v)=>v.widthMobile ? v.widthMobile : 'auto').join(' '); //make css
+  })
+
+  const rowWidthsStyleMobile = computed(()=>{
+    return totalRowsMobile.value > 1 ? '1fr 0.5fr' : '1fr'; 
+  })
+
   const moreDetailsCols: TimeListColumn[] = [
     {
       label:'Jumps',
@@ -140,7 +154,7 @@
       'pb-2' : ''" 
     @click="toggleDetails()"
     @contextmenu="handleRightClick">
-      <TimesListItemContent v-for="(col,index) in props.cols" :key="index" :time="time" :wrTime="wrTime" :col="col"></TimesListItemContent>
+      <TimesListItemColumn v-for="(col,index) in props.cols" :key="index" :time="time" :wrTime="wrTime" :col="col"></TimesListItemColumn>
     </div>
     <TimesListItemMoreDetails v-if="showDetails" :time="props.time" :cols="moreDetailsCols"></TimesListItemMoreDetails>
 
@@ -171,14 +185,16 @@
 </template>
 
 <style scoped>
-  .os-grid-cols-auto{
-    grid-template-columns: v-bind('colWidthsStyle');
-    grid-template-rows: v-bind('rowWidthsStyle');
+  @media(min-width:768px){
+    .os-grid-cols-auto{
+      grid-template-columns: v-bind('colWidthsStyle');
+      grid-template-rows: v-bind('rowWidthsStyle');
+    }
   }
   @media(max-width:767px){
     .os-grid-cols-auto{
-      grid-template-columns: 40% 60%;
-      grid-template-rows: repeat(2, 1fr);
+      grid-template-columns: v-bind('colWidthsStyleMobile');
+      grid-template-rows: v-bind('rowWidthsStyleMobile');
     }
     .os-grid-cols-auto>.grid-col{
       width:100%;
diff --git a/src/components/TimeLists/TimesListItemContent.vue b/src/components/TimeLists/TimesListItemColumn.vue
similarity index 80%
rename from src/components/TimeLists/TimesListItemContent.vue
rename to src/components/TimeLists/TimesListItemColumn.vue
index 1884c61..e6f49b3 100644
--- a/src/components/TimeLists/TimesListItemContent.vue
+++ b/src/components/TimeLists/TimesListItemColumn.vue
@@ -13,7 +13,6 @@
       time: Time,
       wrTime: Time | undefined,
       col: TimeListColumn,
-      key: number | string,
     }>();
     
     const data = computed(()=>{
@@ -39,18 +38,18 @@
 
 
 <template>
-  <div class="flex time-grid-col" :class="`${col.alignmentClasses}`">
+  <div class="flex time-grid-col px-1.5" :class="`${col.alignmentClasses}`">
     <span v-if="props.col.placement" class="inline-flex items-center justify-end text-end mr-1.5 min-w-5 text-sm text-gray-400">{{ props.time.rank }}.</span>
-    <div class="flex items-center gap-1.5 w-full min-w-0">
+    <div class="flex items-center gap-1.5 max-w-full min-w-0">
       <template v-if="props.col.data === 'date'">
-        <RelativeDate :date="(data ?? '') as string | number | Date" class="truncate group-hover/timeLink:underline flex-1" />
+        <RelativeDate :date="(data ?? '') as string | number | Date" class="truncate group-hover/timeLink:underline flex-1" :class="`${col.classes}`" />
       </template>
       <template v-else>
-        <a v-if="col.link" :href="col.link(props.time)" class="group/timeLink flex max-w-full px-1.5" @click.stop :class="`${col.classes} ${col.alignmentClasses}`">
+        <a v-if="col.link" :href="col.link(props.time)" class="group/timeLink flex max-w-full" @click.stop :class="`${col.classes}`">
           <span class="truncate group-hover/timeLink:underline flex-1">{{ data }}</span>
         </a>
-        <div v-else class="flex max-w-full px-1.5" :class="col.classes">
-          <span class="truncate group-hover/timeLink:underline flex-1">{{ data }}</span>
+        <div v-else class="max-w-full" :class="`${col.classes}`">
+          <span class="truncate group-hover/timeLink:underline flex-1 max-w-full block">{{ data }}</span>
         </div>
       </template>
       <!-- Show validity indicator for time column only in player lookup context -->
@@ -67,7 +66,7 @@
       props.time.time - wrTime < 0 ? 'text-green-600 opacity-80' : 
     'text-gray-500'
     "
-    class="ml-1 flex items-center"> 
+    class="ml-1 flex items-center monospace text-xs"> 
       ({{ props.time.time - wrTime > 0 ? '+' : '-' }}{{ dateTimeFormats.time(Math.abs(props.time.time - wrTime)) }})
     </span>
   </div>
@@ -81,4 +80,10 @@
   grid-column: v-bind('`${col.col} / span ${col.colSpan ?? 1}`');
   grid-row: v-bind('`${col.row ?? 1} / span ${col.rowSpan ?? 1}`')
 }
+@media (max-width:767px) {
+  .time-grid-col{
+    grid-column: v-bind('`${col.colMobile ?? 1} / span ${col.colSpanMobile ?? 1}`');
+    grid-row: v-bind('`${col.rowMobile ?? 1} / span ${col.rowSpanMobile ?? 1}`')
+  }
+}
 </style>
\ No newline at end of file
diff --git a/src/types/TimeListColumn.ts b/src/types/TimeListColumn.ts
index d09fe86..944aad6 100644
--- a/src/types/TimeListColumn.ts
+++ b/src/types/TimeListColumn.ts
@@ -8,7 +8,12 @@ export interface TimeListColumn {
     colSpan?:number,
     row?:number,
     rowSpan?:number,
+    colMobile?:number,
+    colSpanMobile?:number,
+    rowMobile?:number,
+    rowSpanMobile?:number,
     width?: string,
+    widthMobile?: string,
     classes?: string,
     alignmentClasses?: string,
     link?: ((value: Time) => string),

From 22bcddd25064d7c4f27e4fb3f87f7f1458777628 Mon Sep 17 00:00:00 2001
From: why-Mia <xenonpowered@gmail.com>
Date: Wed, 17 Sep 2025 22:14:51 +0100
Subject: [PATCH 09/10] adjust recent times column spacing

---
 src/components/RecentTimes.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/RecentTimes.vue b/src/components/RecentTimes.vue
index e71b8f9..397c358 100644
--- a/src/components/RecentTimes.vue
+++ b/src/components/RecentTimes.vue
@@ -77,7 +77,7 @@
         width: '30%',
         widthMobile: '20%',
         classes: 'monospace',
-        alignmentClasses: 'text-right justify-end lg:text-left lg:justify-start lg:ml-12',
+        alignmentClasses: 'text-right justify-end lg:text-left lg:justify-start lg:ml-16',
         numFormat: dateTimeFormats.time
       },
       {

From 96edf2e8009b55392f93705ab9989d6d154b9fb9 Mon Sep 17 00:00:00 2001
From: why-Mia <xenonpowered@gmail.com>
Date: Wed, 17 Sep 2025 22:15:55 +0100
Subject: [PATCH 10/10] fix time list column headings on mobile

---
 src/components/TimeLists/TimesListHeading.vue | 13 +++++----
 .../TimeLists/TimesListHeadingColumn.vue      | 29 +++++++++++++++++++
 2 files changed, 36 insertions(+), 6 deletions(-)
 create mode 100644 src/components/TimeLists/TimesListHeadingColumn.vue

diff --git a/src/components/TimeLists/TimesListHeading.vue b/src/components/TimeLists/TimesListHeading.vue
index 125a222..355d35d 100644
--- a/src/components/TimeLists/TimesListHeading.vue
+++ b/src/components/TimeLists/TimesListHeading.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
   import type { TimeListColumn } from '@/types/TimeListColumn';
+  import TimesListHeadingColumn from './TimesListHeadingColumn.vue';
   import { computed } from 'vue';
   const props = defineProps<{
       cols: TimeListColumn[]
@@ -26,6 +27,10 @@
     return Math.max(...props.cols.map((v)=>{return v.rowMobile && v.rowSpanMobile ? v.rowMobile+v.rowSpanMobile : 1}));
   })
 
+  const firstRowCols = computed(()=>{
+    return props.cols.filter((v)=>v.row === undefined || v.row === 1);
+  })
+  
   const colWidthsStyleMobile = computed(()=>{
     return props.cols.filter((v)=>(v.rowMobile === undefined || v.rowMobile === 1)) //only first row
     .sort((a,b)=>(a.colMobile ?? 1) - (b.colMobile ?? 1)) //sort into correct col order
@@ -34,17 +39,13 @@
 
   const rowWidthsStyleMobile = computed(()=>{
     return totalRowsMobile.value > 1 ? '1fr 0.5fr' : '1fr'; 
-  })
-
+  });
 </script>
 
 
 <template>
   <div class="grid os-grid-cols-auto px-1 bg-main-900 fw-700 text-xs pt-1.5 pb-2 text-gray-200 items-center">
-    <div v-for="(col,index) in props.cols" :key="index" class="px-1.5" 
-    :style="`grid-column:${col.col} / span ${col.colSpan ?? 1}; grid-row:${col.row ?? 1} / span ${col.rowSpan ?? 1};`">
-      <div v-if="!(col.row && col.row>1)" :class="`${col.alignmentClasses} ${col.row && col.row > 1 ? 'text-gray-500 leading-[1.17em]' : ''}`">{{ col.label }}</div>
-    </div>
+    <TimesListHeadingColumn v-for="(col,index) in firstRowCols" :col="col" :key="index"></TimesListHeadingColumn>
   </div>
 </template>
 
diff --git a/src/components/TimeLists/TimesListHeadingColumn.vue b/src/components/TimeLists/TimesListHeadingColumn.vue
new file mode 100644
index 0000000..352f549
--- /dev/null
+++ b/src/components/TimeLists/TimesListHeadingColumn.vue
@@ -0,0 +1,29 @@
+<script setup lang="ts">
+  import type { TimeListColumn } from '@/types/TimeListColumn';
+  import { computed } from 'vue';
+  const props = defineProps<{
+      col: TimeListColumn
+    }>();
+
+
+</script>
+
+
+<template>
+    <div class="px-1.5 time-grid-heading-col">
+      <div :class="`${col.alignmentClasses} ${col.row && col.row > 1 ? 'text-gray-500 leading-[1.17em]' : ''}`">{{ col.label }}</div>
+    </div>
+</template>
+
+<style scoped>
+.time-grid-heading-col{
+  grid-column: v-bind('`${col.col} / span ${col.colSpan ?? 1}`');
+  grid-row: v-bind('`${col.row ?? 1} / span ${col.rowSpan ?? 1}`')
+}
+@media (max-width:767px) {
+  .time-grid-heading-col{
+    grid-column: v-bind('`${col.colMobile ?? 1} / span ${col.colSpanMobile ?? 1}`');
+    grid-row: v-bind('`${col.rowMobile ?? 1} / span ${col.rowSpanMobile ?? 1}`')
+  }
+}
+</style>
\ No newline at end of file