fix: replace absolute values in tailwind classes with relative ones

[dastarruer]

Closes #33

Summary by CodeRabbit

• Style
  • Refined padding and spacing in data-layer panels for improved layout consistency
  • Updated scrollbar sizing and thumb appearance for clearer, slimmer scrollbars
  • Standardized sizing and spacing of layer controls for more consistent interaction
  • Harmonized color token usage across data-layer components for visual consistency

[coderabbitai]

📝 Walkthrough

Walkthrough

Three Svelte UI components in app/src/lib/components/data-layers had Tailwind class values normalized: arbitrary pixel-based utilities were replaced with standard Tailwind utility classes and CSS variable reference syntax was adjusted. No public API or exported declarations were changed.

Changes

Cohort / File(s)	Summary
Data-layers styling updates app/src/lib/components/data-layers/LayerScrollArea.svelte, app/src/lib/components/data-layers/LayerSwitch.svelte, app/src/lib/components/data-layers/Separator.svelte	Replaced arbitrary Tailwind bracketed values (e.g., p-[15px], h-[25px], w-[3px], h-[1px]) with standard utilities (p-4, h-6, w-1, h-px, mx-4, etc.). Adjusted scrollbar, switch, and separator classes and changed CSS variable class syntax from bg-[var(--...)] to bg-(--...). No API/export changes.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

Possibly related PRs

• feature: add data layer sidebar #1: Edits the same data-layers components (LayerScrollArea.svelte, LayerSwitch.svelte, Separator.svelte) to update Tailwind classes and styling, directly related to these changes.

Poem

🐰
Hopped into classes, trimmed the fluff,
Brackets gone — the styles are tough.
Utilities snug, variables clear,
I nibbled warnings, far from here.
Code looks tidy — wiggle-wiggle cheer! 🥕

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Out of Scope Changes check	⚠️ Warning	The PR introduces changes to CSS variable syntax (bg-[var(--bg-alt)] to bg-(--bg-alt)) that are not aligned with removing absolute values and may not be valid Tailwind classes.	Remove the CSS variable syntax changes (bg-(--bg-alt) format) as they appear out-of-scope; focus only on replacing absolute pixel values with relative Tailwind scales.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The PR title clearly summarizes the main change: replacing absolute pixel values in Tailwind classes with relative ones, which aligns with the actual modifications across three component files.
Linked Issues check	✅ Passed	The code changes successfully address issue #33 by removing absolute Tailwind class values (h-[1px], h-[25px], w-[55px], etc.) from all three files in the data-layers directory.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

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

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/remove-absolute-tailwind-classes

---

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.}

[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 `@app/src/lib/components/data-layers/Separator.svelte`:
- Line 7: Replace the invalid custom width calc in the class on
Separator.svelte: remove w-[calc(100%-30px)] and use Tailwind spacing instead
(for example replace with w-full mx-[15px] or another appropriate Tailwind
margin like mx-4/mx-8) so the separator takes full width with side margins
rather than a broken calc; update the class string that currently contains
w-[calc(100%-30px)] (and keep the existing h-px and opacity classes) to use
w-full plus the chosen mx-* utility.

🪄 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: b4b9c956-1d73-43ae-8d67-20c02bf1e613

📥 Commits

Reviewing files that changed from the base of the PR and between 8374585 and 36b45ab.

📒 Files selected for processing (3)

• app/src/lib/components/data-layers/LayerScrollArea.svelte
• app/src/lib/components/data-layers/LayerSwitch.svelte
• app/src/lib/components/data-layers/Separator.svelte

[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 `@app/src/lib/components/data-layers/Separator.svelte`:
- Line 5: Tailwind arbitrary value syntax is invalid: replace occurrences like
bg-(--text) with the correct Tailwind form bg-[var(--text)]; update the
Separator.Root class string (Separator.Root decorative={true} ... bg-(--text) →
bg-[var(--text)]) and make the same replacement for other components that use
CSS vars (e.g., LayerSwitch and LayerScrollArea) such as bg-(--bg-alt) →
bg-[var(--bg-alt)] and bg-(--primary) → bg-[var(--primary)] so Tailwind
generates the expected utilities.

🪄 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: 8480576d-1017-4a63-a468-384dd1e6383b

📥 Commits

Reviewing files that changed from the base of the PR and between 36b45ab and 22dca1b.

📒 Files selected for processing (1)

• app/src/lib/components/data-layers/Separator.svelte