[BUG] Details component styling conflicts with external plugins (starlight-openapi)

[Infi-Knight]

Is there an existing issue for this?

• I have searched the existing issues

What type of bug are you experiencing?

Styling

Current Behavior

issues when used with external plugins like starlight-openapi:

1. Double arrows: Design system adds custom ::before arrow, but plugins have their own arrows
2. Alignment issues: Negative margins cause layout problems with nested details
3. Inconsistent borders: Plugin-specific CSS overrides design system borders

Expected Behavior

• Ideally design system styling should get applied

Steps To Reproduce

Regression can be seen at this page: https://deploy-preview-758--openpayments-preview.netlify.app/apis/resource-server/operations/create-incoming-payment/

Environment

- OS:
- Node:
- npm:

Anything else?

No response

[JoblersTune]

Also worth noting broken styling on mobile screens

[melissahenderson]

If there's a better plugin for the API docs, I'm all for it. We were going to look into this at some point this year (didn't have time to get to it last year).

[Infi-Knight]

If there's a better plugin for the API docs, I'm all for it. We were going to look into this at some point this year (didn't have time to get to it last year).

yeah for now I am going to try to make it so that we keep the details element for paragraph texts but keep using the default styling from starlight plugin for openapi stuff

[mustafa-sayyed]

hey @JoblersTune, @Infi-Knight
I would like to take this issue, please assign to me.

[JoblersTune]

Absolutely, thank you @mustafa-sayyed.
We made some small local fixes if you'd like to see for extra context

• chore: update dependencies in docs open-payments#758