Round brews carousel label edges and scope label styling to carousel captions

[Copilot]

The brews carousel labels (yellow title/ingredients blocks) currently render with square corners and inconsistent styling scope. This update rounds the label edges to match tile/container styling and tightens CSS targeting to only carousel labels.

• UI styling update

  • Introduced a dedicated label class on brews carousel caption headings.
  • Applied rounded corners to the yellow label background.

• Selector scoping fix

  • Replaced the broad h3, h5 selector pattern with a class-based selector under .carousel-caption to avoid unintended global h5 styling.

• Component-level test coverage

  • Added an assertion that both title and ingredients headings in CoffeeCarousel carry the new label class.

// CoffeeCarousel.js
<h3 className="coffee-carousel-label">{item.title}</h3>
<h5 className="coffee-carousel-label">
  <b>Ingredients:</b> ...
</h5>

/* App.css */
.carousel-caption .coffee-carousel-label {
  background-color: yellow;
  width: 50%;
  margin: 0 auto;
  border-radius: 12px;
}

Reference screenshot from issue context:

• https://github.com/user-attachments/assets/831b228a-0c6f-4ccc-82b7-c87674b81a56

[Copilot]

Pull request overview

Rounds the brews carousel yellow label corners and scopes the styling to a dedicated class to prevent the previous overly-broad h3, h5 selector from leaking onto unrelated headings.

Changes:

• Added coffee-carousel-label class to the title (h3) and ingredients (h5) in CoffeeCarousel.
• Replaced .carousel-caption h3, h5 with .carousel-caption .coffee-carousel-label and added border-radius: 12px.
• Added a test asserting both headings carry the new class.

Reviewed changes

Copilot reviewed 3 out of 3 changed files in this pull request and generated no comments.

File	Description
frontend/src/components/CoffeeCarousel.js	Adds coffee-carousel-label class to title and ingredients headings.
frontend/src/App.css	Scopes the yellow label style to the new class and adds rounded corners.
frontend/src/components/tests/CoffeCarousel.test.js	New test confirming both headings render with the new class.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[conorheffron]

@copilot resolve the merge conflicts in this pull request

[Copilot]

@copilot resolve the merge conflicts in this pull request

Merge conflicts resolved in commit a38fdc6. The three conflicted files were resolved as follows:

• App.css — kept the scoped .carousel-caption .coffee-carousel-label selector (with border-radius: 12px) over the broad h3, h5 selector from main.
• CoffeeCarousel.js — combined both changes: translatedTitle for the display text (from main) and coffee-carousel-label className on the h3 (from this branch).
• CoffeCarousel.test.js — kept both tests: the label class assertion from this branch and the new translation test from main.

All 5 CoffeeCarousel tests pass.