fix(ui): polish compare page button styles, text color, and table overflow

[nabrahma]

Description

Several visual issues on the comparison page: joined toggle buttons looked inconsistent, the hint text was unreadable in dark mode, and long nutrient labels overflowed the sticky left column.

What changed

In src/routes/compare/+page.svelte:

• Replaced the join button group with individual buttons using btn-outline for the active mode and btn-ghost for inactive modes.
• Updated the empty state description text from text-gray-600 to text-base-content/70 for dark mode readability.

In src/lib/ui/ComparisonDisplay.svelte:

• Widened the sticky left column (w-40 → w-56) and added whitespace-normal leading-tight text-balance to gracefully wrap long nutrient labels.
• Replaced hardcoded text-gray-600 with theme-aware text-base-content/70 for the comparison hint text at the bottom.

Screenshot

---

Checklist:

Author Self-Review:

• I have performed a self-review of my own code.
• I understand the changes I're proposing and why they are needed.
• My changes generate no new warnings or errors (linting, console).
• I have made corresponding changes to the documentation (if applicable).

LLM Usage Disclosure:

• If I did use an AI Large Language Model, I have reviewed the generated code/text to ensure its accuracy, security, and relevance to the project's context and licensing.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
explorer	Ready	Preview, Comment	Feb 26, 2026 11:38pm

[VaiTon]

What if we wrap instead of more width?

[nabrahma]

I was a bit worried about visual consistency since the other labels sit in one line and only the last long one would wrap.

But yeah wrapping does scale better than bumping the width.

So should I revert the width and warp it instead ?

[VaiTon]

Yup! :) Thank you

[nabrahma]

Ok

[nabrahma]

@VaiTon Implemented the wrap