style: improve design of website

[trueberryless]

Description

This PR changes many Tailwind styles of the website so the whole design looks clean and modern.

Before:

After:

Summary by CodeRabbit

• New Features
  • Enhanced “Limit Results” with a redesigned composite control (numeric input + +/- buttons) that adjusts in larger steps and enforces valid bounds.
• Bug Fixes
  • Result limit is now safely clamped to a valid range (with a fallback when parsing fails).
• UI Improvements
  • Rolled out a darker slate theme (including radial gradient background) and updated dark styling.
  • Restyled the results header/table, loading/progress, copy-as-Markdown button, and empty state.
  • Updated the homepage hero layout/GitHub link placement and improved “.dev” styling.
  • Reworked the devDependencies toggle into a clearer custom checkbox row.
  • Refreshed table container radius and shadow.

[coderabbitai]

Note

Reviews paused

It looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the reviews.auto_review.auto_pause_after_reviewed_commits setting.

Use the following commands to manage reviews:

• @coderabbitai resume to resume automatic reviews.
• @coderabbitai review to trigger a single review.

Use the checkboxes below for quick actions:

• ▶️ Resume reviews
• 🔍 Trigger review

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 5ff23484-c70c-4745-89ec-294e6dae21dd

📥 Commits

Reviewing files that changed from the base of the PR and between 1b9f23d and be1c348.

📒 Files selected for processing (1)

• src/components/App.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• src/components/App.tsx

---

📝 Walkthrough

Walkthrough

The PR applies a dark slate UI refresh across the app shell, landing page, form, and results view. It also changes the Limit Results control into a stepped input and clamps analysis limits to 1..3000.

Changes

Dark theme restyle

Layer / File(s)	Summary
Form panel and limit control restyle src/components/App.tsx	Package panel and input styling are updated, and the Limit Results control becomes a stepped numeric input with +/- buttons while clamping analysis limits to 1..3000.
Dev-dependencies toggle, error and progress UI src/components/App.tsx	The dev-dependencies row, error block, and loading/progress UI are restyled while preserving the existing URL parameter and analysis-trigger behavior.
Results header, table, and empty state restyle src/components/App.tsx	The results header, copy button, table styling, package link styling, and empty-state visuals are updated for the dark theme.
Layout and page shell src/layouts/Layout.astro, src/pages/index.astro, src/styles/global.css	The app shell switches to a dark body/html treatment with a gradient background, the homepage hero is reworked, and the table container shadow/radius are adjusted.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related PRs

• dependents-dev/dependents.dev#14: Both PRs modify src/components/App.tsx analysis-limit handling and results rendering.

🚥 Pre-merge checks | ✅ 3 | ❌ 2

❌ Failed checks (1 warning, 1 inconclusive)

Check name	Status	Explanation	Resolution
Docstring Coverage	⚠️ Warning	Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%.	Write docstrings for the functions missing them to satisfy the coverage threshold.
Title check	❓ Inconclusive	The title matches the broad UI styling changes, but it is too generic to clearly identify the main update.	Rename it to describe the primary change more specifically, such as improving the app’s dark-themed search and results UI.

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
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.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

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

[coderabbitai]

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/components/App.tsx`:
- Around line 246-266: The limit stepper buttons in App should be accessible to
keyboard and screen-reader users. Remove the negative tabIndex from the
increment/decrement buttons so they can be focused, and give each icon-only
button an accessible name via an appropriate label on the button itself. Keep
the existing click handlers in the limit input controls, but ensure the
interactive stepper UI is reachable and announced properly.
- Around line 229-277: The limit value can still be outside the 1-3000 range
when typed directly or restored from the URL, so clamp it before it is consumed.
Update the `startAnalysis()` path in `App.tsx` to normalize `limitInput()` to
the allowed bounds before parsing/slicing, and make sure any other read of the
limit uses the same clamped value rather than the raw input state.

🪄 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: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 45fc3885-eb72-4653-b22c-bfb6e734f9f8

📥 Commits

Reviewing files that changed from the base of the PR and between c46ffd6 and c2ddaec.

⛔ Files ignored due to path filters (1)

• bun.lock is excluded by !**/*.lock

📒 Files selected for processing (4)

• src/components/App.tsx
• src/layouts/Layout.astro
• src/pages/index.astro
• src/styles/global.css

[gameroman]

I'm gonna need to figure out how to make the preview work 😆

[trueberryless]

I'm gonna need to figure out how to make the preview work 😆

Yeah, with Cloudflare it's a little bit more tricky and not automatic. But you can take inspiration from how Astro docs does it maybe.

[gameroman]

Do you know if something like this will work?

#26

[trueberryless]

Do you know if something like this will work?

#26

Looks like it works perfectly 🥳

(I didn't look at the code, but the comment is there...)

If you merge that PR, I can rebase this, so we hopefully get a preview here too 🙌

[gameroman]

Do you know if something like this will work?
#26

Looks like it works perfectly 🥳

(I didn't look at the code, but the comment is there...)

If you merge that PR, I can rebase this, so we hopefully get a preview here too 🙌

That's from the cloudflare github app because I made the pr from this repo. The Deploy Preview action didn't run at all

[trueberryless]

Ah, I see. I guess you need to merge for the deploy workflow to be on main, so it triggers with this config:

on:
  workflow_run:
    workflows: ["Build Preview"]
    types: [completed]

Because the build did run successfully.

[gameroman]

@trueberryless can you try rebasing please? I think it should work now

[github-actions]

Preview deployment

✅ Deployment complete!

• Latest commit: be1c348
• Preview: https://pr-25-dependents-dev.gameroman.workers.dev
• Workflow run: View logs

[gameroman]

This definitely looks better overall

One thing I would change/improve probably is make Downloads and Traffic text more consistent, i.e. same color, font, size

Probably make them not monospace, I think something like text-slate-300 font-medium could work for both

[gameroman]

Thank you! This looks very good