Initial bug fixes (#127)

* Initial bug fixes

* fix compile error on non-mac

* Fix even more bugs

* Fix more

* fix more

* fix build

* fix build

* address review comments

theseus_gui/src/components/RowDisplay.vue

@@ -42,16 +42,10 @@ onMounted(() => {
 
   handlePaginationDisplay()
 })
+
 onUnmounted(() => {
   if (props.canPaginate) window.removeEventListener('resize', handlePaginationDisplay)
 })
-
-const handleLeftPage = () => {
-  modsRow.value.scrollLeft -= 170
-}
-const handleRightPage = () => {
-  modsRow.value.scrollLeft += 170
-}
 </script>
 <template>
   <div v-if="props.instances.length > 0" class="row">
@@ -59,8 +53,8 @@ const handleRightPage = () => {
       <p>{{ props.label }}</p>
       <hr aria-hidden="true" />
       <div v-if="allowPagination" class="pagination">
-        <ChevronLeftIcon role="button" @click="handleLeftPage" />
-        <ChevronRightIcon role="button" @click="handleRightPage" />
+        <ChevronLeftIcon role="button" @click="modsRow.value.scrollLeft -= 170" />
+        <ChevronRightIcon role="button" @click="modsRow.value.scrollLeft += 170" />
       </div>
     </div>
     <section ref="modsRow" class="instances">
@@ -95,6 +89,7 @@ const handleRightPage = () => {
     gap: 1rem;
 
     p {
+      margin: 0;
       font-size: 1rem;
       white-space: nowrap;
       color: var(--color-contrast);
@@ -140,11 +135,14 @@ const handleRightPage = () => {
     width: 100%;
     gap: 1rem;
     margin-right: auto;
-    margin-top: 0.8rem;
     scroll-behavior: smooth;
     overflow-x: scroll;
     overflow-y: hidden;
 
+    :deep(.instance-card-item) {
+      margin-bottom: 0.1rem;
+    }
+
     &::-webkit-scrollbar {
       width: 0px;
       background: transparent;