From 13165e00d575804d552a1f1f9ac5e31fb8fa97e1 Mon Sep 17 00:00:00 2001
From: Vincent Rubinetti <vince.rubinetti@gmail.com>
Date: Tue, 29 Aug 2023 16:03:22 -0600
Subject: [PATCH] fix safari grid css bug, fix arrow direction bug

---
 frontend/src/components/AppGallery.vue         | 1 +
 frontend/src/components/AppPredicateBadge.vue  | 9 ++++-----
 frontend/src/pages/node/SectionBreadcrumbs.vue | 6 +++++-
 3 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/AppGallery.vue b/frontend/src/components/AppGallery.vue
index 821841983..bbc4c100a 100644
--- a/frontend/src/components/AppGallery.vue
+++ b/frontend/src/components/AppGallery.vue
@@ -50,6 +50,7 @@ $phone: 600px;
     var(--intended-cols);
   display: grid;
   grid-template-columns: repeat(var(--actual-cols), minmax(0, 1fr));
+  grid-auto-rows: 1fr;
   place-content: center;
   // when content doesn't fill first row, limit width of gallery so that cell size is same as if first row was full
   // e.g. team page, so groups with only 1-2 members aren't bigger than 3+ members
diff --git a/frontend/src/components/AppPredicateBadge.vue b/frontend/src/components/AppPredicateBadge.vue
index ef6f9d54f..52ca3caa4 100644
--- a/frontend/src/components/AppPredicateBadge.vue
+++ b/frontend/src/components/AppPredicateBadge.vue
@@ -14,14 +14,13 @@
 import { computed } from "vue";
 import { startCase } from "lodash";
 import { getCategoryLabel } from "@/api/categories";
-import {
-  AssociationDirectionEnum,
-  type DirectionalAssociation,
-} from "@/api/model";
+import { type DirectionalAssociation } from "@/api/model";
 
 type Props = {
   /** current association */
   association: Partial<DirectionalAssociation>;
+  /** whether to reverse the direction of arrows */
+  reverse?: boolean;
   /** whether to display arrows vertically */
   vertical?: boolean;
 };
@@ -30,7 +29,7 @@ const props = defineProps<Props>();
 
 /** direction of arrows */
 const arrowDirection = computed(() =>
-  props.association.direction === AssociationDirectionEnum.incoming
+  props.reverse
     ? props.vertical
       ? "up"
       : "left"
diff --git a/frontend/src/pages/node/SectionBreadcrumbs.vue b/frontend/src/pages/node/SectionBreadcrumbs.vue
index cfdc8a529..179d90ebc 100644
--- a/frontend/src/pages/node/SectionBreadcrumbs.vue
+++ b/frontend/src/pages/node/SectionBreadcrumbs.vue
@@ -18,6 +18,10 @@
         <AppPredicateBadge
           :association="breadcrumb.association"
           :vertical="true"
+          :reverse="
+            breadcrumb.association.direction ===
+            AssociationDirectionEnum.incoming
+          "
         />
       </template>
 
@@ -39,7 +43,7 @@
 <script setup lang="ts">
 import { watch } from "vue";
 import { useRoute } from "vue-router";
-import type { Node } from "@/api/model";
+import { AssociationDirectionEnum, type Node } from "@/api/model";
 import AppNodeBadge from "@/components/AppNodeBadge.vue";
 import AppPredicateBadge from "@/components/AppPredicateBadge.vue";
 import { breadcrumbs, updateBreadcrumbs } from "@/global/breadcrumbs";