From 8e242237a575b9ec9d852de54e55e2a5151feead Mon Sep 17 00:00:00 2001
From: Ben Brown <9870007+brownben@users.noreply.github.com>
Date: Wed, 31 Jan 2024 13:03:33 +0000
Subject: [PATCH] fix: table "Name" heading padding

---
 frontend/components/Table/LeagueResults.vue |   2 +-
 frontend/components/Table/Results.vue       |   2 +-
 frontend/pages/events/[id]/results.vue      | 112 ++++++++++----------
 3 files changed, 59 insertions(+), 57 deletions(-)

diff --git a/frontend/components/Table/LeagueResults.vue b/frontend/components/Table/LeagueResults.vue
index aeae81d2..87e8f45e 100644
--- a/frontend/components/Table/LeagueResults.vue
+++ b/frontend/components/Table/LeagueResults.vue
@@ -63,7 +63,7 @@ const ariaSorted = computed(() => {
         <th :aria-sort="ariaSorted?.name">
           <button
             type="button"
-            class="rounded px-1 ring-main-200 focus:outline-none focus-visible:ring"
+            class="rounded ring-main-200 focus:outline-none focus-visible:ring"
             @click="changeSortPreference('name')"
           >
             <span class="font-medium sm:hidden">Athlete</span>
diff --git a/frontend/components/Table/Results.vue b/frontend/components/Table/Results.vue
index b1f17106..80540b36 100644
--- a/frontend/components/Table/Results.vue
+++ b/frontend/components/Table/Results.vue
@@ -52,7 +52,7 @@ const ariaSorted = computed(
         <th :aria-sort="ariaSorted?.name">
           <button
             type="button"
-            class="rounded px-1 ring-main-200 focus:outline-none focus-visible:ring"
+            class="rounded ring-main-200 focus:outline-none focus-visible:ring"
             @click="changeSortPreference('name')"
           >
             <span class="font-medium sm:hidden">Athlete</span>
diff --git a/frontend/pages/events/[id]/results.vue b/frontend/pages/events/[id]/results.vue
index 4f8e60b9..4ae65a98 100644
--- a/frontend/pages/events/[id]/results.vue
+++ b/frontend/pages/events/[id]/results.vue
@@ -37,63 +37,65 @@ if (event.value) {
 }
 </script>
 <template>
-  <div v-if="event" class="flex h-full flex-grow flex-col">
-    <Heading
-      :title="event.name"
-      :link-text="event.league"
-      :link-location="`/leagues/${event.league}`"
-    >
-      <template v-if="Object.keys(event.results_links).length > 0" #default>
-        <ResultsLinks :links="event.results_links" />
-      </template>
-      <template #rightAction>
-        <button
-          class="inline-flex select-none items-center rounded-md bg-gradient-to-r from-main-500 to-main-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition duration-200 hover:from-main-600 hover:to-main-700 focus:outline-none focus:ring-2 focus:ring-main-600 focus:ring-offset-2 print:hidden"
-          @click="show = !show"
-        >
-          <AdjustmentsVerticalIcon
-            class="-ml-1 mr-2 h-5 w-5"
-            aria-hidden="true"
-          />
-          <span>Filter Results</span>
-        </button>
-      </template>
-    </Heading>
+  <div v-if="event" class="flex h-full flex-grow flex-col gap-8">
+    <div>
+      <Heading
+        :title="event.name"
+        :link-text="event.league"
+        :link-location="`/leagues/${event.league}`"
+      >
+        <template v-if="Object.keys(event.results_links).length > 0" #default>
+          <ResultsLinks :links="event.results_links" />
+        </template>
+        <template #rightAction>
+          <button
+            class="inline-flex select-none items-center rounded-md bg-gradient-to-r from-main-500 to-main-600 px-4 py-2 text-sm font-medium text-white shadow-sm transition duration-200 hover:from-main-600 hover:to-main-700 focus:outline-none focus:ring-2 focus:ring-main-600 focus:ring-offset-2 print:hidden"
+            @click="show = !show"
+          >
+            <AdjustmentsVerticalIcon
+              class="-ml-1 mr-2 h-5 w-5"
+              aria-hidden="true"
+            />
+            <span>Filter Results</span>
+          </button>
+        </template>
+      </Heading>
 
-    <transition
-      enter-from-class="scale-y-95 opacity-0 "
-      enter-active-class="duration-300 origin-top motion-safe:transform"
-      enter-to-class="scale-y-100 opacity-100"
-      leave-from-class="scale-y-100 opacity-100"
-      leave-active-class="duration-300 origin-top motion-safe:transform"
-      leave-to-class="scale-y-95 opacity-0 "
-    >
-      <section v-if="show" class="bg-gray-50 print:hidden">
-        <div
-          class="mx-auto grid max-w-screen-lg grid-cols-2 gap-6 p-8 pt-4 sm:grid-cols-4 sm:pt-0 lg:px-8"
-        >
-          <Input v-model="filters.name" label="Name:" class="col-span-2" />
-          <Input v-model="filters.club" label="Club:" class="col-span-2" />
-          <Input
-            v-model="filters.minAge"
-            label="Min. Age:"
-            type="number"
-            :form-props="{ max: 120, min: 0, step: 1 }"
-          />
-          <Input
-            v-model="filters.maxAge"
-            label="Max. Age:"
-            type="number"
-            :form-props="{ max: 120, min: 0, step: 1 }"
-          />
-          <InputSwitch v-model="filters.male" label="Male:" />
-          <InputSwitch v-model="filters.female" label="Female:" />
-        </div>
-      </section>
-    </transition>
+      <transition
+        enter-from-class="scale-y-95 opacity-0 "
+        enter-active-class="duration-300 origin-top motion-safe:transform"
+        enter-to-class="scale-y-100 opacity-100"
+        leave-from-class="scale-y-100 opacity-100"
+        leave-active-class="duration-300 origin-top motion-safe:transform"
+        leave-to-class="scale-y-95 opacity-0 "
+      >
+        <section v-if="show" class="bg-gray-50 print:hidden">
+          <div
+            class="mx-auto grid max-w-screen-lg grid-cols-2 gap-6 p-8 pt-4 sm:grid-cols-4 sm:pt-0 lg:px-8"
+          >
+            <Input v-model="filters.name" label="Name:" class="col-span-2" />
+            <Input v-model="filters.club" label="Club:" class="col-span-2" />
+            <Input
+              v-model="filters.minAge"
+              label="Min. Age:"
+              type="number"
+              :form-props="{ max: 120, min: 0, step: 1 }"
+            />
+            <Input
+              v-model="filters.maxAge"
+              label="Max. Age:"
+              type="number"
+              :form-props="{ max: 120, min: 0, step: 1 }"
+            />
+            <InputSwitch v-model="filters.male" label="Male:" />
+            <InputSwitch v-model="filters.female" label="Female:" />
+          </div>
+        </section>
+      </transition>
+    </div>
 
     <div
-      class="mx-auto flex w-full max-w-screen-lg flex-grow flex-row flex-wrap gap-x-4 gap-y-2 px-6 pt-8 lg:px-8 print:hidden"
+      class="mx-auto flex w-full max-w-screen-lg flex-grow flex-row flex-wrap gap-x-4 gap-y-2 px-6 lg:px-8 print:hidden"
     >
       <p class="w-full py-1 pr-2 font-bold text-gray-500 sm:w-auto">Courses:</p>
       <NuxtLink
@@ -109,7 +111,7 @@ if (event.value) {
     <section
       v-for="course in courses"
       :key="course"
-      class="mx-auto w-full max-w-screen-lg flex-grow py-8 sm:py-12 lg:px-8"
+      class="mx-auto w-full max-w-screen-lg flex-grow lg:px-8 pb-4"
     >
       <div class="flex items-center gap-3 px-6 pb-4 sm:pb-6 lg:px-0">
         <h2