refactor: convert entity display to list style

- Switch from grid display to list layout for persons and projects
- Re-styled special entities (unnamed, You) to match
- Added max-height limit to list in preparation for scrolling and displaying more items

src/components/EntityGrid.vue

@@ -2,7 +2,7 @@
 GiftedDialog.vue to provide a reusable grid layout * for displaying people,
 projects, and special entities with selection. * * @author Matthew Raymer */
 <template>
-  <ul :class="gridClasses">
+  <ul class="border-t border-slate-300 mb-4 max-h-[60vh] overflow-y-auto">
     <!-- Special entities (You, Unnamed) for people grids -->
     <template v-if="entityType === 'people'">
       <!-- "You" entity -->
@@ -205,19 +205,6 @@ export default class EntityGrid extends Vue {
     return "text-xs text-slate-500 italic col-span-full";
   }
 
-  /**
-   * Computed CSS classes for the grid layout
-   */
-  get gridClasses(): string {
-    const baseClasses = "grid gap-x-2 gap-y-4 text-center mb-4";
-
-    if (this.entityType === "projects") {
-      return `${baseClasses} grid-cols-3 md:grid-cols-4`;
-    } else {
-      return `${baseClasses} grid-cols-4 sm:grid-cols-5 md:grid-cols-6`;
-    }
-  }
-
   /**
    * Computed entities to display - uses function prop if provided, otherwise defaults
    */
@@ -231,7 +218,7 @@ export default class EntityGrid extends Vue {
     }
 
     // Default implementation for backward compatibility
-    const maxDisplay = this.entityType === "projects" ? 7 : this.maxItems;
+    const maxDisplay = this.entityType === "projects" ? 10 : this.maxItems;
     return this.entities.slice(0, maxDisplay);
   }