fix(cxl-ui): fix card height to 280px

conversionxl · Oct 12, 2023 · 4fa04a9 · 4fa04a9
1 parent 18a9e2b
commit 4fa04a9
Show file tree

Hide file tree

Showing 3 changed files with 6 additions and 4 deletions.
diff --git a/packages/cxl-ui/scss/cxl-base-card.scss b/packages/cxl-ui/scss/cxl-base-card.scss
@@ -156,7 +156,7 @@ header {
     }
 
     .name {
-      @include mixins.ellipsis-for-lines(3);
+      @include mixins.ellipsis-for-lines(2);
       font-family: var(--lumo-font-family);
       font-size: var(--lumo-font-size-xl);
       font-style: normal;

diff --git a/packages/cxl-ui/scss/cxl-course-card.scss b/packages/cxl-ui/scss/cxl-course-card.scss
@@ -4,7 +4,7 @@
 @use "~@conversionxl/cxl-ui/scss/mixins";
 
 :host {
-  height: 345px;
+  height: 280px;
 }
 
 :host(:hover) {
@@ -32,7 +32,7 @@ header {
   line-height: var(--lumo-line-height-s);
 
   .content {
-    @include mixins.ellipsis-for-lines(5);
+    @include mixins.ellipsis-for-lines(3);
     min-height: calc(var(--lumo-line-height-s) * 3); // three standard line-heights
 
     ::slotted(p) {

diff --git a/packages/cxl-ui/src/components/cxl-course-card.js b/packages/cxl-ui/src/components/cxl-course-card.js
@@ -27,7 +27,9 @@ export class CXLCourseCardElement extends CXLBaseCardElement {
   }
 
   _renderHeaderName() {
-    return html`<div class="name"><a href=${this.ctaUrl}>${unsafeHTML(this.name)}</a></div>`;
+    return html`<div class="name" title=${this.name}>
+      <a href=${this.ctaUrl}>${unsafeHTML(this.name)}</a>
+    </div>`;
   }
 
   render() {