Merge branch 'master' into ios-disable-zoom

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-08 18:03:27 +08:00 · 2025-10-07 19:00:12 +08:00 · 2025-10-07 05:17:05 -04:00 · 2025-09-30 21:06:13 +08:00
9 changed files with 55 additions and 22 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/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
@@ -78,8 +78,11 @@
      </div>

      <!-- Description -->
-      <p class="font-medium">
-        <a class="cursor-pointer" @click="emitLoadClaim(record.jwtId)">
+      <p class="font-medium overflow-hidden">
+        <a
+          class="block cursor-pointer overflow-hidden text-ellipsis"
+          @click="emitLoadClaim(record.jwtId)"
+        >
          <vue-markdown
            :source="truncatedDescription"
            class="markdown-content"
--- 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/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -88,19 +88,22 @@
              </button>
            </div>
          </div>
-          <div class="text-sm">
-            <div data-testId="description">
+          <div class="text-sm overflow-hidden">
+            <div
+              data-testId="description"
+              class="overflow-hidden text-ellipsis"
+            >
              <font-awesome icon="message" class="fa-fw text-slate-400" />
              <vue-markdown
                :source="claimDescription"
                class="markdown-content"
              />
            </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 }}
--- a/src/views/DIDView.vue
+++ b/src/views/DIDView.vue
@@ -34,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/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -282,8 +282,8 @@
                />
              </div>

-              <div class="grow">
-                <h2 class="text-base font-semibold">
+              <div class="grow overflow-hidden">
+                <h2 class="text-base font-semibold truncate">
                  {{ project.name || unnamedProject }}
                </h2>
                <div class="text-sm">
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -28,7 +28,7 @@
          <font-awesome icon="question" class="block text-center w-[1em]" />
        </router-link>
      </div>
-      <h2 class="text-center text-lg font-normal">
+      <h2 class="text-center text-lg font-normal overflow-hidden text-ellipsis">
        {{ name }}
        <button
          v-if="activeDid === issuer || activeDid === agentDid"
@@ -157,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"
@@ -169,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"
@@ -308,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>
@@ -450,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>
@@ -557,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
@@ -118,8 +118,8 @@
              />
            </div>

-            <div>
-              <div>
+            <div class="overflow-hidden">
+              <div class="text-sm truncate">
                To
                {{
                  offer.fulfillsPlanHandleId
@@ -132,7 +132,7 @@
                      )
                }}
              </div>
-              <div>
+              <div class="truncate">
                {{ offer.objectDescription }}
              </div>

@@ -254,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">
Author	SHA1	Message	Date
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	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