Fixed Typos and Syntax Errors in Cards UI

[agsaru]

PR Type

• Bug fix
• New feature
• Core Runtime change (higher bar -- see CONTRIBUTING.md)
• Docs / tooling
• Refactoring

Summary

This PR fixes multiple typos and syntax errors across the Metaflow Cards UI codebase.

1. card-example.json

• Fixed a JSON syntax error: changed {[{ to [{
• Corrected a typo "acyclical" → "acyclic"
• Fixed a typo in an error message: "Hellow There" → "Hello There"

---

2. app.css

• Removed duplicate "Roboto" font from the font-family property

---

3. main.svelte

• Added a missing semicolon:
  min-width: 80% → min-width: 80%;

---

4. text.svelte

• Fixed a HTML comment:
  needed.App → needed.

---

5. constants.ts

• Corrected an invalid hex color code:
  #13172d0 → #13172d

---

6. utils.ts (1 fix)

• Fixed a variable reference issue:
  replaced document.documentElement with doc.documentElement to correctly use the passed parameter instead of the global object

[greptile-apps]

Greptile Summary

This PR fixes a collection of typos, syntax errors, and a logic bug across the Metaflow Cards UI: an invalid 7-digit hex color (#13172d0), a duplicate "Roboto" font entry, a missing CSS semicolon, an HTML comment artifact, JSON syntax/typo errors in the demo file, and a variable shadowing bug in convertPixelsToRem where the global document was used instead of the passed doc parameter.

Confidence Score: 5/5

This PR is safe to merge — all changes are targeted, well-scoped fixes with no functional regressions.

All changes are straightforward corrections to typos, syntax errors, and one clear variable-reference bug. The source changes are reflected in the regenerated bundle artifacts. No new logic is introduced.

No files require special attention.

Important Files Changed

Filename	Overview
metaflow/plugins/cards/ui/src/utils.ts	Correctly fixes variable reference: document.documentElement → doc.documentElement in convertPixelsToRem, ensuring the passed doc parameter is used instead of the global object.
metaflow/plugins/cards/ui/src/constants.ts	Corrects invalid 7-character hex #13172d0 → #13172d for the dkSecondary color constant.
metaflow/plugins/cards/ui/src/app.css	Removes duplicate "Roboto" entry from the font-family declaration.
metaflow/plugins/cards/ui/src/components/main.svelte	Adds missing semicolon after min-width: 80% in the embedded CSS style block.
metaflow/plugins/cards/ui/src/components/text.svelte	Cleans up an erroneous needed.App in an HTML comment to needed.
metaflow/plugins/cards/ui/demo/card-example.json	Fixes JSON syntax error ({[{ → [{), typo acyclical → acyclic, and error message string Hellow There → Hello There.
metaflow/plugins/cards/card_modules/bundle.css	Auto-generated bundle artifact rebuilt to reflect source changes in app.css.
metaflow/plugins/cards/card_modules/main.js	Auto-generated bundle artifact rebuilt to reflect source changes from TypeScript and Svelte source files.

_{Reviews (4): Last reviewed commit: "build: rebuild card UI components" | Re-trigger Greptile}

[Copilot]

Pull request overview

This PR addresses small correctness and polish issues across the Metaflow Cards UI demo and components, primarily fixing typos and minor syntax errors.

Changes:

• Fixes a convertPixelsToRem document reference bug by using the passed doc parameter.
• Corrects invalid CSS/TS constants and minor Svelte/HTML syntax issues.
• Updates demo card JSON copy/typos (including a DAG subtitle and an embedded stacktrace message).

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
metaflow/plugins/cards/ui/src/utils.ts	Uses the provided doc instead of the global document when reading the root font size.
metaflow/plugins/cards/ui/src/constants.ts	Fixes an invalid hex color for dkSecondary.
metaflow/plugins/cards/ui/src/components/text.svelte	Fixes a malformed HTML comment in the component header.
metaflow/plugins/cards/ui/src/components/main.svelte	Fixes missing CSS semicolon for min-width.
metaflow/plugins/cards/ui/src/app.css	Removes duplicated "Roboto" entry from the font-family list.
metaflow/plugins/cards/ui/demo/card-example.json	Fixes typos in demo text/stacktrace content and adjusts a JSON-in-string example.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
⚠️ Please upload report for BASE (master@b5fc5e7). Learn more about missing BASE report.

Additional details and impacted files

@@            Coverage Diff            @@
##             master    #3169   +/-   ##
=========================================
  Coverage          ?   27.33%           
=========================================
  Files             ?      376           
  Lines             ?    51827           
  Branches          ?     9166           
=========================================
  Hits              ?    14168           
  Misses            ?    36753           
  Partials          ?      906           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[talsperre]

Thanks @agsaru ! Can you rebuild the card components as well as part of this PR? I believe its an npm build or something like that - otherwise the changes wont get picked up correctly.

[agsaru]

@talsperre done.