Projects site styling fixes

[rammodhvadia]

various fixes for projects-ui:

• uses custom border radius for secondary buttons
• improved padding around progress bar
• fix some border spacing issues in sidebar
• add custom padding to instruction panel

[Copilot]

Pull request overview

This PR makes a set of styling adjustments to the projects sidebar/instructions UI, focusing on button rounding, spacing around the progress bar, and sidebar/instructions panel layout flexibility via CSS custom properties.

Changes:

• Updates secondary button styling to support a configurable border radius.
• Adjusts progress bar layout spacing (padding and internal spacing).
• Adds configurable sidebar alignment/footer padding and instructions content bottom padding.

Reviewed changes

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

Show a summary per file

File	Description
src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx	Removes buttonOuter usage for step navigation buttons, affecting rendered DOM structure/styling hooks.
src/assets/stylesheets/Sidebar.scss	Adds CSS variable overrides for alignment/footer padding and tweaks border obscurer positioning.
src/assets/stylesheets/ProgressBar.scss	Adds vertical padding to the progress bar and introduces a small internal gap in the progress container.
src/assets/stylesheets/Instructions.scss	Adds bottom padding hook for instruction content via a CSS custom property.
src/assets/stylesheets/Button.scss	Adds a configurable border-radius for secondary buttons via a CSS custom property.

Comments suppressed due to low confidence (1)

src/components/Menus/Sidebar/InstructionsPanel/ProgressBar/ProgressBar.jsx:43

• After removing the buttonOuter prop, these buttons will no longer render a .btn-outer wrapper. ProgressBar.scss still contains .progress-bar .btn-outer { ... } overrides, so verify the desired padding/click-target styling still applies and consider removing or updating the now-unused .btn-outer rule to avoid dead CSS.

        <Button
          className={"btn--secondary btn--small"}
          onClickHandler={goToPreviousStep}
          ButtonIcon={ChevronLeft}
          disabled={currentStepPosition === 0}
          title={t("instructionsPanel.previousStep")}
        />

---

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

[Copilot]

padding-block-end: var(--project-instructions-padding); has no fallback. If --project-instructions-padding isn’t defined, the declaration becomes invalid and the padding will be ignored, which can lead to inconsistent spacing between environments. Consider adding a sensible fallback (e.g., an existing spacing token) so the layout is deterministic even when the custom property isn’t set.

Suggested change

	padding-block-end: var(--project-instructions-padding);
	padding-block-end: var(--project-instructions-padding, #{$space-1-5});

[Copilot]

Using a hard-coded 4px gap bypasses the design-system spacing scale (and won’t respond to --scale-factor). Prefer a spacing token (e.g. $space-0-25) so this spacing stays consistent with the rest of the UI.

Suggested change

	gap: 4px;
	gap: $space-0-25;

[Copilot]

Within the progress bar, .progress-bar .btn sets border-radius: var(--step-buttons-radius, inherit), which will override this new .btn--secondary border-radius (more specific selector). If the goal of this PR is for the step navigation buttons to pick up the new secondary radius, update the ProgressBar styles (or set --step-buttons-radius) so the intended radius actually applies there.

[Copilot]

Pull request overview

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

---

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

[adrian-rpf]

@rammodhvadia looks like some valid Copilot comments.
Please investigate and resolve and then move this back into ready to ready