Reduce margins on input fields

[gingyx]

References

• Related Clean up spacing in input forms #4136

Description

This PR reduces margins on input fields for a more streamlined submission form design.

Instructions for Reviewers

List of changes in this PR:

1. Updated ds-dynamic-form-control-container.component.scss to reduce bottom margins on all input field labels.
2. Updated dynamic-list.component.html to remove left margins from checkbox and radio button lists.

BEFORE

AFTER

How to test or review the PR:

• Create a new item through the admin sidebar.
• Verify the margin changes in the item submission form.

Checklist

• My PR is created against the main branch of code (unless it is a backport or is fixing an issue specific to an older branch).

• My PR is small in size (e.g. less than 1,000 lines of code, not including comments & specs/tests), or I have provided reasons as to why that's not possible.

• My PR passes ESLint validation using npm run lint

• My PR doesn't introduce circular dependencies (verified via npm run check-circ-deps)

• My PR includes TypeDoc comments for all new (or modified) public methods and classes. It also includes TypeDoc for large or complex private methods.

• My PR passes all specs/tests and includes new/updated specs or tests based on the Code Testing Guide.

• My PR aligns with Accessibility guidelines if it makes changes to the user interface.

• My PR uses i18n (internationalization) keys instead of hardcoded English text, to allow for translations.

• My PR includes details on how to test it. I've provided clear instructions to reviewers on how to successfully test this fix or feature.

• If my PR includes new libraries/dependencies (in package.json), I've made sure their licenses align with the DSpace BSD License based on the Licensing of Contributions documentation.

• If my PR includes new features or configurations, I've provided basic technical documentation in the PR itself.

• If my PR fixes an issue ticket, I've linked them together.

[tdonohue]

@gingyx : I tried this out today on a Chrome browser, and the display looks different for me. Here's what I see

As you can see, it looks more cluttered. I tried doing a hard reload (Ctrl + reload in browser) to make sure I didn't have any older styles cached, but that didn't make a difference.

Does this still work properly for you? All I did was change the default "dc.type" input field to use <input-type value-pairs-name="common_types">list</input-type>, and this is the display that resulted from this PR.

Let me know if I made a mistake in testing this, or something.

[gingyx]

@tdonohue I managed to replicate your issue. It seems like the dynamic list component was still using bootstrap 4 classes, which is a remnant of #2855. Updated them to bootstrap 5 and now the spacing between the checkboxes and labels is fixed.

[tdonohue]

@gingyx : Quick note. It looks like your latest update resulted in unit test failures (spec failures). It's likely you need to update the DsDynamicListComponent specs as well

[gingyx]

@tdonohue Sorry about that, the tests are fixed now.

[tdonohue]

👍 Thanks @gingyx ! Those latest changes have fixed the issues I was having. The display now looks like your screenshot & has an improved style