fix browser_rendering layout (#208)

packages/core/src/cards/gist.js

@@ -83,9 +83,9 @@ const renderGistCard = (gistData, options = {}) => {
     descriptionSvg = wrappedTextNode({
       text: desc,
       x: X_OFFSET,
-      y: 0,
+      y: -3,
       width: DESCRIPTION_BOX_WIDTH,
-      height: descriptionLines * DESCRIPTION_LINE_HEIGHT_PX,
+      height: descriptionLines * DESCRIPTION_LINE_HEIGHT_PX + 10, // 10px extra for "descenders" like g, j, q, p, y
       lineCount: descriptionLines,
       className: "description",
       testId: "description-text",
@@ -168,7 +168,7 @@ const renderGistCard = (gistData, options = {}) => {
   card.setCSS(`
     .description {
       font: 400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif;fill: ${textColor};
-      ${browser_rendering ? wrappedTextStyles : ""}
+      ${browser_rendering ? wrappedTextStyles(textColor) : ""}
     }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${textColor} }
     .icon { fill: ${iconColor} }

packages/core/src/cards/repo.js

@@ -202,9 +202,9 @@ const renderRepoCard = (repo, options = {}) => {
     descriptionSvg = wrappedTextNode({
       text: desc,
       x: X_OFFSET,
-      y: 0,
+      y: -3,
       width: descriptionBoxWidth,
-      height: descriptionLinesCount * DESCRIPTION_LINE_HEIGHT_PX,
+      height: descriptionLinesCount * DESCRIPTION_LINE_HEIGHT_PX + 10, // 10px extra for "descenders" like g, j, q, p, y
       lineCount: descriptionLinesCount,
       className: "description",
       testId: "description-text",
@@ -315,7 +315,7 @@ const renderRepoCard = (repo, options = {}) => {
   card.setCSS(`
     .description {
       font: 400 ${DESCRIPTION_FONT_SIZE}px 'Segoe UI', Ubuntu, Sans-Serif;fill: ${colors.textColor};
-      ${browser_rendering ? wrappedTextStyles : ""}
+      ${browser_rendering ? wrappedTextStyles(colors.textColor) : ""}
     }
     .gray { font: 400 12px 'Segoe UI', Ubuntu, Sans-Serif; fill: ${colors.textColor} }
     .badge { font: 600 11px 'Segoe UI', Ubuntu, Sans-Serif; }

packages/core/src/common/render.js

@@ -127,8 +127,12 @@ const wrappedTextNode = ({
  * to a CSS class (e.g. `.description`) shared with `wrappedTextNode` so the
  * browser handles wrapping and the line count is taken from the `--lines`
  * custom property set on the element.
+ *
+ * @param {string} color Text color (CSS `color` property).
+ * @returns {string} CSS rules block (without the surrounding selector).
  */
-const wrappedTextStyles = `
+const wrappedTextStyles = (color) => `
+    color: ${color};
     margin: 0;
     line-height: 1.2;
     overflow-wrap: anywhere;
@@ -139,6 +143,7 @@ const wrappedTextStyles = `
     line-clamp: var(--lines);
     overflow: hidden;
     text-overflow: ellipsis;
+    padding-bottom: 0.15em;
 `;
 
 /**