fix: truncate long lines of the credential-service

.prettierrc.json

@@ -9,6 +9,5 @@
   "singleQuote": true,
   "tabWidth": 2,
   "trailingComma": "all",
-  "useTabs": false,
-  "plugins": ["prettier-plugin-tailwindcss"]
+  "useTabs": false
 }

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

@@ -1,22 +1,23 @@
 import { Component, Host, Prop, h } from '@stencil/core';
+import 'material-symbols';
 
 @Component({
   tag: 'd-credential-service',
   styleUrl: 'd-credential-service.css',
   shadow: true,
 })
 export class DCredentialService {
-  @Prop({ reflect: true }) name: string;
-  @Prop({ reflect: true }) issuer: string;
-  @Prop({ reflect: true }) logoSrc?: string;
-  @Prop({ reflect: true }) description?: string;
-  @Prop({ reflect: true }) href?: string;
+  @Prop() name: string;
+  @Prop() issuer: string;
+  @Prop() logoSrc?: string;
+  @Prop() description?: string;
+  @Prop() href?: string;
 
   render() {
     const content = (
       <div>
-        <d-avatar name={this.name} src={this.logoSrc} size="l"></d-avatar>
-        <div class="grow">
+        <d-avatar class="shrink-0" 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>
           <span class="issuer">{this.issuer}</span>

src/global/app.ts

@@ -1 +0,0 @@
-import '@ionic/core'

src/global/global.css

@@ -51,6 +51,20 @@
   }
 }
 
+.icon {
+  font-family: 'Material Symbols Rounded';
+  font-weight: normal;
+  font-style: normal;
+  font-size: 24px; /* Preferred icon size */
+  display: inline-block;
+  line-height: 1;
+  text-transform: none;
+  letter-spacing: normal;
+  word-wrap: normal;
+  white-space: nowrap;
+  direction: ltr;
+}
+
 * {
   @apply text-on;
 }

stencil.config.ts

@@ -2,6 +2,7 @@ import { Config } from '@stencil/core';
 import { sass } from '@stencil/sass';
 import tailwind, { PluginConfigOpts, setPluginConfigurationDefaults, tailwindGlobal, tailwindHMR } from 'stencil-tailwind-plugin';
 import tailwindConf from './tailwind.config';
+import copy from 'rollup-plugin-copy';
 
 const opts = {
   debug: false,
@@ -20,6 +21,13 @@ export const config: Config = {
     {
       type: 'dist',
       esmLoaderPath: '../loader',
+      copy: [
+        {
+          src: '**/*.woff2',
+          dest: 'assets',
+          warn: true,
+        }
+      ]
     },
     {
       type: 'dist-custom-elements',
@@ -35,10 +43,29 @@ export const config: Config = {
     {
       type: 'www',
       serviceWorker: null, // disable service workers
+      copy: [
+        {
+          src: '**/*.woff2',
+          dest: 'assets',
+          warn: true,
+        }
+      ]
     },
   ],
   testing: {
     browserHeadless: 'new',
   },
   plugins: [sass(), tailwindGlobal(), tailwind(), tailwindHMR()],
+  rollupPlugins: {
+    after: [
+      copy({
+        targets: [
+          {
+            src: 'src/**/*.{woff2}',
+            dest: 'dist/didroom-components/assets',
+          },
+        ],
+      }),
+    ]
+  }
 };

tailwind.config.ts

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