Feature/language UI update

[GaetanGrd]

Implementation

With the number of languages supported by BSM increasing all the time, a small redesign of the display to divide everything into two columns makes it all look better :D

Screenshots

before	after

How to Test

• Clone my branch
• use npm i then npm start
• go settings

Emoji Guide

For reviewers: Emojis can be added to comments to call out blocking versus non-blocking feedback.

E.g: Praise, minor suggestions, or clarifying questions that don’t block merging the PR.

🟢 Nice refactor!

🟡 Why was the default value removed?

E.g: Blocking feedback must be addressed before merging.

🔴 This change will break something important

Blocking	🔴 ❌ 🚨	RED
Non-blocking	🟡 💡 🤔 💭	Yellow, thinking, etc
Praise	🟢 💚 😍 👍 🙌	Green, hearts, positive emojis, etc

[sonarqubecloud]

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
0.0% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

[GaetanGrd]

I don't really know how to properly render my code, but if you have any suggestions, I'll take them.

[Zagrios]

@GaetanGrd Use CSS instead of JS for this. And if we want to have 3 columns someday, we'd have to redo everything.

Convert the root div to use grid instead of flex. Keep the direction property, remove splitColumns, and add a property like nbCol or nbSplit (since this property should work even with row direction) default to 1

You should be able to manage the direction with the CSS property grid-auto-flow.