fix(alert): icon shrinks

[Kenzo-Wada]

fixes: #83

Hi @ariflogs, thanks for the awesome library!
hope you'd check this bug report!

before

after

Summary by CodeRabbit

• Bug Fixes

  • Updated the default Alert styling to prevent embedded SVG icons from shrinking, ensuring consistent icon size and alignment across alerts. Improves readability and visual stability without affecting functionality or public APIs.

• Style

  • Polished the default Alert appearance for more consistent icon presentation alongside text, enhancing overall layout clarity.

[coderabbitai]

Walkthrough

The Alert component’s default variant styling was updated to add a non-shrinking rule for nested SVGs by appending the class selector "[&_svg]:shrink-0" to existing classes.

Changes

Cohort / File(s)	Summary
Alert styling components/retroui/Alert.tsx	Added "[&_svg]:shrink-0" to default variant classes to prevent SVG icons from shrinking.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~3 minutes

Poem

I twitched my nose at a tiny icon plight,
The alert’s SVG was squeezed too tight—
A single class, shrink-0 in sight,
Now stands its ground, upright and bright.
Hop-hop hooray, the UI’s just right! 🐇✨

Pre-merge checks and finishing touches

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title Check	✅ Passed	The title "fix(alert): icon shrinks" succinctly and accurately summarizes the primary change: fixing the Alert icon shrinking. It follows conventional commit style, is concise, and directly relates to the modification in components/retroui/Alert.tsx that prevents SVG shrinking. No extraneous details are present.
Linked Issues Check	✅ Passed	Linked issue #83 reports the Alert icon appearing shrunken and the PR updates the Alert component's default variant to include "[&_svg]:shrink-0", which directly addresses that CSS-based regression; screenshots referenced in the PR support the visual fix and no public APIs were changed. The change is minimal and focused on restoring icon sizing as requested in the issue.
Out of Scope Changes Check	✅ Passed	The diff in the provided summary shows a single change in components/retroui/Alert.tsx adding an SVG non-shrink utility to the default variant and no other files, API surfaces, or unrelated features were modified, so there are no detectable out-of-scope changes. The change appears scoped and appropriate for the linked issue.
Docstring Coverage	✅ Passed	No functions found in the changes. Docstring coverage check skipped.

✨ Finishing touches

• 📝 Generate Docstrings

🧪 Generate unit tests

• Create PR with unit tests
• Post copyable unit tests in a comment

Tip

👮 Agentic pre-merge checks are now available in preview!

Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.

• Built-in checks – Quickly apply ready-made checks to enforce title conventions, require pull request descriptions that follow templates, validate linked issues for compliance, and more.
• Custom agentic checks – Define your own rules using CodeRabbit’s advanced agentic capabilities to enforce organization-specific policies and workflows. For example, you can instruct CodeRabbit’s agent to verify that API documentation is updated whenever API schema files are modified in a PR. Note: Upto 5 custom checks are currently allowed during the preview period. Pricing for this feature will be announced in a few weeks.

Please see the documentation for more information.

Example:

reviews:
  pre_merge_checks:
    custom_checks:
      - name: "Undocumented Breaking Changes"
        mode: "warning"
        instructions: |
          Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).

Please share your feedback with us on this Discord post.

---

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

[vercel]

@Kenzo-Wada is attempting to deploy a commit to the Retro UI Team on Vercel.

A member of the Team first needs to authorize it.

[coderabbitai]

Actionable comments posted: 0

Caution

Some comments are outside the diff and can’t be posted inline due to platform limitations.

⚠️ Outside diff range comments (1)

components/retroui/Alert.tsx (1)

44-47: Type mismatch: interface declares paragraph props but component renders a div.

IAlertDescriptionProps extends props for HTMLParagraphElement but AlertDescription renders a <div>. This can cause incorrect typing and missed attributes.

Apply this diff:

-interface IAlertDescriptionProps
-  extends HtmlHTMLAttributes<HTMLParagraphElement> {}
+interface IAlertDescriptionProps extends HTMLAttributes<HTMLDivElement> {}
 const AlertDescription = ({ className, ...props }: IAlertDescriptionProps) => (
   <div className={cn("text-muted-foreground", className)} {...props} />
 );

🧹 Nitpick comments (1)

components/retroui/Alert.tsx (1)

1-1: Use the generic React HTMLAttributes instead of HtmlHTMLAttributes.

HtmlHTMLAttributes is specific to the root <html> element. For div/h5, use HTMLAttributes<T>.

Apply this diff:

-import { HtmlHTMLAttributes } from "react";
+import type { HTMLAttributes } from "react";
@@
-interface IAlertProps
-  extends HtmlHTMLAttributes<HTMLDivElement>,
+interface IAlertProps
+  extends HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof alertVariants> {}
@@
-interface IAlertTitleProps extends HtmlHTMLAttributes<HTMLHeadingElement> {}
+interface IAlertTitleProps extends HTMLAttributes<HTMLHeadingElement> {}

Also applies to: 25-27, 38-39

📜 Review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 225b53c and 7e2677d.

📒 Files selected for processing (1)

• components/retroui/Alert.tsx (1 hunks)

🔇 Additional comments (1)

components/retroui/Alert.tsx (1)

10-10: Move icon shrink rule to the base cva so it applies to all variants

Icons still shrink in variant="solid"; move [&_svg]:shrink-0 into the base cva string (or duplicate it on solid).

Apply this diff:

-const alertVariants = cva("relative w-full rounded border-2 p-4", {
+const alertVariants = cva("relative w-full rounded border-2 p-4 [&_svg]:shrink-0", {
  variants: {
    variant: {
-      default: "bg-background text-foreground [&_svg]:shrink-0",
+      default: "bg-background text-foreground",
      solid: "bg-black text-white",
    },

Optional: narrow selector to direct children only:

-const alertVariants = cva("relative w-full rounded border-2 p-4 [&_svg]:shrink-0", {
+const alertVariants = cva("relative w-full rounded border-2 p-4 [&>svg]:shrink-0", {

Search for returned no matches in the repo; confirm whether Alert is used with variant="solid" before merging.