for certificate: fix the canvas to fit in the middle vertically, add amount, and position things better

src/views/ClaimView.vue

@@ -17,11 +17,11 @@
     </div>
 
     <!-- Details -->
-    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <div class="block flex gap-4 overflow-hidden">
-        <div class="overflow-hidden w-full">
-          <div class="flex justify-between">
-            <h2 class="text-md font-bold">
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4 w-full">
+      <div class="block flex gap-4 overflow-hidden w-full">
+        <div class="w-full">
+          <div class="flex columns-3">
+            <h2 class="text-md font-bold w-full">
               {{ capitalizeAndInsertSpacesBeforeCaps(veriClaim.claimType) }}
               <button
                 v-if="
@@ -39,7 +39,7 @@
                 <fa icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
               </button>
             </h2>
-            <div>
+            <div class="flex justify-center w-full">
               <router-link
                 :to="'/claim-cert/' + encodeURIComponent(veriClaim.id)"
                 class="text-blue-500 mt-2"
@@ -49,7 +49,7 @@
               </router-link>
             </div>
             <!-- show link icon to copy this URL to the clipboard -->
-            <div>
+            <div class="flex justify-end w-full">
               <button
                 title="Copy Link"
                 @click="