Follow-up of https://github.com/odoo/odoo/pull/182394

PR above fixed an issue where mouse-hovering IM status lead to buggy background color. This happens because the IM status requires `bg-inherit` in order to determine the right background color to crop the avatar. Buttons have specific bg-color that cannot simply be overidden with `bg-inherit`, so this was defined in SCSS with higher specificity.

A consequence of increasing the specificity of this rule was that it became more specific than the one for active item, so the active item in discuss sidebar had no background color but only the outline.

This commit fixes the issue by increasing the stylerule specificity of active item background color, so that this is higher than the `bg-inherit`. The specific bg-inherit is still important to fix the issue in PR above.

Before / After
![Screenshot 2024-10-08 at 12 53 44](https://github.com/user-attachments/assets/0e6a43cd-2029-4c2a-a2e2-e50a53a44bcf) ![Screenshot 2024-10-08 at 12 53 25](https://github.com/user-attachments/assets/0e93d8a1-492c-42f4-9454-f30e1906cfdc)

At the moment it is not possible to add new X2many relations to a model inside the `SERIALIZABLE_MODELS` list.

I would like to add an One2many relation to the `pos.order` model:

```python
class PosOrder(models.Model):
    _inherit = "pos.order"

   example_items = fields.One2many("example.item", "order_id")
```

```javascript
import { Base } from "@point_of_sale/app/models/related_models";
import { registry } from "@web/core/registry";

export class ExampleItem extends Base {
  static pythonModel = "example.item";

  setup(vals) {
    super.setup(vals);
  }

  // ...
}

registry.category("pos_available_models").add(ExampleItem.pythonModel, ExampleItem);
```

A call to [`order.serialize`](https://github.com/abichinger/odoo/blob/f9de1eef6dd403157c0222dc75de85c8b7b59e3c/addons/point_of_sale/static/src/app/models/related_models.js#L191) throws the following error:

```
Trying to create a non serializable record example.item
```

After this PR is merged it is possible to add new models to the list of serializable models:

```javascript
import { SERIALIZABLE_MODELS } from "@point_of_sale/app/models/related_models"
SERIALIZABLE_MODELS.push("example.item")
```

---
I confirm I have signed the CLA and read the PR guidelines at www.odoo.com/submit-pr

This commit fixes two layout issues:

1. In the dynamic products snippet: using the layout "centered", the
image was overlapping the text of the card due to having no height set
for the image.

2. On the dynamic carousel snippet: on mobile, a scrollbar was
appearing because of the arrow buttons.

task-4215589

| | Before | After |
|--------|--------|--------|
| Image issue | ![Screenshot 2024-10-01 at 10 26 08](https://github.com/user-attachments/assets/c61c2d8f-063e-4dbe-a0bc-07fc82e720b3) | <img width="1394" alt="Capture d’écran 2024-10-08 à 09 01 46" src="https://github.com/user-attachments/assets/ba710372-dd08-4854-8cfd-c8c999197dca"> |
| Scroll issue | ![Screenshot 2024-10-01 at 10 27 51](https://github.com/user-attachments/assets/547928c3-1e0e-4eaa-89d0-52bcb2da67a0) | <img width="447" alt="Capture d’écran 2024-10-08 à 09 02 25" src="https://github.com/user-attachments/assets/415aa9f3-94fd-45e1-9743-ad1ac0a3a205"> | 

---

I confirm I have signed the CLA and read the PR guidelines at www.odoo.com/submit-pr