move pointers to other projects up in the project view

src/views/ProjectViewView.vue

@@ -115,6 +115,50 @@
       </button>
     </div>
 
+    <div class="grid items-start grid-cols-1 sm:grid-cols-2 gap-4 mt-4">
+      <div>
+        <div
+          v-if="fulfillersToThis.length > 0"
+          class="bg-slate-100 px-4 py-3 rounded-md"
+        >
+          <h3 class="text-sm uppercase font-semibold mt-3">
+            Projects That Contribute To This
+          </h3>
+          <!-- centering because long, wrapped project names didn't left align with blank or "text-left" -->
+          <div class="text-center">
+            <div v-for="plan in fulfillersToThis" :key="plan.handleId">
+              <button
+                @click="onClickLoadProject(plan.handleId)"
+                class="text-blue-500"
+              >
+                {{ plan.name }}
+              </button>
+            </div>
+            <div v-if="fulfillersToHitLimit" class="text-center">
+              <button @click="loadPlanFulfillersTo()">Load More</button>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <div>
+        <div v-if="fulfilledByThis" class="bg-slate-100 px-4 py-3 rounded-md">
+          <h3 class="text-sm uppercase font-semibold mb-3">
+            Projects Getting Contributions From This
+          </h3>
+          <!-- centering because long, wrapped project names didn't left align with blank or "text-left" -->
+          <div class="text-center">
+            <button
+              @click="onClickLoadProject(fulfilledByThis.handleId)"
+              class="text-blue-500"
+            >
+              {{ fulfilledByThis.name }}
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
     <div v-if="activeDid" class="mt-4">
       <div class="text-center">
         <button
@@ -313,7 +357,8 @@
           v-if="givesProvidedByThis.length > 0"
           class="bg-slate-100 px-4 py-3 rounded-md"
         >
-          <h3 class="text-sm uppercase font-semibold mb-3 border-b">
+          <div>
+            <h3 class="text-sm font-semibold border-b">
               Individuals Getting Contributions From This
             </h3>
             <!-- similar to gift display above -->
@@ -358,43 +403,6 @@
               <button @click="loadGivesProvidedBy()">Load More</button>
             </div>
           </div>
-
-        <div
-          v-if="fulfillersToThis.length > 0"
-          class="bg-slate-100 px-4 py-3 rounded-md"
-        >
-          <h3 class="text-sm uppercase font-semibold mb-3">
-            Projects That Contribute To This
-          </h3>
-          <!-- centering because long, wrapped project names didn't left align with blank or "text-left" -->
-          <div class="text-center">
-            <div v-for="plan in fulfillersToThis" :key="plan.handleId">
-              <button
-                @click="onClickLoadProject(plan.handleId)"
-                class="text-blue-500"
-              >
-                {{ plan.name }}
-              </button>
-            </div>
-            <div v-if="fulfillersToHitLimit" class="text-center">
-              <button @click="loadPlanFulfillersTo()">Load More</button>
-            </div>
-          </div>
-        </div>
-
-        <div v-if="fulfilledByThis" class="bg-slate-100 px-4 py-3 rounded-md">
-          <h3 class="text-sm uppercase font-semibold mb-3">
-            Projects Getting Contributions From This
-          </h3>
-          <!-- centering because long, wrapped project names didn't left align with blank or "text-left" -->
-          <div class="text-center">
-            <button
-              @click="onClickLoadProject(fulfilledByThis.handleId)"
-              class="text-blue-500"
-            >
-              {{ fulfilledByThis.name }}
-            </button>
-          </div>
         </div>
       </div>
     </div>