fix(ui): kill style={``}

[Fake-User]

No description provided.

[coderabbitai]

📝 Walkthrough

Summary by CodeRabbit

• Style
  • Optimized internal style implementation patterns across UI components for improved code consistency.

Walkthrough

Four components across multiple packages updated to use object-based style syntax instead of template-string style attributes. Changes maintain visual behavior and functionality while aligning style prop construction with SolidJS/JSX conventions.

Changes

Cohort / File(s)	Summary
Block Markdown Components js/app/packages/block-md/component/TableInsert.tsx	Tooltip positioning style refactored from template string to structured object with separate left and top properties derived from cursorPos().
Core Components js/app/packages/core/component/Slider.tsx, js/app/packages/core/internal/PixelArtIconDemo.tsx	Slider fill element width and GlyphEditor preview canvas styles converted to object-based syntax for SolidJS/JSX compatibility.
UI Components js/app/packages/ui/components/BrightJoins.tsx	BrightJoinsProgressMeter CSS custom property --onboarding-progress updated to object syntax while maintaining computed percent value.

🚥 Pre-merge checks | ✅ 3 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Description check	❓ Inconclusive	No description was provided, making it impossible to assess relevance to the changeset.	Add a pull request description explaining the motivation for converting template-string styles to object-based syntax and any benefits of this refactoring.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title follows conventional commits format with 'fix' prefix and is under 72 characters (24 chars), clearly describing the main change of eliminating template-string style syntax.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[github-actions]

Preview: https://russell-style-reactive-l8fq5f.preview.macro.com/app (2f9d1e8)

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@js/app/packages/block-md/component/TableInsert.tsx`:
- Around line 90-93: In TableInsert.tsx the inline style object uses cursorPos()
to set left and top but the top value wrongly includes a trailing semicolon
(`top: `${cursorPos().y + 10}px;``) which makes the CSS invalid; update the
style assignment in the component (the object passed to style where cursorPos()
is used) to remove the trailing semicolon so top is set to `${cursorPos().y +
10}px` (leave the left assignment as-is).

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro

Run ID: f50b3a7d-5921-4007-8bed-03f9a9d73abe

📥 Commits

Reviewing files that changed from the base of the PR and between 04e4589 and e94d12e.

📒 Files selected for processing (4)

• js/app/packages/block-md/component/TableInsert.tsx
• js/app/packages/core/component/Slider.tsx
• js/app/packages/core/internal/PixelArtIconDemo.tsx
• js/app/packages/ui/components/BrightJoins.tsx

[coderabbitai]

⚠️ Potential issue | 🔴 Critical

Stray ; in the top value will break tooltip positioning.

With the object-style form, each value is assigned directly to the CSSOM (element.style.top = "…px;"). The trailing ; makes the value an invalid CSS declaration and it will be silently ignored, so top won't apply and the tooltip will sit at the default vertical position instead of tracking the cursor. The ; was harmless in the prior template-string form but must be removed here.

🐛 Proposed fix

               style={{
                 left: `${cursorPos().x + 10}px`,
-                top: `${cursorPos().y + 10}px;`,
+                top: `${cursorPos().y + 10}px`,
               }}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.

In `@js/app/packages/block-md/component/TableInsert.tsx` around lines 90 - 93, In
TableInsert.tsx the inline style object uses cursorPos() to set left and top but
the top value wrongly includes a trailing semicolon (`top: `${cursorPos().y +
10}px;``) which makes the CSS invalid; update the style assignment in the
component (the object passed to style where cursorPos() is used) to remove the
trailing semicolon so top is set to `${cursorPos().y + 10}px` (leave the left
assignment as-is).