Regression: resets text-rendered radio button width in confirmation screens

[vingle]

Ref: https://lab.civicrm.org/dev/core/-/issues/5550

Overview

The work on multi-column Radio Buttons / Checkboxes (#30162) didn't realise that the text rendered output on a Contribution Confirmation Screen uses the same CSS. This fixes this by reseting the width.

Before

After

Technical Details

The CSS is targeting only front-end CiviCRM via .crm-container.crm-public and .crm-profile-view which I think is when the content of profiles is outputted. This will therefore also fix possible occurances of this issue on the Thank You, Event Registration and Profile View pages - so probably these screens and their related forms need testing.

[civibot]

🤖 Thank you for contributing to CiviCRM! ❤️ We will need to test and review this PR. 👷

Introduction for new contributors...

• If this is your first PR, an admin will greenlight automated testing with the command ok to test or add to whitelist.
• A series of tests will automatically run. You can see the results at the bottom of this page (if there are any problems, it will include a link to see what went wrong).
• A demo site will be built where anyone can try out a version of CiviCRM that includes your changes.
• If this process needs to be repeated, an admin will issue the command test this please to rerun tests and build a new demo site.
• Before this PR can be merged, it needs to be reviewed. Please keep in mind that reviewers are volunteers, and their response time can vary from a few hours to a few weeks depending on their availability and their knowledge of this particular part of CiviCRM.
• A great way to speed up this process is to "trade reviews" with someone - find an open PR that you feel able to review, and leave a comment like "I'm reviewing this now, could you please review mine?" (include a link to yours). You don't have to wait for a response to get started (and you don't have to stop at one!) the more you review, the faster this process goes for everyone 😄
• To ensure that you are credited properly in the final release notes, please add yourself to contributor-key.yml
• For more information about contributing, see CONTRIBUTING.md.

Quick links for reviewers...

• ➡️ PR Demo site (can be rebuilt with the command test this please).
• 📖 Review standards
• 🗒️ Review template (brief or verbose)

➡️ Online demo of this PR 🔗

[artfulrobot]

My tests (on d7)

When it has a columns: 4

✔ wide-enough

🫤 narrow

When it has columns: {blank}

✔ wide-enough

🫤

The problem is caused by a change in markup, from this form

div-with-grid
  input[type=checkbox]
  label

(2 children of the grid div) to

div-with-grid
  span

only 1 child.

The grid has 2 grid-template-columns, the first being set by the var.

@vingle's PR works because it gives the first (only) column 'auto'; there's a 2nd column but it has no content.

I looked at the source and it's QuickForm that generates the <tt>[x]</tt> (incidentally it uses round brackets for radios), and it feels like messing with that is Too Hard.

So I think we should merge this PR now, as it fixes the problem with minimal fuss.

[artfulrobot]

I don't think the tests fails are related.

Jenkins please retest this | Jenkin test this | Jenkins re-test this.

[vingle]

Thanks @artfulrobot