Fix Firefox popup sizing and simplify the README

[bdtran2002]

Summary

• give the Firefox toolbar popup a stable body/root shell so it stops collapsing before React mounts
• rewrite the README around the user workflow, remove the badge-heavy intro, and move developer-specific notes lower
• refresh the checked-in Firefox review bundle so it matches the popup changes and passes the bundle freshness check

Verification

• bun run format:check
• bun run firefox-addon:check
• bun run dev:test

Summary by CodeRabbit

• Style

  • Enhanced popup interface with refined fixed layout dimensions (400×560px) and dark background styling for improved visual consistency across browsers

• Documentation

  • Reorganized and streamlined README structure with consolidated sections, simplified feature descriptions, refreshed build documentation, and removed outdated content

• Chores

  • Updated compiled build artifacts and asset file references

[coderabbitai]

📝 Walkthrough

Walkthrough

Popup and sidepanel bootstrap and styling were changed: popup body now has explicit fixed dimensions and dark background, #root fills the popup, CSS sizing rules adjusted, several built Firefox addon assets and entrypoint chunks were swapped/added/removed, and README was substantially rewritten and condensed.

Changes

Cohort / File(s)	Summary
Popup entrypoints & HTML entrypoints/popup/index.html, firefox-addon/popup.html, firefox-addon/sidepanel.html	Inline popup body sizing/background added; #root set to fill container; references to hashed build artifacts updated for popup/sidepanel.
Firefox addon chunks (bootstrap) firefox-addon/chunks/popup-*.js, firefox-addon/chunks/sidepanel-*.js, firefox-addon/chunks/popup-DhmLxM_C.js, firefox-addon/chunks/sidepanel-DLmCo2mx.js, firefox-addon/chunks/options-*.js	New popup and sidepanel entrypoint chunks added; other compiled bootstrap chunks removed or filename-hashed; one options chunk import path updated (jsx runtime hash swapped).
Bundled CSS / runtime styles firefox-addon/assets/jsx-runtime-q2TYwYry.css, src/styles.css	Replaced bundled Tailwind CSS output segment; moved popup background to #111010; changed html.popup sizing rules (removed 100dvh usage), separated body width (400px) from #root width (100%), and adjusted height to height:100%; min-height:100%.
Docs README.md	Large rewrite and condensation: sections renamed/removed, usage and autofill descriptions simplified, developer/build instructions trimmed and re-ordered.

Sequence Diagram(s)

(silently omitted)

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

• Firefox self distribution #34 — Direct overlap on popup/sidepanel entrypoints, assets, and styling changes.
• fix: stabilize Firefox flow and improve signup autofill #32 — Overlapping edits to popup/sidepanel UI bootstrap and sizing (#root/popup style changes).
• feat: let Firefox popup open the sidebar #42 — Related modifications to html.popup and CSS layout rules in the add-on assets.

Suggested reviewers

• Lomzem

Poem

🐰 I nibbled at pixels in the night,
I shaped a cozy popup, snug and tight,
Four hundred wide, a shadowed, tidy den,
Root fills the room — hop, render — then again,
A rabbit's tweak, and UI dreams take flight.

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

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.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly describes the two main changes: fixing Firefox popup sizing and simplifying the README, matching the core objectives.
Description check	✅ Passed	The description addresses all key changes with clear summaries and includes verification steps, though it doesn't follow the template's checkbox format.
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.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch fix/firefox-popup-sizing

---

_{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 `@src/styles.css`:
- Around line 87-89: Replace the hardcoded 400px with a shared CSS custom
property: define a --popup-width variable (e.g., on :root or the html.popup
selector) and update the html.popup body rule to use var(--popup-width) instead
of the literal "400px"; also remove or replace the inline width in
entrypoints/popup/index.html to reference the same custom property so both
places derive size from the single --popup-width token (look for the html.popup
body rule and the inline width in the popup's index.html to update).

🪄 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: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: f6ab252d-d00a-4619-a8e0-863538a67788

📥 Commits

Reviewing files that changed from the base of the PR and between afab589 and d0be9f6.

📒 Files selected for processing (2)

• entrypoints/popup/index.html
• src/styles.css

[coderabbitai]

🧹 Nitpick | 🔵 Trivial

Deduplicate popup size constants to prevent drift.

Line 88 repeats 400px that also exists inline in entrypoints/popup/index.html. Centralizing via CSS custom properties will prevent mismatches when dimensions change.

♻️ Proposed refactor

--- a/entrypoints/popup/index.html
+++ b/entrypoints/popup/index.html
@@
-  <body style="margin: 0; width: 400px; height: 560px; overflow: hidden; background: `#111010`">
+  <body style="--popup-width: 400px; --popup-height: 560px; margin: 0; width: var(--popup-width); height: var(--popup-height); overflow: hidden; background: `#111010`">

--- a/src/styles.css
+++ b/src/styles.css
@@
 html.popup body {
-  width: 400px;
+  width: var(--popup-width, 400px);
 }

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	html.popup body {
	width: 400px;
	}
	html.popup body {
	width: var(--popup-width, 400px);
	}

🤖 Prompt for AI Agents

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

In `@src/styles.css` around lines 87 - 89, Replace the hardcoded 400px with a
shared CSS custom property: define a --popup-width variable (e.g., on :root or
the html.popup selector) and update the html.popup body rule to use
var(--popup-width) instead of the literal "400px"; also remove or replace the
inline width in entrypoints/popup/index.html to reference the same custom
property so both places derive size from the single --popup-width token (look
for the html.popup body rule and the inline width in the popup's index.html to
update).

[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 `@README.md`:
- Around line 61-65: Replace the awkward bullet "generated address on or off"
with a parallel noun phrase to match surrounding items; for example change it to
"address generation (on/off)" or "whether to generate an address (on/off)" so
the list items are consistent in form and readability—update the README bullet
that currently reads "generated address on or off" accordingly.

🪄 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: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 8af86e67-4f6e-4d19-8597-b5c65615ab89

📥 Commits

Reviewing files that changed from the base of the PR and between d0be9f6 and 0e0c993.

📒 Files selected for processing (1)

• README.md

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Tighten wording for the autofill options bullet.

“generated address on or off” reads awkwardly compared to the surrounding bullets. Consider a parallel noun phrase for readability.

Suggested wording tweak

-- generated address on or off
+- generated address toggle (on/off)

📝 Committable suggestion

‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.

Suggested change

	- generated address on or off
	- preferred US state
	- age range
	- sex bias for generated profiles
	- whether generated profiles lean male or female when a form asks
	- generated address toggle (on/off)
	- preferred US state
	- age range
	- whether generated profiles lean male or female when a form asks

🤖 Prompt for AI Agents

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

In `@README.md` around lines 61 - 65, Replace the awkward bullet "generated
address on or off" with a parallel noun phrase to match surrounding items; for
example change it to "address generation (on/off)" or "whether to generate an
address (on/off)" so the list items are consistent in form and
readability—update the README bullet that currently reads "generated address on
or off" accordingly.

[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 `@firefox-addon/assets/jsx-runtime-q2TYwYry.css`:
- Line 2: Update stylelint configuration to exclude the generated bundle CSS
(firefox-addon/assets/*.css) from linting: add that glob to stylelint's ignore
list (e.g. using the "ignoreFiles" key in your stylelint config or add the same
pattern to a .stylelintignore file) so only source styles are linted and the
generated minified file no longer produces duplicate/property-format errors.

🪄 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: Organization UI

Review profile: ASSERTIVE

Plan: Pro

Run ID: 29889c10-2657-4a94-a4a2-af05555f4948

📥 Commits

Reviewing files that changed from the base of the PR and between 0e0c993 and de55f5c.

📒 Files selected for processing (11)

• firefox-addon/assets/jsx-runtime-q2TYwYry.css
• firefox-addon/chunks/jsx-runtime-DAFdT4Kg.js
• firefox-addon/chunks/mailbox-app-Dz9rgXNP.js
• firefox-addon/chunks/options-Ce2vWuDc.js
• firefox-addon/chunks/popup-DKMVT83-.js
• firefox-addon/chunks/popup-DhmLxM_C.js
• firefox-addon/chunks/sidepanel-Cc-4neh6.js
• firefox-addon/chunks/sidepanel-DLmCo2mx.js
• firefox-addon/options.html
• firefox-addon/popup.html
• firefox-addon/sidepanel.html

💤 Files with no reviewable changes (2)

• firefox-addon/chunks/popup-DhmLxM_C.js
• firefox-addon/chunks/sidepanel-DLmCo2mx.js

[coderabbitai]

⚠️ Potential issue | 🟡 Minor

Exclude generated bundle CSS from stylelint scope.

This minified generated asset triggers noisy duplicate/property-format lint errors. Lint source styles instead (or ignore firefox-addon/assets/*.css) to avoid false positives in review/CI.

🧰 Tools

🪛 Stylelint (17.7.0)

[error] 2-2: Duplicate property "-webkit-text-decoration" (declaration-block-no-duplicate-properties)

(declaration-block-no-duplicate-properties)

---

[error] 2-2: Duplicate property "-webkit-text-decoration" (declaration-block-no-duplicate-properties)

(declaration-block-no-duplicate-properties)

---

[error] 2-2: Duplicate property "-webkit-text-decoration" (declaration-block-no-duplicate-properties)

(declaration-block-no-duplicate-properties)

---

[error] 2-2: Expected "button" to be "auto" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

---

[error] 2-2: Expected "button" to be "auto" (declaration-property-value-keyword-no-deprecated)

(declaration-property-value-keyword-no-deprecated)

---

[error] 2-2: Expected "to" to be "100%" (keyframe-selector-notation)

(keyframe-selector-notation)

---

[error] 2-2: Expected "to" to be "100%" (keyframe-selector-notation)

(keyframe-selector-notation)

---

[error] 2-2: Expected "SFMono-Regular" to be "sfmono-regular" (value-keyword-case)

(value-keyword-case)

---

[error] 2-2: Expected "Menlo" to be "menlo" (value-keyword-case)

(value-keyword-case)

---

[error] 2-2: Expected "Monaco" to be "monaco" (value-keyword-case)

(value-keyword-case)

---

[error] 2-2: Expected "Consolas" to be "consolas" (value-keyword-case)

(value-keyword-case)

---

[error] 2-2: Expected "currentColor" to be "currentcolor" (value-keyword-case)

(value-keyword-case)

🤖 Prompt for AI Agents

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

In `@firefox-addon/assets/jsx-runtime-q2TYwYry.css` at line 2, Update stylelint
configuration to exclude the generated bundle CSS (firefox-addon/assets/*.css)
from linting: add that glob to stylelint's ignore list (e.g. using the
"ignoreFiles" key in your stylelint config or add the same pattern to a
.stylelintignore file) so only source styles are linted and the generated
minified file no longer produces duplicate/property-format errors.