fix safari grid css bug, fix arrow direction bug (#299)

Closes #298

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

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"

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";