fix(demo): fix demo styles in vaadin 25

[javier-godoy]

Summary by CodeRabbit

• Style
  • Enhanced alert component styling with improved structural and layout adjustments, refined button positioning (now anchored and visually integrated), better spacing for labels/content, and theming/visibility tweaks for a cleaner, more consistent presentation.

[coderabbitai]

Walkthrough

Added CSS rules to the demo stylesheet to adjust positioning, padding, display, and theming for granite-alert-mixin and its children; introduced absolute positioning and theme-aware right-offset for the contained vaadin-button. No functional code changes.

Changes

Cohort / File(s)	Summary
CSS Styling Updates src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css	Added position: relative to granite-alert-mixin, block display and right padding for span, replaced float:right on vaadin-button with transparent background, absolute positioning, full-height, no shadow/border, explicit top/right/bottom alignment and a small top margin; added theme-aware right calc selector for demos.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~8 minutes

Possibly related PRs

• feat: add named part in shadow DOM #19: Related CSS updates introducing Shadow DOM part and ::part-based styling for the same demo stylesheet.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and specifically describes the main change: fixing demo styles to be compatible with Vaadin 25.
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
• Post copyable unit tests in a comment
• Commit unit tests in branch vaadin25-demo-styles

---

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
`@src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css`:
- Around line 45-62: The selector "granite-alert-mixin vaadin-button" contains
duplicate and conflicting sizing/position declarations: remove the redundant
height: 26px and margin-top: 0.5px, drop the float: right (since position:
absolute is used), and keep a single sizing strategy (e.g., position: absolute
with height: 100%, top: 0, bottom: 0, right: 0); also remove any other
ineffective or conflicting declarations so the rule is consistent and resolves
stylelint errors.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between eb980ad and 09628da.

📒 Files selected for processing (1)

• src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[coderabbitai]

🧹 Nitpick comments (1)

src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css (1)

45-60: Minor redundancy and formatting cleanup.

A few small issues remain:

1. height: 100% is redundant when top: 0 and bottom: 0 are both set—they already stretch the element.
2. margin-top: 0.5px combined with top: 0 is unusual for absolute positioning; consider using top: 0.5px directly if an offset is needed.
3. Stylelint flags the empty line before position: absolute; (line 51-52) and expects consistent spacing.

🧹 Suggested cleanup

 granite-alert-mixin vaadin-button {
background-color: transparent;
--vaadin-button-background: transparent;
cursor: pointer;
margin: 0;
padding: 0;
-+
position: absolute;
box-shadow: none;
border: none;
- height: 100%;- margin-top: 0.5px;- top: 0;+ top: 0.5px;
bottom: 0;
right: 0;
}

🤖 Prompt for AI Agents

Verify each finding against the current code and only fix it if needed.
In
`@src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css`
around lines 45 - 60, The granite-alert-mixin vaadin-button rule has redundant
and inconsistent declarations: remove height: 100% (top: 0 and bottom: 0 already
stretch the element), replace margin-top: 0.5px with top: 0.5px if the vertical
offset is required (or remove it if not), and remove the unnecessary blank line
before position: absolute to satisfy stylelint spacing rules; update the block
in the granite-alert-mixin vaadin-button selector accordingly to keep
declarations compact and consistent.

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.
Nitpick comments:
In
`@src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css`:
- Around line 45-60: The granite-alert-mixin vaadin-button rule has redundant
and inconsistent declarations: remove height: 100% (top: 0 and bottom: 0 already
stretch the element), replace margin-top: 0.5px with top: 0.5px if the vertical
offset is required (or remove it if not), and remove the unnecessary blank line
before position: absolute to satisfy stylelint spacing rules; update the block
in the granite-alert-mixin vaadin-button selector accordingly to keep
declarations compact and consistent.

---

ℹ️ Review info

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 09628da and 9913d77.

📒 Files selected for processing (1)

• src/test/resources/META-INF/resources/frontend/styles/granitealert/demo-styles.css