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,89 +357,53 @@
           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">
-            Individuals Getting Contributions From This
-          </h3>
-          <!-- similar to gift display above -->
-          <ul class="text-sm border-t border-slate-300">
-            <li
-              v-for="give in givesProvidedByThis"
-              :key="give.id"
-              class="py-1.5 border-b border-slate-300"
-            >
-              <div class="flex justify-between gap-4">
-                <span>
-                  {{
-                    serverUtil.didInfo(
-                      give.agentDid,
-                      activeDid,
-                      allMyDids,
-                      allContacts,
-                    )
-                  }}
-                </span>
-                <span v-if="give.amount" class="whitespace-nowrap">
-                  <fa
-                    :icon="libsUtil.iconForUnitCode(give.unit)"
-                    class="fa-fw text-slate-400"
-                  />{{ give.amount }}
-                </span>
-              </div>
-              <div class="text-slate-500">
-                <fa icon="calendar" class="fa-fw text-slate-400" />
-                {{ give.issuedAt?.substring(0, 10) }}
-              </div>
-              <div v-if="give.description" class="text-slate-500">
-                <fa icon="comment" class="fa-fw text-slate-400" />
-                {{ give.description }}
-              </div>
-              <a @click="onClickLoadClaim(give.jwtId)">
-                <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
-              </a>
-            </li>
-          </ul>
-          <div v-if="givesProvidedByHitLimit" class="text-center">
-            <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"
+          <div>
+            <h3 class="text-sm font-semibold border-b">
+              Individuals Getting Contributions From This
+            </h3>
+            <!-- similar to gift display above -->
+            <ul class="text-sm border-t border-slate-300">
+              <li
+                v-for="give in givesProvidedByThis"
+                :key="give.id"
+                class="py-1.5 border-b border-slate-300"
               >
-                {{ plan.name }}
-              </button>
-            </div>
-            <div v-if="fulfillersToHitLimit" class="text-center">
-              <button @click="loadPlanFulfillersTo()">Load More</button>
+                <div class="flex justify-between gap-4">
+                  <span>
+                    {{
+                      serverUtil.didInfo(
+                        give.agentDid,
+                        activeDid,
+                        allMyDids,
+                        allContacts,
+                      )
+                    }}
+                  </span>
+                  <span v-if="give.amount" class="whitespace-nowrap">
+                    <fa
+                      :icon="libsUtil.iconForUnitCode(give.unit)"
+                      class="fa-fw text-slate-400"
+                    />{{ give.amount }}
+                  </span>
+                </div>
+                <div class="text-slate-500">
+                  <fa icon="calendar" class="fa-fw text-slate-400" />
+                  {{ give.issuedAt?.substring(0, 10) }}
+                </div>
+                <div v-if="give.description" class="text-slate-500">
+                  <fa icon="comment" class="fa-fw text-slate-400" />
+                  {{ give.description }}
+                </div>
+                <a @click="onClickLoadClaim(give.jwtId)">
+                  <fa icon="file-lines" class="text-blue-500 cursor-pointer" />
+                </a>
+              </li>
+            </ul>
+            <div v-if="givesProvidedByHitLimit" class="text-center">
+              <button @click="loadGivesProvidedBy()">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>
   </section>