From 9071e39e5f570cd569ea637dbf3968adb222d467 Mon Sep 17 00:00:00 2001
From: Billy Wu <bobpost515@gmail.com>
Date: Thu, 21 Nov 2024 01:01:58 -0500
Subject: [PATCH] Noticeable changes that need small fixes (#93)

---
 apps/ui/src/components/Markdown.vue           |  7 +++++-
 .../person/PersonDetailsInput/ReviewTable.vue |  4 ++--
 .../person/PersonDetailsInput/RoleRow.vue     |  2 +-
 apps/ui/src/components/person/PersonList.vue  |  5 ----
 apps/ui/src/graphql/FindPersonRoles.graphql   |  8 ++-----
 apps/ui/src/graphql/types.ts                  |  5 ++--
 apps/ui/src/views/AboutView.vue               | 10 +++++---
 apps/ui/src/views/PersonView.vue              | 24 +++++++++++++++----
 .../src/views/account/AccountProfileView.vue  |  5 +++-
 9 files changed, 44 insertions(+), 26 deletions(-)

diff --git a/apps/ui/src/components/Markdown.vue b/apps/ui/src/components/Markdown.vue
index 36c4287f..e661b1b0 100644
--- a/apps/ui/src/components/Markdown.vue
+++ b/apps/ui/src/components/Markdown.vue
@@ -20,7 +20,12 @@ function formatNode(node: VNodeArrayChildren | VNodeChild): VNode {
   }
 
   if(typeof node === "string") {
-    return h("div", { innerHTML: DOMPurify.sanitize(marked(node)) });
+    return h("div", { innerHTML: marked(DOMPurify.sanitize(node, {
+		    ALLOWED_TAGS: ["kbd", "mark", "q", "ruby", "rp", "rt", "sub", "sup", "wbr", "details", "summary"],
+		    ALLOWED_ATTR: ["cite", "open", "translate"],
+		    ALLOW_ARIA_ATTR: false,
+		    ALLOW_DATA_ATTR: false
+	    })) });
   }
 
   if(Array.isArray(node)) {
diff --git a/apps/ui/src/components/person/PersonDetailsInput/ReviewTable.vue b/apps/ui/src/components/person/PersonDetailsInput/ReviewTable.vue
index d1412f1e..16ba9151 100644
--- a/apps/ui/src/components/person/PersonDetailsInput/ReviewTable.vue
+++ b/apps/ui/src/components/person/PersonDetailsInput/ReviewTable.vue
@@ -23,10 +23,10 @@
           <td>Image(s)</td>
           <td>
             <v-chip-group column v-if="images.length">
-              <v-dialog v-for="image in images" :key="image.id" width="400" scrim="black">
+              <v-dialog v-for="image in images" :key="image.imageId" width="400" scrim="black">
                 <template #activator="{ props }">
                   <v-chip v-bind="props" >
-                    Image ID: {{ image.id }}
+                    Image ID: {{ image.imageId }}
                   </v-chip>
                 </template>
                 <template #default>
diff --git a/apps/ui/src/components/person/PersonDetailsInput/RoleRow.vue b/apps/ui/src/components/person/PersonDetailsInput/RoleRow.vue
index a36a81c3..5e242938 100644
--- a/apps/ui/src/components/person/PersonDetailsInput/RoleRow.vue
+++ b/apps/ui/src/components/person/PersonDetailsInput/RoleRow.vue
@@ -4,7 +4,7 @@
     <div class="chip-group">
       <v-dialog v-for="(role, i) in roles" :key="role.roleId" max-width="500">
         <template #activator="{ props }">
-          <v-chip class="ml-1" closable v-bind="props"
+          <v-chip class="ml-1" closable v-bind="props" v-tooltip="role.role?.name"
                 @click:close="roles.splice(i, 1)" >
             <v-icon icon="fa:fas fa-pen-to-square" />&nbsp;Role ID: {{ role.roleId }}
           </v-chip>
diff --git a/apps/ui/src/components/person/PersonList.vue b/apps/ui/src/components/person/PersonList.vue
index fffc558b..0ef2e2c0 100644
--- a/apps/ui/src/components/person/PersonList.vue
+++ b/apps/ui/src/components/person/PersonList.vue
@@ -46,9 +46,6 @@
      :loading="queryData.loading.value"
      loading-text="Loading People..."
     >
-      <template #item.description="{ item }">
-        {{ item.description?.length ? item.description : "No description provided." }}
-      </template>
       <template #item.actions="{ index, item }">
         <RouterPopup
           v-if="ability.can(AbilityActions.Update, subject(AbilitySubjects.Person, {
@@ -153,7 +150,6 @@ const deleteMutation = useMutation(DeletePersonDocument);
 const headers = [
   { title: "ID", sortable: true, key: "id" },
   { title: "Name", key: "name", sortable: true },
-  { title: "Description", key: "description", sortable: false},
   { title: "Actions", key: "actions", sortable: false, minWidth: "150px" }
 ]
 
@@ -210,7 +206,6 @@ function canDelete(person: Person): boolean {
   return ability.can(AbilityActions.Delete, subject(AbilitySubjects.Person, {
     id: person.id,
     name: person.name,
-    description: person.description,
   }))
 }
 
diff --git a/apps/ui/src/graphql/FindPersonRoles.graphql b/apps/ui/src/graphql/FindPersonRoles.graphql
index 021e8def..ed82a48c 100644
--- a/apps/ui/src/graphql/FindPersonRoles.graphql
+++ b/apps/ui/src/graphql/FindPersonRoles.graphql
@@ -1,26 +1,22 @@
-query FindPersonRoles($filter: FilterPersonRoleInput) {
+query FindPersonRoles($filter: FilterPersonRoleInput, $pagination: PaginationInput!) {
   totalPersonRoles: personRoleCount(filter: $filter)
-  personRoles: findManyPersonRole(filter: $filter) {
+  personRoles: findManyPersonRole(filter: $filter, pagination: $pagination) {
     id
     startTime
     endTime
     person {
-      id
       name
       profilePicture {
-        id
         name
         path
       }
     }
     role {
       name
-      description
       displayInLeadership
       displayInMembership
       priority
     }
     personId
-
   }
 }
diff --git a/apps/ui/src/graphql/types.ts b/apps/ui/src/graphql/types.ts
index 330f4f90..559ac4b0 100644
--- a/apps/ui/src/graphql/types.ts
+++ b/apps/ui/src/graphql/types.ts
@@ -3068,10 +3068,11 @@ export type FindPersonImageQuery = { __typename?: 'Query', personImageCount: num
 
 export type FindPersonRolesQueryVariables = Exact<{
   filter?: InputMaybe<FilterPersonRoleInput>;
+  pagination: PaginationInput;
 }>;
 
 
-export type FindPersonRolesQuery = { __typename?: 'Query', totalPersonRoles: number, personRoles: Array<{ __typename?: 'PersonRole', id?: any | null, startTime?: any | null, endTime?: any | null, personId?: any | null, person?: { __typename?: 'Person', id?: any | null, name?: string | null, profilePicture?: { __typename?: 'Image', id?: any | null, name?: string | null, path?: string | null } | null } | null, role?: { __typename?: 'Role', name?: string | null, description?: string | null, displayInLeadership?: boolean | null, displayInMembership?: boolean | null, priority?: number | null } | null }> };
+export type FindPersonRolesQuery = { __typename?: 'Query', totalPersonRoles: number, personRoles: Array<{ __typename?: 'PersonRole', id?: any | null, startTime?: any | null, endTime?: any | null, personId?: any | null, person?: { __typename?: 'Person', name?: string | null, profilePicture?: { __typename?: 'Image', name?: string | null, path?: string | null } | null } | null, role?: { __typename?: 'Role', name?: string | null, displayInLeadership?: boolean | null, displayInMembership?: boolean | null, priority?: number | null } | null }> };
 
 export type FindProductionTagsQueryVariables = Exact<{
   filter?: InputMaybe<FilterProductionTagInput>;
@@ -3520,7 +3521,7 @@ export const FindLiveProductionsDocument = {"kind":"Document","definitions":[{"k
 export const FindOnePersonDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindOnePerson"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"id"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"BigInt"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"person"},"name":{"kind":"Name","value":"findOnePerson"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"id"},"value":{"kind":"Variable","name":{"kind":"Name","value":"id"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"graduation"}},{"kind":"Field","name":{"kind":"Name","value":"pronouns"}},{"kind":"Field","name":{"kind":"Name","value":"roles"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"endTime"}},{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"role"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}}]}},{"kind":"Field","name":{"kind":"Name","value":"roleId"}},{"kind":"Field","name":{"kind":"Name","value":"startTime"}}]}},{"kind":"Field","name":{"kind":"Name","value":"profilePicture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"Field","name":{"kind":"Name","value":"images"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"path"}},{"kind":"Field","name":{"kind":"Name","value":"description"}}]}},{"kind":"Field","name":{"kind":"Name","value":"imageId"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}}]}}]}}]}}]} as unknown as DocumentNode<FindOnePersonQuery, FindOnePersonQueryVariables>;
 export const FindPeopleDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindPeople"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"FilterPersonInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"order"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"OrderPersonInput"}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"personCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}]},{"kind":"Field","alias":{"kind":"Name","value":"people"},"name":{"kind":"Name","value":"findManyPerson"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}},{"kind":"Argument","name":{"kind":"Name","value":"order"},"value":{"kind":"Variable","name":{"kind":"Name","value":"order"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"graduation"}},{"kind":"Field","name":{"kind":"Name","value":"pronouns"}},{"kind":"Field","name":{"kind":"Name","value":"profilePicture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"Field","name":{"kind":"Name","value":"users"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}}]}}]}}]} as unknown as DocumentNode<FindPeopleQuery, FindPeopleQueryVariables>;
 export const FindPersonImageDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindPersonImage"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"FilterPersonImageInput"}}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"order"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"OrderPersonImageInput"}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"personImageCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}]},{"kind":"Field","alias":{"kind":"Name","value":"personImages"},"name":{"kind":"Name","value":"findManyPersonImage"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}},{"kind":"Argument","name":{"kind":"Name","value":"order"},"value":{"kind":"Variable","name":{"kind":"Name","value":"order"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"image"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}},{"kind":"Field","name":{"kind":"Name","value":"imageId"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}},{"kind":"Field","name":{"kind":"Name","value":"personId"}}]}}]}}]} as unknown as DocumentNode<FindPersonImageQuery, FindPersonImageQueryVariables>;
-export const FindPersonRolesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindPersonRoles"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"FilterPersonRoleInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"totalPersonRoles"},"name":{"kind":"Name","value":"personRoleCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}]},{"kind":"Field","alias":{"kind":"Name","value":"personRoles"},"name":{"kind":"Name","value":"findManyPersonRole"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"startTime"}},{"kind":"Field","name":{"kind":"Name","value":"endTime"}},{"kind":"Field","name":{"kind":"Name","value":"person"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"profilePicture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"role"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"displayInLeadership"}},{"kind":"Field","name":{"kind":"Name","value":"displayInMembership"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}}]}},{"kind":"Field","name":{"kind":"Name","value":"personId"}}]}}]}}]} as unknown as DocumentNode<FindPersonRolesQuery, FindPersonRolesQueryVariables>;
+export const FindPersonRolesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindPersonRoles"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"FilterPersonRoleInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"totalPersonRoles"},"name":{"kind":"Name","value":"personRoleCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}]},{"kind":"Field","alias":{"kind":"Name","value":"personRoles"},"name":{"kind":"Name","value":"findManyPersonRole"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"startTime"}},{"kind":"Field","name":{"kind":"Name","value":"endTime"}},{"kind":"Field","name":{"kind":"Name","value":"person"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"profilePicture"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"role"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"displayInLeadership"}},{"kind":"Field","name":{"kind":"Name","value":"displayInMembership"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}}]}},{"kind":"Field","name":{"kind":"Name","value":"personId"}}]}}]}}]} as unknown as DocumentNode<FindPersonRolesQuery, FindPersonRolesQueryVariables>;
 export const FindProductionTagsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindProductionTags"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"FilterProductionTagInput"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"tags"},"name":{"kind":"Name","value":"findManyProductionTag"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"productionId"}}]}}]}}]} as unknown as DocumentNode<FindProductionTagsQuery, FindProductionTagsQueryVariables>;
 export const FindRecentProductionsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindRecentProductions"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"date"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"DateTime"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","alias":{"kind":"Name","value":"productions"},"name":{"kind":"Name","value":"findManyProduction"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"order"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"field"},"value":{"kind":"EnumValue","value":"startTime"}},{"kind":"ObjectField","name":{"kind":"Name","value":"direction"},"value":{"kind":"EnumValue","value":"Desc"}}]}]}},{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"endTime"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"lt"},"value":{"kind":"Variable","name":{"kind":"Name","value":"date"}}}]}}]}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"startTime"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"description"}},{"kind":"Field","name":{"kind":"Name","value":"thumbnail"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"path"}}]}}]}}]}}]} as unknown as DocumentNode<FindRecentProductionsQuery, FindRecentProductionsQueryVariables>;
 export const FindRolesDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"FindRoles"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"PaginationInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"filter"}},"type":{"kind":"NamedType","name":{"kind":"Name","value":"FilterRoleInput"}}},{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"order"}},"type":{"kind":"ListType","type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"OrderRoleInput"}}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"roleCount"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}]},{"kind":"Field","alias":{"kind":"Name","value":"roles"},"name":{"kind":"Name","value":"findManyRole"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"pagination"},"value":{"kind":"Variable","name":{"kind":"Name","value":"pagination"}}},{"kind":"Argument","name":{"kind":"Name","value":"order"},"value":{"kind":"Variable","name":{"kind":"Name","value":"order"}}},{"kind":"Argument","name":{"kind":"Name","value":"filter"},"value":{"kind":"Variable","name":{"kind":"Name","value":"filter"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}}]}}]}}]} as unknown as DocumentNode<FindRolesQuery, FindRolesQueryVariables>;
diff --git a/apps/ui/src/views/AboutView.vue b/apps/ui/src/views/AboutView.vue
index fde28dea..81501b3f 100644
--- a/apps/ui/src/views/AboutView.vue
+++ b/apps/ui/src/views/AboutView.vue
@@ -23,7 +23,7 @@
         <h2 v-if="officers.length" class="ml-5">Leadership</h2>
           <div class="members mt-2 ml-5">
             <div v-for="officer in officers" :key="officer.id">
-              <RouterLink class="member-container" :to="personURL + officer.person?.id">
+              <RouterLink class="member-container" :to="personURL + officer.personId">
                 <v-avatar :rounded="officer.person?.profilePicture?.path ? 'default' : 0" size="150"
                           :image="officer.person?.profilePicture?.path ?? rpitvLogo" />
                 <p>{{ officer.person?.name }}</p>
@@ -34,7 +34,7 @@
         <h2 v-if="members.length" class="ml-5">Members</h2>
         <div class="members mt-2 ml-5">
           <div v-for="member in members" :key="member.id">
-            <RouterLink class="member-container" :to="personURL + member.person?.id">
+            <RouterLink class="member-container" :to="personURL + member.personId">
               <v-avatar :rounded="member.person?.profilePicture?.path ? 'default' : 0" size="150"
                         :image="member.person?.profilePicture?.path ?? rpitvLogo" />
               <p>{{ member.person?.name }}</p>
@@ -74,7 +74,10 @@ const queryData = useQuery(FindPersonRolesDocument, {
       {
         endTime: null
       }
-    ]
+    ],
+  },
+  pagination: {
+    take: 70
   }
 });
 
@@ -158,5 +161,6 @@ a {
 .role {
   color: #ff8697;
   font-size: 16px;
+  text-align: center;
 }
 </style>
diff --git a/apps/ui/src/views/PersonView.vue b/apps/ui/src/views/PersonView.vue
index 3f6adc30..9feeffc2 100644
--- a/apps/ui/src/views/PersonView.vue
+++ b/apps/ui/src/views/PersonView.vue
@@ -10,7 +10,9 @@
           <v-avatar :size="200" :image="personDetails?.profilePicture?.path ?? RPITV_Logo" />
           <h1>{{ personDetails?.name }}</h1>
           <footer>{{ personDetails?.pronouns }}</footer>
-          <p class="description">{{ personDetails?.description }}</p>
+	        <Markdown class="description">
+		        {{ personDetails?.description }}
+	        </Markdown>
           <v-dialog v-if="personImageData.result.value?.personImageCount" v-model="isPersonImageDialogOpened" width="1100">
             <template #activator="{ props: activatorProps }">
               <v-btn class="mt-7" @click="imageDetails = []" v-bind="activatorProps">View Photos</v-btn>
@@ -22,7 +24,7 @@
           </v-dialog>
           <h1 class="mt-5">Club Positions</h1>
           <div class="roles">
-            <div class="text-center" v-for="role in personDetails?.roles">
+            <div class="text-center club-roles" v-for="role in personDetails?.roles">
               <p class="name" style="color: #ff6363">{{ role.role?.name }}</p>
               <p>{{ moment(role.startTime).format("LL") }}</p>
                 -
@@ -63,6 +65,7 @@ import RPITV_Logo from "../assets/rpitv_logo.svg";
 import moment from "moment";
 import ProductionCard from "@/components/ProductionCard.vue";
 import PersonImageCard from "@/components/PersonImageCard.vue";
+import Markdown from "@/components/util/Markdown.vue";
 
 const route = useRoute();
 
@@ -181,6 +184,7 @@ async function loadProductions(load: { done: (status: 'loading' | 'error' | 'emp
   justify-content: center;
   column-gap: 50px;
   row-gap: 25px;
+	align-items: center;
 }
 
 .description {
@@ -192,13 +196,23 @@ async function loadProductions(load: { done: (status: 'loading' | 'error' | 'emp
   gap: 20px;
 }
 
+h1 {
+	font-size: 2rem;
+}
+
 p {
-  font-size: 16px;
-  font-weight: lighter;
+	font-size: 16px;
+	font-weight: lighter;
 }
 
 .name {
-  font-size: 24px;
+	font-size: 1.5rem;
+	font-weight: bold;
+}
+
+.club-roles {
+	
+	width: 250px;
 }
 
 </style>
diff --git a/apps/ui/src/views/account/AccountProfileView.vue b/apps/ui/src/views/account/AccountProfileView.vue
index e1acf7dc..5901736b 100644
--- a/apps/ui/src/views/account/AccountProfileView.vue
+++ b/apps/ui/src/views/account/AccountProfileView.vue
@@ -100,7 +100,9 @@
       </div>
       <div class="details">
         <p class="label">Description:
-          <span v-if="personData.description" class="info">{{ personData.description }}</span>
+	        <Markdown class="info" v-if="personData.description">
+		        {{ personData.description }}
+	        </Markdown>
           <span v-else><em>No description provided</em></span>
         </p>
         <v-btn @click="editableValues.description.dialog = true;" variant="text" icon="fa-solid fa-pen-to-square" />
@@ -138,6 +140,7 @@ import { useQuery, useMutation } from "@vue/apollo-composable";
 import { GenerateOwnPersonDocument, UpdatePersonDocument, UserDetailsDocument } from "@/graphql/types";
 import type { Person, User } from "@/graphql/types";
 import moment from "moment";
+import Markdown from "@/components/util/Markdown.vue";
 
 const auth = useAuthStore();
 const generatePerson = useMutation(GenerateOwnPersonDocument);