CCSD-602 toast success CSS issue #3038
Conversation
📝 WalkthroughWalkthroughUpdates CSS to target a specific toast success header, adds a corresponding changelog entry for v1.8.41, and bumps the public HTML to reference digit-ui-css 1.8.41. No JavaScript or API changes. Changes
Estimated code review effort🎯 2 (Simple) | ⏱️ ~10 minutes Poem
Tip 🔌 Remote MCP (Model Context Protocol) integration is now available!Pro plan users can now connect to remote MCP servers from the Integrations page. Connect with popular remote MCPs such as Notion and Linear to add more context to your reviews and chats. ✨ Finishing Touches🧪 Generate 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. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
SupportNeed help? Create a ticket on our support page for assistance with any issues or questions. CodeRabbit Commands (Invoked using PR/Issue comments)Type Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 5
📜 Review details
Configuration used: CodeRabbit UI
Review profile: ASSERTIVE
Plan: Pro
💡 Knowledge Base configuration:
- MCP integration is disabled by default for public repositories
- Jira integration is disabled by default for public repositories
- Linear integration is disabled by default for public repositories
You can enable these sources in your CodeRabbit configuration.
⛔ Files ignored due to path filters (1)
micro-ui/web/micro-ui-internals/packages/css/package.jsonis excluded by!**/*.json
📒 Files selected for processing (3)
micro-ui/web/micro-ui-internals/packages/css/CHANGELOG.md(1 hunks)micro-ui/web/micro-ui-internals/packages/css/src/index.scss(1 hunks)micro-ui/web/public/index.html(1 hunks)
🧰 Additional context used
🪛 LanguageTool
micro-ui/web/micro-ui-internals/packages/css/CHANGELOG.md
[grammar] ~2-~2: Use correct spacing
Context: # Changelog ## [1.8.41] - [26-Aug-2025] - toast success h2 CSS issue fixed ## [...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
[grammar] ~4-~4: There might be a mistake here.
Context: ...25] - toast success h2 CSS issue fixed ## [1.8.40] - [25-Aug-2025] - Toast error ...
(QB_NEW_EN_OTHER)
🪛 markdownlint-cli2 (0.17.2)
micro-ui/web/micro-ui-internals/packages/css/CHANGELOG.md
2-2: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Above
(MD022, blanks-around-headings)
🔇 Additional comments (2)
micro-ui/web/public/index.html (1)
10-11: Compatibility check between digit-ui-css and components-css.digit-ui-css is 1.8.41 while digit-ui-components-css is pinned at 0.2.0. If components depend on tokens or variables from the core CSS, verify no regressions.
Suggestion: Smoke-check toasts, action bars, and typography in both employee and citizen shells after the bump.
micro-ui/web/micro-ui-internals/packages/css/src/index.scss (1)
877-879: Confirm selector correctness against actual DOM.This targets “.employeeCard .label-field-pair .toast-success h2”. Ensure the success toast header is indeed an h2 under .toast-success and rendered within .employeeCard and .label-field-pair; otherwise, the rule won’t apply.
If necessary, relax the selector slightly to reduce brittleness:
- .employeeCard .label-field-pair .toast-success h2 { + .employeeCard .toast-success h2 { width: auto; - } + }
| @@ -1,5 +1,8 @@ | |||
| # Changelog | |||
| ## [1.8.41] - [26-Aug-2025] | |||
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Fix MD022: add a blank line before the 1.8.41 heading.
markdownlint flags “Headings should be surrounded by blank lines” because Line 2 follows the H1 without a blank line.
Apply this diff:
# Changelog
+
## [1.8.41] - [26-Aug-2025]📝 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.
| ## [1.8.41] - [26-Aug-2025] | |
| # Changelog | |
| ## [1.8.41] - [26-Aug-2025] |
🧰 Tools
🪛 LanguageTool
[grammar] ~2-~2: Use correct spacing
Context: # Changelog ## [1.8.41] - [26-Aug-2025] - toast success h2 CSS issue fixed ## [...
(QB_NEW_EN_OTHER_ERROR_IDS_5)
🪛 markdownlint-cli2 (0.17.2)
2-2: Headings should be surrounded by blank lines
Expected: 1; Actual: 0; Above
(MD022, blanks-around-headings)
🤖 Prompt for AI Agents
In micro-ui/web/micro-ui-internals/packages/css/CHANGELOG.md around line 2, the
H2 heading "## [1.8.41] - [26-Aug-2025]" is not preceded by a blank line which
triggers markdownlint MD022; insert a single blank line between the preceding H1
(or content on line 1) and this H2 so the heading is surrounded by blank lines,
save the file and ensure no other adjacent headings violate the same rule.
| - toast success h2 CSS issue fixed | ||
|
|
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Tighten wording, spacing, and traceability in the 1.8.41 entry.
- Remove the double space after the dash.
- Use concise, actionable phrasing.
- Reference the ticket for traceability and mention scope (employee toast header).
Apply this diff:
-- toast success h2 CSS issue fixed
-
+- CCSD-602: Fix toast-success `h2` width in employee header.
+📝 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.
| - toast success h2 CSS issue fixed | |
| - CCSD-602: Fix toast-success `h2` width in employee header. | |
🧰 Tools
🪛 LanguageTool
[grammar] ~4-~4: There might be a mistake here.
Context: ...25] - toast success h2 CSS issue fixed ## [1.8.40] - [25-Aug-2025] - Toast error ...
(QB_NEW_EN_OTHER)
🤖 Prompt for AI Agents
In micro-ui/web/micro-ui-internals/packages/css/CHANGELOG.md around lines 4–5,
the "1.8.41" entry is poorly worded and has extra spacing; replace the current
line with a single, concise entry that removes the double space after the dash,
uses actionable phrasing, and adds the ticket reference and scope — e.g., "Fix
toast success header CSS for employee toast (PROJ-1234)"; ensure spacing and
punctuation match surrounding changelog style.
| .employeeCard .label-field-pair .toast-success h2 { | ||
| width: auto !important; | ||
| } |
There was a problem hiding this comment.
🧹 Nitpick (assertive)
Avoid !important and colocate the rule with the toast component styles.
The override is appended globally and uses a deep descendant with !important. Prefer scoping within the toast stylesheet to raise specificity naturally and reduce global coupling.
Apply this minimal diff now (drop !important, keep current scope), then consider moving to components/toast.scss in a follow-up:
- .employeeCard .label-field-pair .toast-success h2 {
- width: auto !important;
- }
+ .employeeCard .label-field-pair .toast-success h2 {
+ width: auto;
+ }Option (follow-up, outside this hunk) in components/toast.scss:
/* Scoped to the component; later in the file to win specificity without !important */
.toast-success {
h2 { width: auto; }
}Please verify that removing !important still fixes CCSD-602 in the target screens.
🤖 Prompt for AI Agents
In micro-ui/web/micro-ui-internals/packages/css/src/index.scss around lines 877
to 879, the rule uses a global deep selector with !important; remove the
"!important" from .employeeCard .label-field-pair .toast-success h2 (so the
declaration is width: auto;) as a minimal immediate fix, keep the same
selector/scope for now, then in a follow-up move this rule into
components/toast.scss scoped under .toast-success { h2 { width: auto; } } so
specificity is handled without !important; after making the change, verify that
removing !important still resolves CCSD-602 on the target screens.
| href="https://fonts.googleapis.com/css2?family=Roboto+Condensed:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap" | ||
| rel="stylesheet" type="text/css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].40/dist/index.css" /> | ||
| <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected].41/dist/index.css" /> |
There was a problem hiding this comment.
💡 Verification agent
🧩 Analysis chain
Version bump looks correct; verify asset availability and cache.
Ensure 1.8.41 is published and accessible on unpkg and that no CDN cache issues persist in lower environments.
Run:
🏁 Script executed:
#!/bin/bash
# Verify the CSS asset is published and reachable
set -euo pipefail
URL="https://unpkg.com/@egovernments/[email protected]/dist/index.css"
curl -sI "$URL" | sed -n '1p;/^content-length:/Ip;/^etag:/Ip;/^last-modified:/Ip'
# Optionally compute SRI to pin integrity
HASH=$(curl -s "$URL" | openssl dgst -sha384 -binary | openssl base64 -A)
echo "sha384-$HASH"Length of output: 584
CSS Asset Unavailable on unpkg; package version 1.8.41 not published
The URL https://unpkg.com/@egovernments/[email protected]/dist/index.css returns HTTP 404, indicating that version 1.8.41 isn’t yet available on unpkg. Before merging:
- Publish the
@egovernments/[email protected]package to npm (and ensure it propagates to unpkg). - After publishing, re-verify that the CSS file is reachable (HTTP 200).
- Compute and add an SRI integrity hash to the
<link>tag to guard against unintended modifications (e.g.,integrity="sha384-..."andcrossorigin="anonymous").
Affected location:
micro-ui/web/public/index.html:10
Once the asset is published and the link succeeds, update this PR with the integrity attributes.
🤖 Prompt for AI Agents
In micro-ui/web/public/index.html around line 10, the stylesheet URL points to
@egovernments/[email protected] on unpkg which currently 404s; publish the
package version 1.8.41 to npm (ensure it propagates to unpkg), then verify the
asset URL returns HTTP 200, compute a Subresource Integrity (SRI) hash (e.g.
sha384-...), and update the <link> tag to include integrity="sha384-..." and
crossorigin="anonymous"; after verifying the live URL and integrity, update this
PR with the modified link tag.
🧹 Nitpick (assertive)
Consider adding Subresource Integrity (SRI) to harden third-party CSS loading.
Pinning the integrity hash prevents tampering and accidental mismatches if the CDN serves unexpected bytes.
After computing the SRI (see previous comment), update the tag:
- <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" />
+ <link
+ rel="stylesheet"
+ href="https://unpkg.com/@egovernments/[email protected]/dist/index.css"
+ integrity="sha384-REPLACE_WITH_COMPUTED_HASH"
+ crossorigin="anonymous"
+ />📝 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.
| <link rel="stylesheet" href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" /> | |
| <link | |
| rel="stylesheet" | |
| href="https://unpkg.com/@egovernments/[email protected]/dist/index.css" | |
| integrity="sha384-REPLACE_WITH_COMPUTED_HASH" | |
| crossorigin="anonymous" | |
| /> |
🤖 Prompt for AI Agents
In micro-ui/web/public/index.html around line 10, the external CSS link lacks a
Subresource Integrity (SRI) attribute which leaves the page vulnerable to
tampered CDN content; compute the SRI SHA384 (or SHA512) hash of the exact file
bytes served at that URL, then add an integrity="shaXXX-BASE64HASH" attribute to
the <link> tag and include crossorigin="anonymous" so the browser can verify the
resource; update the tag accordingly and verify the hash by reloading the page
to ensure the stylesheet still loads successfully.
2 participants
Choose the appropriate template for your PR:
Feature/Bugfix Request
JIRA ID
Module
Description
Summary by CodeRabbit
Bug Fixes
Documentation
Chores