fix: app cards only two lines tall (#1505)

They should be three liens tall. Use variables to make cross-file code less magic.
DesignSafe-CI · Dec 18, 2024 · 3b59186 · 3b59186
1 parent e76d129
commit 3b59186
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 4 deletions.
diff --git a/designsafe/static/styles/app-card.css b/designsafe/static/styles/app-card.css
@@ -24,10 +24,11 @@
     padding-inline: 1.5rem;
     margin-block: 1.5rem;
 }
-/* To set height to twice line-height */
-/* SEE: ./app-page.css#L34-L36 (circa v7.1.4) */
+/* To set explicit height equal to N lines of text */
 .s-app-page p.c-app-card__desc {
-    height: 3.6em;
+    --lines: 3; /* to override Core-Styles c-app-card truncate */
+
+    height: calv(var(--lines) * var(--line-height));
 }
 
 /* Types */

diff --git a/designsafe/static/styles/app-page.css b/designsafe/static/styles/app-page.css
@@ -32,7 +32,9 @@
 }
 
 .s-app-page p {
-    line-height: 1.8;
+    --line-height: 1.8; /* variable so app-card.css can use */
+
+    line-height: var(--line-height);
 }
 
 /* Add more space between Bootstrap columns */