diff --git a/src/molecules/gv-row/gv-row.js b/src/molecules/gv-row/gv-row.js index 205b5e05..61b6abc2 100644 --- a/src/molecules/gv-row/gv-row.js +++ b/src/molecules/gv-row/gv-row.js @@ -99,6 +99,11 @@ export class GvRow extends withResizeObserver(ItemResource(LitElement)) { text-after-overflow: '...'; } + .row .description * { + display: contents; + font-size: var(--gv-theme-font-size-m, 14px); + } + .row .meta { display: flex; flex-direction: column; @@ -193,7 +198,7 @@ export class GvRow extends withResizeObserver(ItemResource(LitElement)) { <h3 class="name">${getTitle(this._item)}</h3> <div class="version">${getVersion(this._item)}</div> </div> - <div class="description">${getDescription(this._item)}</div> + <div class="description" .innerHTML="${getDescription(this._item)}"></div> </div> <div class="${classMap({ meta: true, skeleton: this._skeleton })}"> <div class="meta__owner"> diff --git a/src/molecules/gv-row/gv-row.stories.js b/src/molecules/gv-row/gv-row.stories.js index 70aa059a..da9caf1c 100644 --- a/src/molecules/gv-row/gv-row.stories.js +++ b/src/molecules/gv-row/gv-row.stories.js @@ -25,9 +25,16 @@ const states = [ { value: 'running', major: true }, ]; const owner = { display_name: 'Garry Marshall' }; -const description = - 'Tempore quo primis auspiciis in mundanum fulgorem surgeret victura dum erunt homines Roma, ' + - 'ut augeretur sublimibus incrementis, foedere pacis aeternae Virtus convenit atque plerumque dissidentes,'; +const description = ` +<h2>Sed ut perspiciatis unde omnis iste natus error sit voluptatem +accusantium doloremque laudantium, <a href="">totam rem aperiam</a>, +eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae +vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit +aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui +ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem +ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam +eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem.</h2> +`; const labels = ['brta', 'custom', 'web']; const api = { name: 'Long Supernova',