refactor: standardize view headings across all components

- Add consistent view heading IDs and structure
- Add consistent help buttons and back navigation
- Improve spacing and typography consistency

src/views/ContactQRScanFullView.vue

@@ -2,26 +2,27 @@
   <!-- CONTENT -->
   <section id="Content" class="relative w-[100vw] h-[100vh]">
     <div :class="mainContentClasses">
-      <div class="mb-4">
-        <h1 class="text-xl text-center font-semibold relative">
-          <!-- Back -->
-          <a
-            class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
-            @click="handleBack"
-          >
-            <font-awesome icon="chevron-left" class="fa-fw" />
-          </a>
-
-          <!-- Quick Help -->
-          <a
-            class="text-xl text-center text-blue-500 px-2 py-1 absolute -right-2 -top-1"
-            @click="toastQRCodeHelp()"
-          >
-            <font-awesome icon="circle-question" class="fa-fw" />
-          </a>
-
+      <!-- Sub View Heading -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
           Share Contact Info
         </h1>
+
+        <!-- Back -->
+        <a
+          class="order-first text-lg text-center leading-none p-1"
+          @click="handleBack"
+        >
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
+        </a>
+
+        <!-- Quick Help -->
+        <a
+          class="block text-sm text-center text-white bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
+          @click="toastQRCodeHelp()"
+        >
+          <font-awesome icon="question" class="block text-center w-[1em]" />
+        </a>
       </div>
 
       <div
@@ -235,7 +236,7 @@ export default class ContactQRScanFull extends Vue {
    * Computed property for main content container CSS classes
    */
   get mainContentClasses(): string {
-    return "p-6 bg-white w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
+    return "p-4 bg-white w-full max-w-[calc((100vh-max(env(safe-area-inset-top),var(--safe-area-inset-top,0px))-max(env(safe-area-inset-bottom),var(--safe-area-inset-bottom,0px)))*0.4)] mx-auto";
   }
 
   /**