chore: remove emoji-mart-vue-fast that isn't used yet

feat: add context for Emoji claims
fix: linting
2025-10-19 18:57:13 -06:00 · 2025-10-19 18:53:20 -06:00 · 2025-10-19 18:44:14 -06:00 · 2025-10-19 18:43:21 -06:00 · 2025-10-19 16:41:53 -06:00 · 2025-10-19 15:22:34 -06:00
67 changed files with 1501 additions and 695 deletions
--- a/index.html
+++ b/index.html
@@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover, user-scalable=no, interactive-widget=overlays-content" />
    <!-- CORS headers removed to allow images from any domain -->
@@ -13,4 +13,4 @@
    <div id="app"></div>
    <script type="module" src="/src/main.ts"></script>
  </body>
-</html>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "timesafari",
-  "version": "1.1.0-beta",
+  "version": "1.1.1-beta",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "timesafari",
-      "version": "1.1.0-beta",
+      "version": "1.1.1-beta",
      "dependencies": {
        "@capacitor-community/electron": "^5.0.1",
        "@capacitor-community/sqlite": "6.0.2",
--- a/src/assets/styles/tailwind.css
+++ b/src/assets/styles/tailwind.css
@@ -7,6 +7,24 @@
    html {
        font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
    }
    /* Fix iOS viewport height changes when keyboard appears/disappears */
    html, body {
        height: 100%;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport height for better mobile support */
        overflow: hidden; /* Disable all scrolling on html and body */
        position: fixed; /* Force fixed positioning to prevent viewport changes */
        width: 100%;
        top: 0;
        left: 0;
    }
    #app {
        height: 100vh;
        height: 100dvh;
        overflow-y: auto;
    }
 }
@layer components {
--- a/src/components/ActivityListItem.vue
+++ b/src/components/ActivityListItem.vue
@@ -77,9 +77,86 @@
        </a>
      </div>
      <!-- Emoji Section -->
      <div
        v-if="hasEmojis || isRegistered"
        class="float-right ml-3 mb-1 bg-white rounded border border-slate-300 px-1.5 py-0.5 max-w-[240px]"
      >
        <div class="flex items-center justify-between gap-1">
          <!-- Existing Emojis Display -->
          <div v-if="hasEmojis" class="flex flex-wrap gap-1">
            <button
              v-for="(count, emoji) in record.emojiCount"
              :key="emoji"
              class="inline-flex items-center gap-0.5 px-1 py-0.5 text-xs bg-slate-50 hover:bg-slate-100 rounded border border-slate-200 transition-colors cursor-pointer"
              :class="{
                'bg-blue-50 border-blue-200': isUserEmojiWithoutLoading(emoji),
                'opacity-75 cursor-wait': loadingEmojis,
              }"
              :title="
                loadingEmojis
                  ? 'Loading...'
                  : !emojisOnActivity?.isResolved
                    ? 'Click to load your emojis'
                    : isUserEmojiWithoutLoading(emoji)
                      ? 'Click to remove your emoji'
                      : 'Click to add this emoji'
              "
              :disabled="!isRegistered"
              @click="toggleThisEmoji(emoji)"
            >
              <!-- Show spinner when loading -->
              <div v-if="loadingEmojis" class="animate-spin text-xs">
                <font-awesome icon="spinner" class="fa-spin" />
              </div>
              <span v-else class="text-sm leading-none">{{ emoji }}</span>
              <span class="text-xs text-slate-600 font-medium leading-none">{{
                count
              }}</span>
            </button>
          </div>
          <!-- Add Emoji Button -->
          <button
            v-if="isRegistered"
            class="inline-flex px-1 py-0.5 text-xs bg-slate-100 hover:bg-slate-200 rounded border border-slate-300 transition-colors items-center justify-center ml-2 ml-auto"
            :title="showEmojiPicker ? 'Close emoji picker' : 'Add emoji'"
            @click="toggleEmojiPicker"
          >
            <span class="px-2 text-sm leading-none">{{
              showEmojiPicker ? "x" : "😊"
            }}</span>
          </button>
        </div>
        <!-- Emoji Picker (placeholder for now) -->
        <div
          v-if="showEmojiPicker"
          class="mt-1 p-1.5 bg-slate-50 rounded border border-slate-300"
        >
          <!-- Temporary emoji buttons for testing -->
          <div class="flex flex-wrap gap-3 mt-1">
            <button
              v-for="emoji in QUICK_EMOJIS"
              :key="emoji"
              class="p-0.5 hover:bg-slate-200 rounded text-base transition-opacity"
              :class="{
                'opacity-75 cursor-wait': loadingEmojis,
              }"
              :disabled="loadingEmojis"
              @click="toggleThisEmoji(emoji)"
            >
              <!-- Show spinner when loading -->
              <div v-if="loadingEmojis" class="animate-spin text-sm">⟳</div>
              <span v-else>{{ emoji }}</span>
            </button>
          </div>
        </div>
      </div>
      <!-- Description -->
      <p class="font-medium">
-        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
+        <a class="block cursor-pointer" @click="emitLoadClaim(record.jwtId)">
          <vue-markdown
            :source="truncatedDescription"
            class="markdown-content"
@@ -88,7 +165,7 @@
      </p>
      <div
-        class="relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
+        class="clear-right relative flex justify-between gap-4 max-w-[40rem] mx-auto mt-4"
      >
        <!-- Source -->
        <div
@@ -251,17 +328,24 @@
 <script lang="ts">
 import { Component, Prop, Vue, Emit } from "vue-facing-decorator";
-import { GiveRecordWithContactInfo } from "@/interfaces/give";
+import VueMarkdown from "vue-markdown-render";
 import { logger } from "../utils/logger";
 import {
  createAndSubmitClaim,
  getHeaders,
  isHiddenDid,
 } from "../libs/endorserServer";
 import EntityIcon from "./EntityIcon.vue";
 import { isHiddenDid } from "../libs/endorserServer";
 import ProjectIcon from "./ProjectIcon.vue";
-import { createNotifyHelpers, NotifyFunction } from "@/utils/notify";
+import { createNotifyHelpers, NotifyFunction, TIMEOUTS } from "@/utils/notify";
 import {
  NOTIFY_PERSON_HIDDEN,
  NOTIFY_UNKNOWN_PERSON,
 } from "@/constants/notifications";
-import { TIMEOUTS } from "@/utils/notify";
+import { EmojiSummaryRecord, GenericVerifiableCredential } from "@/interfaces";
-import VueMarkdown from "vue-markdown-render";
+import { GiveRecordWithContactInfo } from "@/interfaces/give";
 import { PromiseTracker } from "@/libs/util";
@Component({
  components: {
@@ -271,15 +355,24 @@ import VueMarkdown from "vue-markdown-render";
  },
 })
 export default class ActivityListItem extends Vue {
  readonly QUICK_EMOJIS = ["👍", "👏", "❤️", "🎉", "😊", "😆", "🔥"];
  @Prop() record!: GiveRecordWithContactInfo;
  @Prop() lastViewedClaimId?: string;
  @Prop() isRegistered!: boolean;
  @Prop() activeDid!: string;
  @Prop() apiServer!: string;
  isHiddenDid = isHiddenDid;
  notify!: ReturnType<typeof createNotifyHelpers>;
  $notify!: NotifyFunction;
  // Emoji-related data
  showEmojiPicker = false;
  loadingEmojis = false; // Track if emojis are currently loading
  emojisOnActivity: PromiseTracker<EmojiSummaryRecord[]> | null = null; // load this only when needed
  created() {
    this.notify = createNotifyHelpers(this.$notify);
  }
@@ -343,5 +436,186 @@ export default class ActivityListItem extends Vue {
      day: "numeric",
    });
  }
  // Emoji-related computed properties and methods
  get hasEmojis(): boolean {
    return Object.keys(this.record.emojiCount).length > 0;
  }
  triggerUserEmojiLoad(): PromiseTracker<EmojiSummaryRecord[]> {
    if (!this.emojisOnActivity) {
      const promise = new Promise<EmojiSummaryRecord[]>((resolve) => {
        (async () => {
          this.axios
            .get(
              `${this.apiServer}/api/v2/report/emoji?parentHandleId=${encodeURIComponent(this.record.handleId)}`,
              { headers: await getHeaders(this.activeDid) },
            )
            .then((response) => {
              const userEmojiRecords = response.data.data.filter(
                (e: EmojiSummaryRecord) => e.issuerDid === this.activeDid,
              );
              resolve(userEmojiRecords);
            })
            .catch((error) => {
              logger.error("Error loading user emojis:", error);
              resolve([]);
            });
        })();
      });
      this.emojisOnActivity = new PromiseTracker(promise);
    }
    return this.emojisOnActivity;
  }
  /**
   *
   * @param emoji - The emoji to check.
   * @returns True if the emoji is in the user's emojis, false otherwise.
   *
   * @note This method is quick and synchronous, and can check resolved emojis
   * without triggering a server request. Returns false if emojis haven't been loaded yet.
   */
  isUserEmojiWithoutLoading(emoji: string): boolean {
    if (this.emojisOnActivity?.isResolved && this.emojisOnActivity.value) {
      return this.emojisOnActivity.value.some(
        (record) => record.text === emoji,
      );
    }
    return false;
  }
  async toggleEmojiPicker() {
    this.triggerUserEmojiLoad(); // trigger it, but don't wait for it to complete
    this.showEmojiPicker = !this.showEmojiPicker;
  }
  async toggleThisEmoji(emoji: string) {
    // Start loading indicator
    this.loadingEmojis = true;
    this.showEmojiPicker = false; // always close the picker when an emoji is clicked
    try {
      this.triggerUserEmojiLoad(); // trigger just in case
      const userEmojiList = await this.emojisOnActivity!.promise; // must wait now that they've chosen
      const userHasEmoji: boolean = userEmojiList.some(
        (record) => record.text === emoji,
      );
      if (userHasEmoji) {
        this.$notify(
          {
            group: "modal",
            type: "confirm",
            title: "Remove Emoji",
            text: `Do you want to remove your ${emoji} ?`,
            yesText: "Remove",
            onYes: async () => {
              await this.removeEmoji(emoji);
            },
          },
          TIMEOUTS.MODAL,
        );
      } else {
        // User doesn't have this emoji, add it
        await this.submitEmoji(emoji);
      }
    } finally {
      // Remove loading indicator
      this.loadingEmojis = false;
    }
  }
  async submitEmoji(emoji: string) {
    try {
      // Create an Emoji claim and send to the server
      const emojiClaim: GenericVerifiableCredential = {
        "@context": "https://endorser.ch",
        "@type": "Emoji",
        text: emoji,
        parentItem: { lastClaimId: this.record.jwtId },
      };
      const claim = await createAndSubmitClaim(
        emojiClaim,
        this.activeDid,
        this.apiServer,
        this.axios,
      );
      if (claim.success && !claim.embeddedRecordError) {
        // Update emoji count
        this.record.emojiCount[emoji] =
          (this.record.emojiCount[emoji] || 0) + 1;
        // Create a new emoji record (we'll get the actual jwtId from the server response later)
        const newEmojiRecord: EmojiSummaryRecord = {
          issuerDid: this.activeDid,
          jwtId: claim.claimId || "",
          text: emoji,
          parentHandleId: this.record.jwtId,
        };
        // Update user emojis list by creating a new promise with the updated data
        // (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
        this.triggerUserEmojiLoad();
        const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
        this.emojisOnActivity = new PromiseTracker(
          Promise.resolve([...currentEmojis, newEmojiRecord]),
        );
      } else {
        this.notify.error("Failed to add emoji.", TIMEOUTS.STANDARD);
      }
    } catch (error) {
      logger.error("Error submitting emoji:", error);
      this.notify.error("Got error adding emoji.", TIMEOUTS.STANDARD);
    }
  }
  async removeEmoji(emoji: string) {
    try {
      // Create an Emoji claim and send to the server
      const emojiClaim: GenericVerifiableCredential = {
        "@context": "https://endorser.ch",
        "@type": "Emoji",
        text: emoji,
        parentItem: { lastClaimId: this.record.jwtId },
      };
      const claim = await createAndSubmitClaim(
        emojiClaim,
        this.activeDid,
        this.apiServer,
        this.axios,
      );
      if (claim.success && !claim.embeddedRecordError) {
        // Update emoji count
        const newCount = Math.max(0, (this.record.emojiCount[emoji] || 0) - 1);
        if (newCount === 0) {
          delete this.record.emojiCount[emoji];
        } else {
          this.record.emojiCount[emoji] = newCount;
        }
        // Update user emojis list by creating a new promise with the updated data
        // (Trigger shouldn't be necessary since all calls should come through a toggle, but just in case someone calls this directly)
        this.triggerUserEmojiLoad();
        const currentEmojis = await this.emojisOnActivity!.promise; // must wait now that they've clicked one
        this.emojisOnActivity = new PromiseTracker(
          Promise.resolve(
            currentEmojis.filter(
              (record) =>
                record.issuerDid === this.activeDid && record.text !== emoji,
            ),
          ),
        );
      } else {
        this.notify.error("Failed to remove emoji.", TIMEOUTS.STANDARD);
      }
    } catch (error) {
      logger.error("Error removing emoji:", error);
      this.notify.error("Got error removing emoji.", TIMEOUTS.STANDARD);
    }
  }
 }
 </script>
--- a/src/components/ContactListItem.vue
+++ b/src/components/ContactListItem.vue
@@ -46,7 +46,7 @@
            <span class="text-xs truncate">{{ contact.did }}</span>
          </div>
-          <div class="text-sm">
+          <div class="text-sm truncate">
            {{ contact.notes }}
          </div>
        </div>
--- a/src/components/TopMessage.vue
+++ b/src/components/TopMessage.vue
@@ -1,16 +1,9 @@
 <template>
  <div
-    class="absolute right-5 top-[max(0.75rem,env(safe-area-inset-top),var(--safe-area-inset-top,0px))]"
+    v-if="message"
    class="-mt-6 bg-rose-100 border border-t-0 border-dashed border-rose-600 text-rose-900 text-sm text-center font-semibold rounded-b-md px-3 py-2 mb-3"
  >
-    <span class="align-center text-red-500 mr-2">{{ message }}</span>
+    {{ message }}
    <span class="ml-2">
      <router-link
        :to="{ name: 'help' }"
        class="text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md ml-1"
      >
        Help
      </router-link>
    </span>
  </div>
 </template>
--- a/src/components/UsageLimitsSection.vue
+++ b/src/components/UsageLimitsSection.vue
@@ -8,7 +8,7 @@
    <!-- show spinner if loading limits -->
    <div
      v-if="loadingLimits"
-      class="text-center"
+      class="text-slate-500 text-center italic mb-4"
      role="status"
      aria-live="polite"
    >
@@ -19,7 +19,10 @@
        aria-hidden="true"
      ></font-awesome>
    </div>
-    <div class="mb-4 text-center">
+    <div
      v-if="limitsMessage"
      class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
    >
      {{ limitsMessage }}
    </div>
    <div v-if="endorserLimits">
--- a/src/db-sql/migration.ts
+++ b/src/db-sql/migration.ts
@@ -234,32 +234,20 @@ export async function runMigrations<T>(
  sqlQuery: (sql: string, params?: unknown[]) => Promise<T>,
  extractMigrationNames: (result: T) => Set<string>,
 ): Promise<void> {
-  // Only log migration start in development
+  logger.debug("[Migration] Starting database migrations");
  const isDevelopment = process.env.VITE_PLATFORM === "development";
  if (isDevelopment) {
    logger.debug("[Migration] Starting database migrations");
  }
  for (const migration of MIGRATIONS) {
-    if (isDevelopment) {
+    logger.debug("[Migration] Registering migration:", migration.name);
      logger.debug("[Migration] Registering migration:", migration.name);
    }
    registerMigration(migration);
  }
-  if (isDevelopment) {
+  logger.debug("[Migration] Running migration service");
    logger.debug("[Migration] Running migration service");
  }
  await runMigrationsService(sqlExec, sqlQuery, extractMigrationNames);
-  if (isDevelopment) {
+  logger.debug("[Migration] Database migrations completed");
    logger.debug("[Migration] Database migrations completed");
  }
  // Bootstrapping: Ensure active account is selected after migrations
-  if (isDevelopment) {
+  logger.debug("[Migration] Running bootstrapping hooks");
    logger.debug("[Migration] Running bootstrapping hooks");
  }
  try {
    // Check if we have accounts but no active selection
    const accountsResult = await sqlQuery("SELECT COUNT(*) FROM accounts");
@@ -274,18 +262,14 @@ export async function runMigrations<T>(
      activeDid = (extractSingleValue(activeResult) as string) || null;
    } catch (error) {
      // Table doesn't exist - migration 004 may not have run yet
-      if (isDevelopment) {
+      logger.debug(
-        logger.debug(
+        "[Migration] active_identity table not found - migration may not have run",
-          "[Migration] active_identity table not found - migration may not have run",
+      );
        );
      }
      activeDid = null;
    }
    if (accountsCount > 0 && (!activeDid || activeDid === "")) {
-      if (isDevelopment) {
+      logger.debug("[Migration] Auto-selecting first account as active");
        logger.debug("[Migration] Auto-selecting first account as active");
      }
      const firstAccountResult = await sqlQuery(
        "SELECT did FROM accounts ORDER BY dateCreated, did LIMIT 1",
      );
--- a/src/interfaces/claims.ts
+++ b/src/interfaces/claims.ts
@@ -14,6 +14,13 @@ export interface AgreeActionClaim extends ClaimObject {
  object: Record<string, unknown>;
 }
 export interface EmojiClaim extends ClaimObject {
  // default context is "https://endorser.ch"
  "@type": "Emoji";
  text: string;
  parentItem: { lastClaimId: string };
 }
 // Note that previous VCs may have additional fields.
 // https://endorser.ch/doc/html/transactions.html#id4
 export interface GiveActionClaim extends ClaimObject {
--- a/src/interfaces/common.ts
+++ b/src/interfaces/common.ts
@@ -81,7 +81,9 @@ export interface UserInfo {
 export interface CreateAndSubmitClaimResult {
  success: boolean;
  embeddedRecordError?: string;
  error?: string;
  claimId?: string;
  handleId?: string;
 }
--- a/src/interfaces/index.ts
+++ b/src/interfaces/index.ts
@@ -1,36 +1,6 @@
-export type {
+export * from "./claims";
  // From common.ts
  CreateAndSubmitClaimResult,
  GenericCredWrapper,
  GenericVerifiableCredential,
  KeyMeta,
  // Exclude types that are also exported from other files
  // GiveVerifiableCredential,
  // OfferVerifiableCredential,
  // RegisterVerifiableCredential,
  // PlanSummaryRecord,
  // UserInfo,
 } from "./common";
 export type {
  // From claims.ts
  GiveActionClaim,
  OfferClaim,
  RegisterActionClaim,
 } from "./claims";
 export type {
  // From records.ts
  PlanSummaryRecord,
 } from "./records";
 export type {
  // From user.ts
  UserInfo,
 } from "./user";
 export * from "./limits";
 export * from "./deepLinks";
 export * from "./common";
 export * from "./claims-result";
 export * from "./common";
 export * from "./deepLinks";
 export * from "./limits";
 export * from "./records";
--- a/src/interfaces/records.ts
+++ b/src/interfaces/records.ts
@@ -1,14 +1,26 @@
 import { GiveActionClaim, OfferClaim, PlanActionClaim } from "./claims";
 import { GenericCredWrapper } from "./common";
 export interface EmojiSummaryRecord {
  issuerDid: string;
  jwtId: string;
  text: string;
  parentHandleId: string;
 }
 // a summary record; the VC is found the fullClaim field
 export interface GiveSummaryRecord {
-  [x: string]: PropertyKey | undefined | GiveActionClaim;
+  [x: string]:
    | PropertyKey
    | undefined
    | GiveActionClaim
    | Record<string, number>;
  type?: string;
  agentDid: string;
  amount: number;
  amountConfirmed: number;
  description: string;
  emojiCount: Record<string, number>; // Map of emoji character to count
  fullClaim: GiveActionClaim;
  fulfillsHandleId: string;
  fulfillsPlanHandleId?: string;
--- a/src/libs/endorserServer.ts
+++ b/src/libs/endorserServer.ts
@@ -630,11 +630,7 @@ async function performPlanRequest(
      return cred;
    } else {
-      // Use debug level for development to reduce console noise
+      logger.debug(
      const isDevelopment = process.env.VITE_PLATFORM === "development";
      const log = isDevelopment ? logger.debug : logger.log;
      log(
        "[Plan Loading] ⚠️ Plan cache is empty for handle",
        handleId,
        " Got data:",
@@ -1226,7 +1222,12 @@ export async function createAndSubmitClaim(
      timestamp: new Date().toISOString(),
    });
-    return { success: true, handleId: response.data?.handleId };
+    return {
      success: true,
      claimId: response.data?.claimId,
      handleId: response.data?.handleId,
      embeddedRecordError: response.data?.embeddedRecordError,
    };
  } catch (error: unknown) {
    // Enhanced error logging with comprehensive context
    const requestId = `claim_error_${Date.now()}_${Math.random().toString(36).substr(2, 9)}`;
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@@ -1147,3 +1147,29 @@ export async function checkForDuplicateAccount(
  return (existingAccount?.values?.length ?? 0) > 0;
 }
 export class PromiseTracker<T> {
  private _promise: Promise<T>;
  private _resolved = false;
  private _value: T | undefined;
  constructor(promise: Promise<T>) {
    this._promise = promise.then((value) => {
      this._resolved = true;
      this._value = value;
      return value;
    });
  }
  get isResolved(): boolean {
    return this._resolved;
  }
  get value(): T | undefined {
    return this._value;
  }
  get promise(): Promise<T> {
    return this._promise;
  }
 }
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -285,6 +285,16 @@ const routes: Array<RouteRecordRaw> = [
    name: "user-profile",
    component: () => import("../views/UserProfileView.vue"),
  },
  // Catch-all route for 404 errors - must be last
  {
    path: "/:pathMatch(.*)*",
    name: "not-found",
    component: () => import("../views/NotFoundView.vue"),
    meta: {
      title: "Page Not Found",
      requiresAuth: false,
    },
  },
 ];
 const isElectron = window.location.protocol === "file:";
--- a/src/services/platforms/WebPlatformService.ts
+++ b/src/services/platforms/WebPlatformService.ts
@@ -48,15 +48,13 @@ export class WebPlatformService implements PlatformService {
  constructor() {
    WebPlatformService.instanceCount++;
-    // Use debug level logging for development mode to reduce console noise
+    logger.debug("[WebPlatformService] Initializing web platform service");
    const isDevelopment = process.env.VITE_PLATFORM === "development";
    const log = isDevelopment ? logger.debug : logger.log;
    log("[WebPlatformService] Initializing web platform service");
    // Only initialize SharedArrayBuffer setup for web platforms
    if (this.isWorker()) {
-      log("[WebPlatformService] Skipping initBackend call in worker context");
+      logger.debug(
        "[WebPlatformService] Skipping initBackend call in worker context",
      );
      return;
    }
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -1,6 +1,5 @@
 <template>
  <QuickNav selected="Profile" />
  <TopMessage />
  <!-- CONTENT -->
  <main
@@ -9,10 +8,22 @@
    role="main"
    aria-label="Account Profile"
  >
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Your Identity
+    <!-- Main View Heading -->
-    </h1>
+    <div class="flex gap-4 items-center mb-8">
      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
        Your Identity
      </h1>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- ID notice -->
    <div
@@ -1453,6 +1464,8 @@ export default class AccountViewView extends Vue {
      if (imageResp && imageResp.status === 200) {
        this.imageLimits = imageResp.data;
      } else {
        this.limitsMessage = ACCOUNT_VIEW_CONSTANTS.LIMITS.NO_IMAGE_ACCESS;
      }
      const endorserResp = await fetchEndorserRateLimits(
--- a/src/views/ClaimAddRawView.vue
+++ b/src/views/ClaimAddRawView.vue
@@ -1,19 +1,27 @@
 <template>
  <QuickNav />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Back -->
        <button
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw" />
        </button>
        Raw Claim
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div class="flex">
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -2,19 +2,27 @@
  <QuickNav />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Back -->
        <button
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          aria-label="Go back"
          @click="$router.go(-1)"
        >
          <font-awesome icon="chevron-left" class="fa-fw" />
        </button>
        Verifiable Claim Details
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Details -->
@@ -80,19 +88,25 @@
              </button>
            </div>
          </div>
-          <div class="text-sm">
+          <div class="text-sm overflow-hidden">
-            <div data-testId="description">
+            <div
-              <font-awesome icon="message" class="fa-fw text-slate-400" />
+              data-testId="description"
              class="flex items-start gap-2 overflow-hidden"
            >
              <font-awesome
                icon="message"
                class="fa-fw text-slate-400 flex-shrink-0 mt-1"
              />
              <vue-markdown
                :source="claimDescription"
-                class="markdown-content"
+                class="markdown-content flex-1 min-w-0"
              />
            </div>
-            <div>
+            <div class="overflow-hidden text-ellipsis">
              <font-awesome icon="user" class="fa-fw text-slate-400" />
              {{ didInfo(veriClaim.issuer) }}
            </div>
-            <div>
+            <div class="overflow-hidden text-ellipsis">
              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
              Recorded
              {{ formattedIssueDate }}
@@ -540,7 +554,7 @@ import VueMarkdown from "vue-markdown-render";
 import { Router, RouteLocationNormalizedLoaded } from "vue-router";
 import { copyToClipboard } from "../services/ClipboardService";
-import { GenericVerifiableCredential } from "../interfaces";
+import { EmojiClaim, GenericVerifiableCredential } from "../interfaces";
 import GiftedDialog from "../components/GiftedDialog.vue";
 import QuickNav from "../components/QuickNav.vue";
 import { NotificationIface } from "../constants/app";
@@ -656,6 +670,10 @@ export default class ClaimView extends Vue {
      return giveClaim.description || "";
    }
    if (this.veriClaim.claimType === "Emoji") {
      return (claim as EmojiClaim).text || "";
    }
    // Fallback for other claim types
    return (claim as { description?: string })?.description || "";
  }
--- a/src/views/ConfirmContactView.vue
+++ b/src/views/ConfirmContactView.vue
@@ -1,18 +1,27 @@
 <template>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Cancel -->
        <router-link
          :to="{ name: 'account' }"
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </router-link>
        Confirm Contact
      </h1>
      <!-- Back -->
      <router-link
        class="order-first text-lg text-center leading-none p-1"
        :to="{ name: 'account' }"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </router-link>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <p class="text-center text-xl mb-4 font-light">
--- a/src/views/ConfirmGiftView.vue
+++ b/src/views/ConfirmGiftView.vue
@@ -1,18 +1,11 @@
 <template>
  <QuickNav />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 class="text-lg text-center font-light relative px-7">
+    <!-- Sub View Heading -->
-        <!-- Back -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-        <button
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.go(-1)"
        >
          <font-awesome icon="chevron-left" class="fa-fw" />
        </button>
        <span
          v-if="
            libsUtil.isGiveRecordTheUserCanConfirm(
@@ -25,8 +18,24 @@
        >
          Do you agree?
        </span>
-        <span v-else> Confirmation Details </span>
+        <span v-else>Confirmation Details</span>
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div v-if="giveDetails && !isLoading">
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -2,18 +2,27 @@
  <QuickNav selected="Contacts" />
  <section class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Header -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <router-link
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        :to="{ name: 'contacts' }"
        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
      >
        <font-awesome icon="chevron-left" class="fa-fw" />
      </router-link>
      <h1 class="text-4xl text-center font-light pt-4">
        Transferred with {{ contact?.name }}
      </h1>
      <!-- Back -->
      <router-link
        class="order-first text-lg text-center leading-none p-1"
        :to="{ name: 'contacts' }"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </router-link>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Info Messages -->
--- a/src/views/ContactEditView.vue
+++ b/src/views/ContactEditView.vue
@@ -1,19 +1,28 @@
 <template>
  <QuickNav selected="Contacts" />
  <TopMessage />
  <section id="ContactEdit" class="p-6 max-w-3xl mx-auto">
-    <div id="ViewBreadcrumb" class="mb-8">
+    <TopMessage />
-      <h1 class="text-4xl text-center font-light relative px-7">
+
-        <!-- Back -->
+    <!-- Sub View Heading -->
-        <button
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
          @click="$router.go(-1)"
        >
          <font-awesome icon="chevron-left" class="fa-fw" />
        </button>
        {{ contact?.name || AppString.NO_CONTACT_NAME }}
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Contact Name -->
--- a/src/views/ContactGiftingView.vue
+++ b/src/views/ContactGiftingView.vue
@@ -2,17 +2,27 @@
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Back -->
        <router-link
          :to="{ name: 'home' }"
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </router-link>
        {{ stepType === "giver" ? "Given by..." : "Given to..." }}
      </h1>
      <!-- Back -->
      <router-link
        class="order-first text-lg text-center leading-none p-1"
        :to="{ name: 'home' }"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </router-link>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Results List -->
--- a/src/views/ContactImportView.vue
+++ b/src/views/ContactImportView.vue
@@ -1,20 +1,28 @@
 <template>
  <QuickNav selected="Contacts"></QuickNav>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <!-- Sub View Heading -->
-    <div class="text-lg text-center font-light relative px-7">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        Contact Import
        @click="$router.back()"
      >
        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
      </h1>
    </div>
-    <!-- Heading -->
+      <!-- Back -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      <a
-      Contact Import
+        class="order-first text-lg text-center leading-none p-1"
-    </h1>
+        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div v-if="checkingImports" class="text-center">
      <font-awesome icon="spinner" class="animate-spin" />
--- a/src/views/ContactQRScanFullView.vue
+++ b/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">
+      <!-- Sub View Heading -->
-        <h1 class="text-xl text-center font-semibold relative">
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
-          <!-- Back -->
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
          <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>
          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";
  }
  /**
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -1,26 +1,27 @@
 <template>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <div class="mb-2">
+    <!-- Sub View Heading -->
-      <h1 class="text-2xl text-center font-semibold relative px-7">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-        <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <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-2xl 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>
        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 v-if="!givenName" :class="nameWarningClasses">
--- a/src/views/ContactsView.vue
+++ b/src/views/ContactsView.vue
@@ -1,14 +1,25 @@
 <template>
  <QuickNav selected="Contacts" />
  <TopMessage />
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
    <h1 id="ViewHeading" class="text-4xl text-center font-light">
      Your Contacts
    </h1>
-    <div class="flex justify-between py-2 mt-8">
+    <!-- Main View Heading -->
    <div class="flex gap-4 items-center mb-4">
      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
        Your Contacts
      </h1>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div class="flex justify-between py-2 mt-4">
      <span />
      <span>
        <a
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -1,22 +1,31 @@
 <template>
  <QuickNav selected="Contacts" />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
+    <!-- Sub View Heading -->
-        <!-- Go to 'contacts' instead of just 'back' because they could get here from an edit page 
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-             (and going back there is annoying). -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <router-link
          :to="{ name: 'contacts' }"
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </router-link>
        Identifier Details
      </h1>
      <!-- Back -->
      <router-link
        class="order-first text-lg text-center leading-none p-1"
        :to="{ name: 'contacts' }"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </router-link>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Identity Details -->
@@ -25,7 +34,7 @@
      class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4"
    >
      <div>
-        <h2 class="text-xl font-semibold">
+        <h2 class="text-xl font-semibold overflow-hidden text-ellipsis">
          {{ contactFromDid?.name || "(no name)" }}
          <router-link
            :to="{ name: 'contact-edit', params: { did: contactFromDid?.did } }"
--- a/src/views/DeepLinkErrorView.vue
+++ b/src/views/DeepLinkErrorView.vue
@@ -1,7 +1,15 @@
 <template>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <h1>Invalid Deep Link</h1>
+    <!-- Sub View Heading -->
    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1
        class="grow text-rose-500 text-xl text-center font-semibold leading-tight"
      >
        Invalid Deep Link
      </h1>
    </div>
    <div class="error-details">
      <div class="error-message">
        <h3>Error Details</h3>
@@ -114,11 +122,6 @@ onMounted(() => {
 </script>
 <style scoped>
 h1 {
  color: #ff4444;
  margin-bottom: 24px;
 }
 h2,
 h3 {
  color: #333;
--- a/src/views/DeepLinkRedirectView.vue
+++ b/src/views/DeepLinkRedirectView.vue
@@ -2,9 +2,12 @@
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
    <div class="mb-4">
-      <h1 class="text-2xl text-center font-semibold relative px-7">
+      <!-- Sub View Heading -->
-        Redirecting to Time Safari
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      </h1>
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
          Redirecting to Time Safari
        </h1>
      </div>
      <div v-if="destinationUrl" class="space-y-4">
        <!-- Platform-specific messaging -->
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -1,13 +1,22 @@
 <template>
  <QuickNav selected="Discover" />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Discover Projects & People
+    <!-- Main View Heading -->
-    </h1>
+    <div class="flex gap-4 items-center mb-4">
      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">Discover</h1>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <OnboardingDialog ref="onboardingDialog" />
@@ -273,8 +282,8 @@
                />
              </div>
-              <div class="grow">
+              <div class="grow overflow-hidden">
-                <h2 class="text-base font-semibold">
+                <h2 class="text-base font-semibold truncate">
                  {{ project.name || unnamedProject }}
                </h2>
                <div class="text-sm">
@@ -904,7 +913,7 @@ export default class DiscoverView extends Vue {
  public computedLocalTabStyleClassNames() {
    return {
      "inline-block": true,
-      "py-3": true,
+      "py-2": true,
      "rounded-t-lg": true,
      "border-b-2": true,
@@ -922,7 +931,7 @@ export default class DiscoverView extends Vue {
  public computedMappedTabStyleClassNames() {
    return {
      "inline-block": true,
-      "py-3": true,
+      "py-2": true,
      "rounded-t-lg": true,
      "border-b-2": true,
@@ -940,7 +949,7 @@ export default class DiscoverView extends Vue {
  public computedRemoteTabStyleClassNames() {
    return {
      "inline-block": true,
-      "py-3": true,
+      "py-2": true,
      "rounded-t-lg": true,
      "border-b-2": true,
@@ -958,7 +967,7 @@ export default class DiscoverView extends Vue {
  public computedProjectsTabStyleClassNames() {
    return {
      "inline-block": true,
-      "py-3": true,
+      "py-2": true,
      "rounded-t-lg": true,
      "border-b-2": true,
@@ -976,7 +985,7 @@ export default class DiscoverView extends Vue {
  public computedPeopleTabStyleClassNames() {
    return {
      "inline-block": true,
-      "py-3": true,
+      "py-2": true,
      "rounded-t-lg": true,
      "border-b-2": true,
--- a/src/views/GiftedDetailsView.vue
+++ b/src/views/GiftedDetailsView.vue
@@ -1,24 +1,33 @@
 <template>
  <QuickNav />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 class="text-2xl text-center font-semibold relative px-7 mb-2">
+    <div class="mb-8">
      <!-- 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">
          What Was Given
        </h1>
        <!-- Back -->
-        <div
+        <a
-          v-if="!hideBackButton"
+          class="order-first text-lg text-center leading-none p-1"
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="cancelBack()"
        >
-          <font-awesome icon="chevron-left" class="fa-fw" />
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-        </div>
+        </a>
        What Was Given
      </h1>
-      <h2 class="text-lg font-normal text-center overflow-hidden">
+        <!-- Help button -->
        <router-link
          :to="{ name: 'help' }"
          class="block ms-auto 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"
        >
          <font-awesome icon="question" class="block text-center w-[1em]" />
        </router-link>
      </div>
      <h2 class="text-lg font-normal leading-tight text-center overflow-hidden">
        <div class="truncate">
          From
          {{
--- a/src/views/HelpNotificationTypesView.vue
+++ b/src/views/HelpNotificationTypesView.vue
@@ -3,22 +3,27 @@
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </h1>
      </div>
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Notification Types
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- eslint-disable prettier/prettier -->
--- a/src/views/HelpNotificationsView.vue
+++ b/src/views/HelpNotificationsView.vue
@@ -34,22 +34,27 @@
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="goBack()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </h1>
      </div>
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Notification Help
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="goBack()"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- eslint-disable prettier/prettier -->
--- a/src/views/HelpOnboardingView.vue
+++ b/src/views/HelpOnboardingView.vue
@@ -3,11 +3,9 @@
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Don't include 'back' button since this is shown in a different window. -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Time Safari Onboarding Instructions
      </h1>
    </div>
--- a/src/views/HelpView.vue
+++ b/src/views/HelpView.vue
@@ -3,23 +3,25 @@
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw" />
        </h1>
      </div>
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Help
-        <span class="text-xs text-gray-500">{{ package.version }}</span>
+        <span class="text-xs font-medium text-slate-500 uppercase">{{
          package.version
        }}</span>
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Spacer (no Help button) -->
      <div class="p-3 pe-3.5 pb-3.5"></div>
    </div>
    <!-- eslint-disable prettier/prettier max-len -->
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -6,7 +6,6 @@ Raymer * @version 1.0.0 */
 <template>
  <QuickNav selected="Home" />
  <TopMessage />
  <!-- CONTENT -->
  <section
@@ -14,10 +13,25 @@ Raymer * @version 1.0.0 */
    class="p-6 pb-24 max-w-3xl mx-auto"
    :data-active-did="activeDid"
  >
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+    <TopMessage />
-      {{ AppString.APP_NAME }}
+
-      <span class="text-xs text-gray-500">{{ package.version }}</span>
+    <!-- Main View Heading -->
-    </h1>
+    <div class="flex gap-4 items-center mb-4">
      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
        {{ AppString.APP_NAME }}
        <span class="text-xs font-medium text-slate-500 uppercase">{{
          package.version
        }}</span>
      </h1>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <OnboardingDialog ref="onboardingDialog" />
@@ -97,9 +111,9 @@ Raymer * @version 1.0.0 */
          <!-- Record Quick-Action -->
          <div class="mb-6">
            <div class="flex gap-2 items-center mb-2">
-              <h2 class="text-xl font-bold">Record something given by:</h2>
+              <h2 class="font-bold">Record something given by:</h2>
              <button
-                class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+                class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
                @click="openGiftedPrompts()"
              >
                <font-awesome
@@ -143,10 +157,10 @@ Raymer * @version 1.0.0 */
    <!-- Results List -->
    <div class="mt-4 mb-4">
      <div class="flex gap-2 items-center mb-3">
-        <h2 class="text-xl font-bold">Latest Activity</h2>
+        <h2 class="font-bold">Latest Activity</h2>
        <button
          v-if="resultsAreFiltered()"
-          class="block ms-auto 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-2 rounded-full"
+          class="block ms-auto 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="openFeedFilters()"
        >
          <font-awesome
@@ -156,7 +170,7 @@ Raymer * @version 1.0.0 */
        </button>
        <button
          v-else
-          class="block ms-auto text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-2 rounded-full"
+          class="block ms-auto text-sm text-center text-white bg-gradient-to-b from-slate-400 to-slate-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] p-1.5 rounded-full"
          @click="openFeedFilters()"
        >
          <font-awesome
@@ -231,6 +245,7 @@ Raymer * @version 1.0.0 */
            :last-viewed-claim-id="feedLastViewedClaimId"
            :is-registered="isRegistered"
            :active-did="activeDid"
            :api-server="apiServer"
            @load-claim="onClickLoadClaim"
            @view-image="openImageViewer"
          />
@@ -1250,6 +1265,7 @@ export default class HomeView extends Vue {
      provider,
      fulfillsPlan,
      providedByPlan,
      record.emojiCount,
    );
  }
@@ -1473,12 +1489,14 @@ export default class HomeView extends Vue {
    provider: Provider | undefined,
    fulfillsPlan?: FulfillsPlan,
    providedByPlan?: ProvidedByPlan,
    emojiCount?: Record<string, number>,
  ): GiveRecordWithContactInfo {
    return {
      ...record,
      jwtId: record.jwtId,
      fullClaim: record.fullClaim,
      description: record.description || "",
      emojiCount: emojiCount || {},
      handleId: record.handleId,
      issuerDid: record.issuerDid,
      fulfillsPlanHandleId: record.fulfillsPlanHandleId,
--- a/src/views/IdentitySwitcherView.vue
+++ b/src/views/IdentitySwitcherView.vue
@@ -1,18 +1,27 @@
 <template>
  <QuickNav selected="Profile"></QuickNav>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Cancel -->
        <router-link
          :to="{ name: 'account' }"
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          ><font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </router-link>
        Switch Identity
      </h1>
      <!-- Back -->
      <router-link
        class="order-first text-lg text-center leading-none p-1"
        :to="{ name: 'account' }"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </router-link>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Identity List -->
--- a/src/views/ImportAccountView.vue
+++ b/src/views/ImportAccountView.vue
@@ -1,17 +1,26 @@
 <template>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Cancel -->
        <button
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.go(-1)"
        >
          <font-awesome icon="chevron-left"></font-awesome>
        </button>
        Import Existing Identifier
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Import Account Form -->
    <p class="text-center text-xl mb-4 font-light">
--- a/src/views/ImportDerivedAccountView.vue
+++ b/src/views/ImportDerivedAccountView.vue
@@ -1,20 +1,29 @@
 <template>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Cancel -->
        <button
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.go(-1)"
        >
          <font-awesome icon="chevron-left"></font-awesome>
        </button>
        Derive from Existing Identity
      </h1>
    </div>
    <!-- Import Account Form -->
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Import Account Form -->
    <div>
      <p class="text-center text-xl mb-4 font-light">
        Will increment the maximum known derivation path from the existing seed.
--- a/src/views/InviteOneView.vue
+++ b/src/views/InviteOneView.vue
@@ -1,20 +1,31 @@
 <template>
-  <QuickNav selected="Invite" />
+  <QuickNav selected="Contacts" />
  <TopMessage />
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
    <div class="text-lg text-center font-light relative px-7">
      <h1
        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
        @click="$router.back()"
      >
        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
      </h1>
    </div>
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 class="text-4xl text-center font-light">Invitations</h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Invitations
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <ul class="ml-8 mt-4 list-outside list-disc w-5/6">
      <li>
--- a/src/views/LogView.vue
+++ b/src/views/LogView.vue
@@ -1,22 +1,31 @@
 <!-- This is useful in an environment where the download doesn't work. -->
 <template>
  <QuickNav selected="" />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back Button -->
+    <TopMessage />
    <div class="relative px-7">
      <h1
        class="text-lg text-center font-light px-2 py-1 absolute -left-2 -top-1"
        @click="$router.back()"
      >
        <font-awesome icon="chevron-left" class="mr-2" />
      </h1>
    </div>
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-6">Logs</h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">Logs</h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Error Message -->
    <div
--- a/src/views/NewActivityView.vue
+++ b/src/views/NewActivityView.vue
@@ -2,17 +2,27 @@
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Back -->
        <font-awesome
          icon="chevron-left"
          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        />
        New Activity For You
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Display a single row with the name of "New Offers To You" with a count. -->
--- a/src/views/NewEditAccountView.vue
+++ b/src/views/NewEditAccountView.vue
@@ -22,18 +22,27 @@
 -->
 <template>
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Cancel -->
        <button
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </button>
        Edit Identity
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <input
--- a/src/views/NewEditProjectView.vue
+++ b/src/views/NewEditProjectView.vue
@@ -2,19 +2,27 @@
  <QuickNav selected="Projects"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Cancel -->
        <!-- Back -->
        <button
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </button>
        Edit Project Idea
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Project Details -->
--- a/src/views/NewIdentifierView.vue
+++ b/src/views/NewIdentifierView.vue
@@ -3,22 +3,27 @@
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </h1>
      </div>
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Your Identity
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div class="flex justify-center py-12">
--- a/src/views/NotFoundView.vue
+++ b/src/views/NotFoundView.vue
@@ -0,0 +1,86 @@
 <template>
  <div
    class="min-h-screen bg-gray-50 flex flex-col justify-start pt-2 sm:px-6 lg:px-8"
  >
    <div class="sm:mx-auto sm:w-full sm:max-w-md">
      <div class="text-center">
        <div class="mx-auto h-24 w-24 text-gray-400">
          <svg
            fill="none"
            stroke="currentColor"
            viewBox="0 0 24 24"
            xmlns="http://www.w3.org/2000/svg"
          >
            <circle cx="12" cy="12" r="10" stroke-width="1.5" />
            <path
              stroke-linecap="round"
              stroke-linejoin="round"
              stroke-width="2"
              d="M12 8v4m0 4h.01"
            />
          </svg>
        </div>
        <h1 class="mt-4 text-3xl font-extrabold text-gray-900">Not Found</h1>
        <p class="text-sm text-gray-600">
          The page you're looking for doesn't exist.
        </p>
        <div class="mt-1">
          <button
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            @click="goBack"
          >
            <svg
              class="-ml-1 mr-2 h-5 w-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M10 19l-7-7m0 0l7-7m-7 7h18"
              />
            </svg>
            Go Back
          </button>
        </div>
        <div class="mt-16">
          <button
            class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500"
            @click="goHome"
          >
            <svg
              class="-ml-1 mr-2 h-5 w-5"
              fill="none"
              stroke="currentColor"
              viewBox="0 0 24 24"
            >
              <path
                stroke-linecap="round"
                stroke-linejoin="round"
                stroke-width="2"
                d="M3 12l2-2m0 0l7-7 7 7M5 10v10a1 1 0 001 1h3m10-11l2 2m-2-2v10a1 1 0 01-1 1h-3m-6 0a1 1 0 001-1v-4a1 1 0 011-1h2a1 1 0 011 1v4a1 1 0 001 1m-6 0h6"
              ></path>
            </svg>
            Go Home
          </button>
        </div>
      </div>
    </div>
  </div>
 </template>
 <script setup lang="ts">
 import { useRouter } from "vue-router";
 const router = useRouter();
 const goHome = () => {
  router.push("/");
 };
 const goBack = () => {
  router.go(-1);
 };
 </script>
--- a/src/views/OfferDetailsView.vue
+++ b/src/views/OfferDetailsView.vue
@@ -1,24 +1,32 @@
 <template>
  <QuickNav />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
-    <div
+
-      v-if="!hideBackButton"
+    <!-- Sub View Heading -->
-      class="text-lg text-center font-light relative px-7"
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-    >
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-      <h1
+        What Is Offered
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="cancelBack()"
      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-      </h1>
+      </a>
    </div>
-    <!-- Heading -->
+      <!-- Help button -->
-    <h1 class="text-4xl text-center font-light px-4 mb-4">What Is Offered</h1>
+      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <h1 class="text-xl font-bold text-center mb-4">
      <span> Offer to {{ recipientDisplayName }} </span>
--- a/src/views/OnboardMeetingListView.vue
+++ b/src/views/OnboardMeetingListView.vue
@@ -1,12 +1,26 @@
 <template>
  <QuickNav selected="Contacts" />
  <TopMessage />
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+
-      Onboarding Meetings
+    <!-- Sub View Heading -->
-    </h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Onboarding Meetings
      </h1>
      <!-- Spacer (no Back button) -->
      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Loading State -->
    <div v-if="isLoading" class="flex justify-center items-center py-8">
--- a/src/views/OnboardMeetingMembersView.vue
+++ b/src/views/OnboardMeetingMembersView.vue
@@ -1,12 +1,26 @@
 <template>
  <QuickNav selected="Contacts" />
  <TopMessage />
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light mb-8">
+
-      Meeting Members
+    <!-- Sub View Heading -->
-    </h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Meeting Members
      </h1>
      <!-- Spacer (no Back button) -->
      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Loading Animation -->
    <div
--- a/src/views/OnboardMeetingSetupView.vue
+++ b/src/views/OnboardMeetingSetupView.vue
@@ -1,12 +1,26 @@
 <template>
  <QuickNav selected="Contacts" />
  <TopMessage />
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Onboarding Meeting
+    <!-- Sub View Heading -->
-    </h1>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Onboarding Meeting
      </h1>
      <!-- Spacer (no Back button) -->
      <div class="order-first p-3 pe-3.5 pb-3.5"></div>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Existing Meeting Section -->
    <div
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -1,48 +1,58 @@
 <template>
  <QuickNav />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div id="ViewBreadcrumb">
+
-      <div>
+    <div class="mb-4">
-        <h1 class="text-center text-lg font-light relative px-7">
+      <!-- Sub View Heading -->
-          <!-- Back -->
+      <div id="SubViewHeading" class="flex gap-4 items-start mb-4">
-          <button
+        <h1 class="grow text-xl text-center font-semibold leading-tight">
            class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
            @click="$router.back()"
          >
            <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
          </button>
          Project Idea
        </h1>
-        <h2 class="text-center text-xl font-semibold">
+
-          {{ name }}
+        <!-- Back -->
-          <button
+        <a
-            v-if="activeDid === issuer || activeDid === agentDid"
+          class="order-first text-lg text-center leading-none p-1"
-            title="Edit"
+          @click="$router.go(-1)"
-            data-testId="editClaimButton"
+        >
-            @click="onEditClick()"
+          <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-          >
+        </a>
-            <font-awesome icon="pen" class="text-sm text-blue-500 ml-2 mb-1" />
+
-          </button>
+        <!-- Help button -->
-          <button
+        <router-link
-            :title="
+          :to="{ name: 'help' }"
-              isStarred
+          class="block ms-auto 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"
-                ? 'Remove from starred projects'
+        >
-                : 'Add to starred projects'
+          <font-awesome icon="question" class="block text-center w-[1em]" />
-            "
+        </router-link>
            @click="toggleStar()"
          >
            <font-awesome
              :icon="isStarred ? 'star' : ['far', 'star']"
              :class="isStarred ? 'text-yellow-500' : 'text-slate-500'"
              class="text-sm ml-2 mb-1"
            />
          </button>
        </h2>
      </div>
      <h2 class="text-center text-lg font-normal overflow-hidden text-ellipsis">
        {{ name }}
        <button
          v-if="activeDid === issuer || activeDid === agentDid"
          title="Edit"
          data-testId="editClaimButton"
          @click="onEditClick()"
        >
          <font-awesome icon="pen" class="text-sm text-blue-500 ml-2" />
        </button>
        <button
          :title="
            isStarred
              ? 'Remove from starred projects'
              : 'Add to starred projects'
          "
          @click="toggleStar()"
        >
          <font-awesome
            :icon="isStarred ? 'star' : ['far', 'star']"
            :class="isStarred ? 'text-yellow-500' : 'text-slate-500'"
            class="text-sm ml-2"
          />
        </button>
      </h2>
    </div>
    <!-- Project Details -->
@@ -147,7 +157,7 @@
        </div>
        <div class="text-sm text-slate-500">
-          <div v-if="!expanded">
+          <div v-if="!expanded" class="overflow-hidden text-ellipsis">
            <vue-markdown
              :source="truncatedDesc"
              class="mb-4 markdown-content"
@@ -159,7 +169,7 @@
              >... Read More</a
            >
          </div>
-          <div v-else>
+          <div v-else class="overflow-hidden text-ellipsis">
            <vue-markdown :source="description" class="mb-4 markdown-content" />
            <a
              v-if="description.length >= truncateLength"
@@ -298,7 +308,10 @@
                />{{ offer.amount }}
              </span>
            </div>
-            <div v-if="offer.objectDescription" class="text-slate-500">
+            <div
              v-if="offer.objectDescription"
              class="text-slate-500 overflow-hidden text-ellipsis"
            >
              <font-awesome icon="comment" class="fa-fw text-slate-400" />
              {{ offer.objectDescription }}
            </div>
@@ -440,7 +453,10 @@
                <font-awesome icon="calendar" class="fa-fw text-slate-400" />
                {{ give.issuedAt?.substring(0, 10) }}
              </div>
-              <div v-if="give.description" class="text-slate-500">
+              <div
                v-if="give.description"
                class="text-slate-500 overflow-hidden text-ellipsis"
              >
                <font-awesome icon="comment" class="fa-fw text-slate-400" />
                {{ give.description }}
              </div>
@@ -547,7 +563,10 @@
              <font-awesome icon="calendar" class="fa-fw text-slate-400" />
              {{ give.issuedAt?.substring(0, 10) }}
            </div>
-            <div v-if="give.description" class="text-slate-500">
+            <div
              v-if="give.description"
              class="text-slate-500 overflow-hidden text-ellipsis"
            >
              <font-awesome icon="comment" class="fa-fw text-slate-400" />
              {{ give.description }}
            </div>
--- a/src/views/ProjectsView.vue
+++ b/src/views/ProjectsView.vue
@@ -1,17 +1,28 @@
 <template>
  <QuickNav selected="Projects" />
  <TopMessage />
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <TopMessage />
-    <h1 id="ViewHeading" class="text-4xl text-center font-light">
+
-      Your Project Ideas
+    <!-- Main View Heading -->
-    </h1>
+    <div class="flex gap-4 items-center mb-4">
      <h1 id="ViewHeading" class="text-2xl font-bold leading-none">
        Your Ideas
      </h1>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <OnboardingDialog ref="onboardingDialog" />
    <!-- Result Tabs -->
-    <div class="text-center text-slate-500 border-b border-slate-300 mt-8">
+    <div class="text-center text-slate-500 border-b border-slate-300 mt-4">
      <ul class="flex flex-wrap justify-center gap-4 -mb-px">
        <li>
          <a
@@ -107,8 +118,8 @@
              />
            </div>
-            <div>
+            <div class="overflow-hidden">
-              <div>
+              <div class="text-sm truncate">
                To
                {{
                  offer.fulfillsPlanHandleId
@@ -121,7 +132,7 @@
                      )
                }}
              </div>
-              <div>
+              <div class="truncate">
                {{ offer.objectDescription }}
              </div>
@@ -243,7 +254,7 @@
            </div>
            <div class="grow overflow-hidden">
-              <h2 class="text-base font-semibold">
+              <h2 class="text-base font-semibold truncate">
                {{ project.name || unnamedProject }}
              </h2>
              <div class="text-sm truncate">
@@ -646,7 +657,7 @@ export default class ProjectsView extends Vue {
  get offerTabClasses() {
    return {
      "inline-block": true,
-      "py-3": true,
+      "py-2": true,
      "rounded-t-lg": true,
      "border-b-2": true,
      active: this.showOffers,
@@ -664,7 +675,7 @@ export default class ProjectsView extends Vue {
   * @returns String with CSS classes for the floating new project button
   */
  get newProjectButtonClasses() {
-    return "fixed right-6 top-24 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
+    return "fixed right-6 top-14 text-center text-4xl leading-none bg-green-600 text-white w-14 py-2.5 rounded-full";
  }
  /**
@@ -706,7 +717,7 @@ export default class ProjectsView extends Vue {
  get projectTabClasses() {
    return {
      "inline-block": true,
-      "py-3": true,
+      "py-2": true,
      "rounded-t-lg": true,
      "border-b-2": true,
      active: this.showProjects,
--- a/src/views/QuickActionBvcBeginView.vue
+++ b/src/views/QuickActionBvcBeginView.vue
@@ -1,23 +1,32 @@
 <template>
  <QuickNav />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
-    <div class="text-lg text-center font-light relative px-7">
+
-      <h1
+    <!-- Sub View Heading -->
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Beginning of BVC Saturday Meeting
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="goBack()"
      >
-        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
+        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
-      </h1>
+      </a>
    </div>
-    <!-- Heading -->
+      <!-- Help button -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+      <router-link
-      Beginning of BVC Saturday Meeting
+        :to="{ name: 'help' }"
-    </h1>
+        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div>
      <h2 class="text-2xl m-2">You're Here</h2>
--- a/src/views/QuickActionBvcEndView.vue
+++ b/src/views/QuickActionBvcEndView.vue
@@ -1,20 +1,32 @@
 <template>
  <QuickNav />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
    <div class="text-lg text-center font-light relative px-7">
      <h1 :class="backButtonClasses" @click="$router.back()">
        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
      </h1>
    </div>
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      End of BVC Saturday Meeting
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-    </h1>
+        End of BVC Saturday Meeting
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div>
      <h2 class="text-2xl m-2">Confirm</h2>
--- a/src/views/QuickActionBvcView.vue
+++ b/src/views/QuickActionBvcView.vue
@@ -1,23 +1,32 @@
 <template>
  <QuickNav />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <TopMessage />
    <div class="text-lg text-center font-light relative px-7">
      <h1
        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
        @click="$router.back()"
      >
        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
      </h1>
    </div>
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light px-4 mb-4">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      Bountiful Voluntaryist Community Actions
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-    </h1>
+        Bountiful Voluntaryist Community Actions
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div>
      <router-link
--- a/src/views/RecentOffersToUserProjectsView.vue
+++ b/src/views/RecentOffersToUserProjectsView.vue
@@ -2,17 +2,27 @@
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Back -->
        <font-awesome
          icon="chevron-left"
          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        />
        Offers to Your Projects
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div v-if="newOffersToUserProjects.length === 0">
--- a/src/views/RecentOffersToUserView.vue
+++ b/src/views/RecentOffersToUserView.vue
@@ -2,17 +2,27 @@
  <QuickNav selected="Home"></QuickNav>
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div id="ViewBreadcrumb" class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <h1 class="text-lg text-center font-light relative px-7">
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
        <!-- Back -->
        <font-awesome
          icon="chevron-left"
          class="fa-fw text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        />
        Offers to You
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div v-if="newOffersToUser.length === 0">
--- a/src/views/SearchAreaView.vue
+++ b/src/views/SearchAreaView.vue
@@ -1,24 +1,27 @@
 <template>
  <QuickNav />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="goBack"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </h1>
      </div>
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Area for Nearby Search
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="goBack()"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div class="px-2 py-4">
--- a/src/views/SeedBackupView.vue
+++ b/src/views/SeedBackupView.vue
@@ -28,31 +28,29 @@
 -->
 <template>
  <QuickNav selected="Profile" />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Back -->
+    <!-- Sub View Heading -->
-    <div class="text-lg text-center font-light relative px-7">
+    <div class="flex gap-4 items-start mb-8">
-      <h1
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        Seed Backup
        @click="goBack"
      >
        <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
      </h1>
    </div>
-    <!-- Heading -->
+      <!-- Back -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      <a
-      Seed Backup
+        class="order-first text-lg text-center leading-none p-1"
-    </h1>
+        @click="goBack()"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
-    <div class="flex justify-between py-2">
+      <!-- Help button -->
-      <span />
+      <router-link
-      <span>
+        :to="{ name: 'help' }"
-        <router-link :to="{ name: 'help' }" :class="helpButtonClass">
+        class="block ms-auto 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"
-          Help
+      >
-        </router-link>
+        <font-awesome icon="question" class="block text-center w-[1em]" />
-      </span>
+      </router-link>
    </div>
    <div v-if="activeAccount">
--- a/src/views/ShareMyContactInfoView.vue
+++ b/src/views/ShareMyContactInfoView.vue
@@ -1,26 +1,31 @@
 <template>
  <QuickNav />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-2 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
    <div>
      <!-- Back -->
      <div class="text-lg text-center font-light relative px-7">
        <button
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          aria-label="Go back"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw" />
        </button>
      </div>
-      <!-- Heading -->
+    <!-- Sub View Heading -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
      <h1 class="grow text-xl text-center font-semibold leading-tight">
        Share Your Contact Info
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div class="flex justify-center mt-8">
--- a/src/views/SharedPhotoView.vue
+++ b/src/views/SharedPhotoView.vue
@@ -39,10 +39,28 @@
  <QuickNav />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Heading -->
+    <!-- Sub View Heading -->
-    <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      Image
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
-    </h1>
+        Image
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div v-if="imageBlob">
      <div v-if="uploading" class="text-center mb-4">
        <font-awesome icon="spinner" class="fa-spin-pulse" />
--- a/src/views/StartView.vue
+++ b/src/views/StartView.vue
@@ -3,26 +3,31 @@
    id="Content"
    class="p-6 pb-24 min-h-screen flex flex-col justify-center"
  >
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div>
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="goBack"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </h1>
      </div>
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Generate an Identity
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="goBack()"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- id used by puppeteer test script -->
-    <div id="start-question" class="mt-8">
+    <div id="start-question">
      <div class="max-w-3xl mx-auto">
        <p class="text-center text-xl font-light">
          How do you want to create this identifier?
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -3,22 +3,27 @@
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </h1>
      </div>
      <!-- Heading -->
      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
        Achievements & Statistics
      </h1>
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div>
--- a/src/views/TestView.vue
+++ b/src/views/TestView.vue
@@ -3,22 +3,25 @@
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <!-- Sub View Heading -->
-    <div class="mb-8">
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-      <!-- Back -->
+      <h1 class="grow text-xl text-center font-semibold leading-tight">Test</h1>
      <div class="text-lg text-center font-light relative px-7">
        <h1
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </h1>
      </div>
-      <!-- Heading -->
+      <!-- Back -->
-      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+      <a
-        Test
+        class="order-first text-lg text-center leading-none p-1"
-      </h1>
+        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <div v-if="isNotProdServer">
--- a/src/views/UserProfileView.vue
+++ b/src/views/UserProfileView.vue
@@ -1,22 +1,31 @@
 <template>
  <QuickNav selected="Discover" />
  <TopMessage />
  <!-- CONTENT -->
  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
-    <!-- Breadcrumb -->
+    <TopMessage />
-    <div id="ViewBreadcrumb" class="mb-8">
+
-      <h1 id="ViewHeading" class="text-lg text-center font-light relative px-7">
+    <!-- Sub View Heading -->
-        <!-- Back -->
+    <div id="SubViewHeading" class="flex gap-4 items-start mb-8">
-        <button
+      <h1 class="grow text-xl text-center font-semibold leading-tight">
          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
          @click="$router.back()"
        >
          <font-awesome icon="chevron-left" class="fa-fw"></font-awesome>
        </button>
        Individual Profile
      </h1>
-      <div class="text-sm text-center text-slate-500"></div>
+
      <!-- Back -->
      <a
        class="order-first text-lg text-center leading-none p-1"
        @click="$router.go(-1)"
      >
        <font-awesome icon="chevron-left" class="block text-center w-[1em]" />
      </a>
      <!-- Help button -->
      <router-link
        :to="{ name: 'help' }"
        class="block ms-auto 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"
      >
        <font-awesome icon="question" class="block text-center w-[1em]" />
      </router-link>
    </div>
    <!-- Loading Animation -->
Author	SHA1	Message	Date
Trent Larson	637fc10e64	chore: remove emoji-mart-vue-fast that isn't used yet	2025-10-19 18:57:13 -06:00
Trent Larson	37d4dcc1a8	feat: add context for Emoji claims	2025-10-19 18:53:20 -06:00
Trent Larson	c369c76c1a	fix: linting	2025-10-19 18:44:14 -06:00
Trent Larson	86caf793aa	feat: make spinner more standard, show emoji on claim-view page	2025-10-19 18:43:21 -06:00
Trent Larson	499fbd2cb3	feat: show a better emoji-confirmation message, hide all emoji stuff from unregistered on items without emojis	2025-10-19 16:41:53 -06:00
Trent Larson	a4a9293bc2	feat: get the emojis to work with additions, removals, and multiple people	2025-10-19 15:22:34 -06:00
Trent Larson	9ac9f1d4a3	feat: add first cut at emojis in feed (incomplete because it doesn't detect user's emojis correctly)	2025-10-18 17:18:02 -06:00
Jose Olarte 3	b0d13b3cd4	Merge pull request 'feat: disable zoom and fix iOS viewport issues' (#206 ) from ios-disable-zoom into master Reviewed-on: #206	2025-10-08 06:04:32 -04:00
Jose Olarte III	5256681089	Merge branch 'master' into ios-disable-zoom	2025-10-08 18:03:27 +08:00
Jose Olarte III	225b34d480	feat: improve text overflow handling across UI components - Add overflow-hidden, text-ellipsis and truncate classes to long text elements in list items and views to prevent text overflow - Ensure proper text wrapping and ellipsis display for long content	2025-10-07 19:00:12 +08:00
Jose Olarte 3	d9f9460be7	Merge pull request 'refactor: standardize view headings across all components' (#207 ) from view-headings-refresh into master Reviewed-on: #207	2025-10-07 05:17:05 -04:00
Jose Olarte III	b1026a9854	Linting	2025-10-07 16:38:35 +08:00
Jose Olarte III	cba33c6ad9	Merge branch 'master' into view-headings-refresh	2025-10-07 16:37:36 +08:00
Jose Olarte III	756688bf75	feat: restored TopMessage - Added back TopMessage tag, placed inside #Content for better positioning - Styled TopMessage for better visibility	2025-10-06 18:42:05 +08:00
Trent Larson	7599b37c01	feat: add a 'not found' page	2025-10-05 15:31:08 -06:00
Trent Larson	a4024537c2	Merge branch 'star-projects2'	2025-10-05 13:33:58 -06:00
Jose Olarte III	be8230d046	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	2025-10-03 21:49:35 +08:00
Jose Olarte 3	284fee9ded	Merge pull request 'feat: removed "cannot upload images" notification' (#205 ) from remove-cannot-upload-images-notification into master Reviewed-on: #205	2025-10-03 02:18:35 -04:00
Jose Olarte III	88778a167c	WIP: sub view heading adjustments	2025-10-01 18:38:43 +08:00
Jose Olarte III	f4144c7469	feat: disable zoom and fix iOS viewport issues - Add user-scalable=no and interactive-widget=overlays-content to viewport meta tag - Implement iOS viewport height fixes to prevent keyboard-related layout shifts - Use dynamic viewport height (100dvh) for better mobile support - Add fixed positioning and overflow controls to prevent viewport changes - Enable scrolling only within #app container for better UX	2025-09-30 21:06:13 +08:00
Jose Olarte III	eca6dfe9d7	feat: removed "cannot upload images" notification - Redundant notification removed - In-section message given "warning message" styling	2025-09-30 16:23:29 +08:00
Jose Olarte III	a6d282e59b	WIP: HomeView heading adjustments	2025-09-29 21:28:48 +08:00