refactor: moved avatar attribute to the correct place fixed tests

src/components/avatar/avatar.css

@@ -1,42 +1,42 @@
 :host {
-  @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-accent rounded-full;
+  @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-accent rounded-full shrink-0;
 }
 
 :host span {
-  @apply text-on-accent
+  @apply text-on-accent;
 }
 
-:host([size="xs"]) svg,
-:host([size="xs"]) {
+:host([size='xs']) svg,
+:host([size='xs']) {
   @apply h-6 w-6 text-xs;
 }
 
-:host([size="s"]) svg,
-:host([size="s"]) {
+:host([size='s']) svg,
+:host([size='s']) {
   @apply h-8 w-8 text-sm;
 }
 
-:host([size="m"]) svg,
-:host([size="m"]) {
+:host([size='m']) svg,
+:host([size='m']) {
   @apply h-10 w-10;
 }
 
-:host([size="l"]) svg,
-:host([size="l"]) {
+:host([size='l']) svg,
+:host([size='l']) {
   @apply h-20 w-20 text-lg;
 }
 
-:host([size="xl"]) svg,
-:host([size="xl"]) {
+:host([size='xl']) svg,
+:host([size='xl']) {
   @apply h-36 w-36 text-xl;
 }
 
-:host([shape="round"]) {
+:host([shape='round']) {
   @apply rounded-full;
 }
 
-:host([shape="square"]) {
+:host([shape='square']) {
   @apply rounded-lg;
 }
 
-@include base-component();
+@include base-component();

src/components/credential-service/d-credential-service.tsx

@@ -1,5 +1,4 @@
 import { Component, Host, Prop, h } from '@stencil/core';
-import 'material-symbols';
 
 @Component({
   tag: 'd-credential-service',
@@ -16,7 +15,7 @@ export class DCredentialService {
   render() {
     const content = (
       <div>
-        <d-avatar class="shrink-0" name={this.name} src={this.logoSrc} size="l"></d-avatar>
+        <d-avatar name={this.name} src={this.logoSrc} size="l"></d-avatar>
         <div class="grow truncate">
           <span class="name">{this.name}</span>
           <span class="description">{this.description}</span>

src/components/credential-service/test/d-credential-service.spec.tsx

@@ -12,7 +12,7 @@ describe('d-credential-service', () => {
         <mock:shadow-root>
           <div>
             <d-avatar size="l"></d-avatar>
-            <div class="grow">
+            <div class="grow truncate">
               <span class="name"></span>
               <span class="description"></span>
               <span class="issuer"></span>

tailwind.config.ts

@@ -6,7 +6,7 @@ export default {
     extend: {
       fontFamily: {
         sans: ['"Gantari Variable"', 'sans-serif'],
-        icon: ['"Material Symbols Rounded"', 'sans-serif],
+        icon: ['"Material Symbols Rounded"'],
       },
       colors: {
         'surface': 'var(--surface)',