fix(components): prevent icon shrinking in PersonCard and ProjectCard

Add shrink-0 class to icon elements to maintain consistent icon sizing
when card layouts flex or wrap content.

src/components/EntityGrid.vue

@@ -377,21 +377,29 @@ export default class EntityGrid extends Vue {
       const searchLower = this.searchTerm.toLowerCase().trim();
 
       if (this.entityType === "people") {
-        this.filteredEntities = (this.entities as Contact[]).filter(
+        this.filteredEntities = (this.entities as Contact[])
-          (contact: Contact) => {
+          .filter((contact: Contact) => {
             const name = contact.name?.toLowerCase() || "";
             const did = contact.did.toLowerCase();
             return name.includes(searchLower) || did.includes(searchLower);
-          },
+          })
-        );
+          .sort((a: Contact, b: Contact) => {
+            // Sort alphabetically by name, falling back to DID if name is missing
+            const nameA = (a.name || a.did).toLowerCase();
+            const nameB = (b.name || b.did).toLowerCase();
+            return nameA.localeCompare(nameB);
+          });
       } else {
-        this.filteredEntities = (this.entities as PlanData[]).filter(
+        this.filteredEntities = (this.entities as PlanData[])
-          (project: PlanData) => {
+          .filter((project: PlanData) => {
             const name = project.name?.toLowerCase() || "";
             const handleId = project.handleId.toLowerCase();
             return name.includes(searchLower) || handleId.includes(searchLower);
-          },
+          })
-        );
+          .sort((a: PlanData, b: PlanData) => {
+            // Sort alphabetically by name
+            return a.name.toLowerCase().localeCompare(b.name.toLowerCase());
+          });
       }
     } finally {
       this.isSearching = false;

src/components/PersonCard.vue

@@ -7,12 +7,12 @@ conflict detection. * * @author Matthew Raymer */
       <EntityIcon
         v-if="person.did"
         :contact="person"
-        class="!size-[2rem] border border-slate-300 bg-white overflow-hidden rounded-full"
+        class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
       />
       <font-awesome
         v-else
         icon="circle-question"
-        class="text-slate-400 text-5xl mb-1"
+        class="text-slate-400 text-5xl mb-1 shrink-0"
       />
     </div>
 

src/components/ProjectCard.vue

@@ -10,7 +10,7 @@ issuer information. * * @author Matthew Raymer */
       :entity-id="project.handleId"
       :icon-size="48"
       :image-url="project.image"
-      class="!size-[2rem] border border-slate-300 bg-white overflow-hidden rounded-full"
+      class="!size-[2rem] shrink-0 border border-slate-300 bg-white overflow-hidden rounded-full"
     />
 
     <div class="overflow-hidden">