fix dependency icon and layout

web/projects/marketplace/src/pages/show/dependencies/dependency-item.component.ts

@@ -3,16 +3,25 @@ import { ChangeDetectionStrategy, Component, Input } from '@angular/core'
 import { EmverPipesModule } from '@start9labs/shared'
 import { Dependency, MarketplacePkg } from '../../../types'
 import { RouterModule } from '@angular/router'
-import { TuiAvatarModule } from '@taiga-ui/experimental'
+import { TuiAvatarModule, TuiLineClampModule } from '@taiga-ui/kit'
 
 @Component({
   selector: 'marketplace-dep-item',
   template: `
     <div class="outer-container">
-      <div class="inner-container">
-        <tui-avatar class="dep-img" [src]="getImage(dep.key)"></tui-avatar>
-        <div class="wrapper-margin">
-          <div class="inner-container-title">
+      <tui-avatar
+        class="dep-img"
+        [rounded]="true"
+        [size]="'l'"
+        [avatarUrl]="getImage(dep.key)"
+      ></tui-avatar>
+      <div>
+        <tui-line-clamp
+          [linesLimit]="2"
+          [content]="titleContent"
+        ></tui-line-clamp>
+        <ng-template #titleContent>
+          <div class="title">
             <span>
               {{ getTitle(dep.key) }}
             </span>
@@ -23,20 +32,27 @@ import { TuiAvatarModule } from '@taiga-ui/experimental'
               </ng-container>
             </p>
           </div>
-          <span class="inner-container-description">
-            {{ dep.value.description }}
-          </span>
-        </div>
+        </ng-template>
+        <tui-line-clamp
+          [linesLimit]="2"
+          [content]="descContent"
+          class="description"
+        ></tui-line-clamp>
+        <ng-template #descContent>
+          {{ dep.value.description }}
+        </ng-template>
       </div>
     </div>
   `,
   styles: [
     `
       .outer-container {
+        display: flex;
+        align-items: center;
+        gap: 1.5rem;
+        padding: 1rem 1.25rem;
         background-color: rgb(63 63 70 / 0.4);
         border-radius: 0.75rem;
-        padding: 0.75rem 1.25rem;
-        gap: 0.5rem;
         filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
           drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
 
@@ -46,60 +62,43 @@ import { TuiAvatarModule } from '@taiga-ui/experimental'
         }
       }
 
-      .inner-container {
+      .title {
         display: flex;
-        align-items: center;
-        gap: 1.5rem;
-      }
-
-      .inner-container-title {
-        margin-bottom: 0.25rem;
-        display: flex;
-        flex-wrap: wrap;
-        align-items: center;
         gap: 0.25rem;
 
+        p {
+          margin: 0;
+        }
+
         span {
-          display: block;
           font-size: 1rem;
           line-height: 1.5rem;
           font-weight: 500;
           color: rgb(250 250 250 / 0.9);
-          overflow: hidden;
-          display: -webkit-box;
-          -webkit-box-orient: vertical;
-          -webkit-line-clamp: 1;
         }
       }
 
-      .inner-container-description {
+      .description {
         font-size: 0.875rem;
         line-height: 1.25rem;
         color: rgb(250 250 250 / 0.7);
-        height: 2.75rem;
-        overflow: hidden;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
       }
 
       ::ng-deep .dep-img {
-        width: 4rem;
-        pointer-events: none;
-        border-radius: 100%;
-        object-fit: cover;
         filter: drop-shadow(0 10px 8px rgb(0 0 0 / 0.04))
           drop-shadow(0 4px 3px rgb(0 0 0 / 0.1));
       }
-
-      .wrapper-margin {
-        margin-top: 0.75rem;
-      }
     `,
   ],
   changeDetection: ChangeDetectionStrategy.OnPush,
   standalone: true,
-  imports: [CommonModule, RouterModule, TuiAvatarModule, EmverPipesModule],
+  imports: [
+    CommonModule,
+    RouterModule,
+    TuiAvatarModule,
+    EmverPipesModule,
+    TuiLineClampModule,
+  ],
 })
 export class MarketplaceDepItemComponent {
   @Input({ required: true })
@@ -111,7 +110,8 @@ export class MarketplaceDepItemComponent {
   getImage(key: string): string {
     const icon = this.pkg.dependencyMetadata[key]?.icon
     // @TODO fix when registry api is updated to include mimetype in icon url
-    return icon ? `data:image/png;base64,${icon}` : key.substring(0, 2)
+    // return icon ? `data:image/png;base64,${icon}` : key.substring(0, 2)
+    return icon ? icon : key.substring(0, 2)
   }
 
   getTitle(key: string): string {