chore: demo controls should reflect for all attributes

[Rocss]

…flected

Description

In the Demo section of the Documentation, changes are reflected only for attributes which are controlled by a sp-picker, rest are being ignored.
I also added some CSS so that all controls have the same width (this is optional, I can revert if it is not needed).

Related issue(s)

• N/A

Motivation and context

Small documentation issue.

How has this been tested?

• Test case 1

  1. Go here
  2. Change the text in the text input
  3. Observe nothing happens

• Test case 2

  1. Go here
  2. Change the text in the offset input
  3. Observe that the property is not applied

• Test case 3

  1. Go here
  2. Change the text in the text input
  3. Observe the component's text is updated

• Test case 4

  1. Go here
  2. Change the number in the offset input
  3. Observe the component's ofset is updated

• Did it pass in Desktop?

• Did it pass in Mobile?

• Did it pass in iPad?

Screenshots (if appropriate)

Types of changes

• Bug fix (non-breaking change which fixes an issue)
• New feature (non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)
• Chore (minor updates related to the tooling or maintenance of the repository, does not impact compiled assets)

Checklist

• I have signed the Adobe Open Source CLA.
• My code follows the code style of this project.
• If my change required a change to the documentation, I have updated the documentation in this pull request.
• I have read the CONTRIBUTING document.
• I have added tests to cover my changes.
• All new and existing tests passed.
• I have reviewed at the Accessibility Practices for this feature, see: Aria Practices

Best practices

This repository uses conventional commit syntax for each commit message; note that the GitHub UI does not use this by default so be cautious when accepting suggested changes. Avoid the "Update branch" button on the pull request and opt instead for rebasing your branch against main.

[github-actions]

Branch preview

• Documentation Site
• Storybook

[github-actions]

Lighthouse scores

Category	Latest (report)	Main (report)	Branch (report)
Performance	0.99	0.99	0.99
Accessibility	1	1	1
Best Practices	1	1	1
SEO	1	0.92	0.92
PWA	1	1	1

What is this?

Lighthouse scores comparing the documentation site built from the PR ("Branch") to that of the production documentation site ("Latest") and the build currently on main ("Main"). Higher scores are better, but note that the SEO scores on Netlify URLs are artifically constrained to 0.92.

Transfer Size

Category	Latest	Main	Branch
Total	223.007 kB	212.102 kB	211.933 kB 🏆
Scripts	54.989 kB	49.801 kB	49.665 kB 🏆
Stylesheet	34.998 kB	30.343 kB	30.306 kB 🏆
Document	6.056 kB	5.335 kB 🏆	5.339 kB
Font	126.964 kB	126.623 kB	126.623 kB

Request Count

Category	Latest	Main	Branch
Total	48	48	48
Scripts	40	40	40
Stylesheet	5	5	5
Document	1	1	1
Font	2	2	2

[github-actions]

Tachometer results

Currently, no packages are changed by this PR...

[Rocss]

I am marking this as ready for review even if it is not green because there are some flaky VRTs, which are stubborn enough to fail even after re-run.