IA-3898: Groups section items overflow container, scrollbar over elements.

[beygorghor]

Unless zooming out on my page and making content harder to read, I can't see my dropdown list anymore when there are many groups selected on an OU page

Related JIRA tickets : IA-3898

Self proofreading checklist

• Did I use eslint and black formatters
• Is my code clear enough and well documented
• Are my typescript files well typed
• New translations have been added or updated if new strings have been introduced in the frontend
• My migrations file are included
• Are there enough tests
• Documentation has been included (for new feature)

Changes

Override body css overflow to make options available

How to test

Make sure you have lot's of groups available. assign a lot to an org unit and try to edit the groups option.
You should be able to see the whole list

Print screen / video

Screen.Recording.2025-02-04.at.15.39.26.mov

Notes

Things that the reviewers should know:

• known bugs that are out of the scope of the PR
• other trade-offs that were made
• does the PR depends on a PR in bluesquare-components?
• should the PR be merged into another PR?

Follow the Conventional Commits specification

The merge message of a pull request must follow the Conventional Commits specification.

This convention helps to automatically generate release notes.

Use lowercase for consistency.

Example:

fix: empty instance pop up

Refs: IA-3665

Note that the Jira reference is preceded by a line break.

Both the line break and the Jira reference are entered in the Add an optional extended description… field.

[kemar]

LGTM

[kemar]

I guess this syntax comes from jss-plugin-global?

As far as I understand, this rule will be applied to body element on on pages containing this component. Is this correct?

[beygorghor]

Yes indeed. Main body is limited to the screen size on the whole app to allow overflow on other components. In this specific case the dropdown is going out of the body then not visible. Applying the change on all the page leads to double scroll issues. So the workaround here is to modify the body style only if this component is visible. I'm not really a fan of it, but it's the faster solution.