fix: overflow languege select box

[tahoangphuc111]

Description

this PR fixes a UI overflow issue in the language selector

Type of change: bug fix

---

What

• fix horizontal overflow in the language select component.

---

Why

the language selector caused horizontal overflow due to layout styling

this PR resolves the overflow issue to improve UI stability

Fixes # (issue number if applicable)

---

Screenshots

Before

After

---

How Has This Been Tested?

• Verified in browser that the language selector no longer causes horizontal overflow.

• Manual UI verification

• Local development server test

---

Checklist

• I have explained the purpose of this PR.
• I have performed a self-review of my own code
• I have commented my code, particularly in hard-to-understand areas
• I have made corresponding changes to the README/documentation
• Any dependent changes have been merged and published in downstream modules
• Informed of breaking changes, testing and migrations (if applicable).
• Attached screenshots (if applicable).

By submitting this pull request, I confirm that my contribution is made under the terms of the AGPL-3.0 License.

[magnified103]

Can you please describe how did you replicate it? On my end I couldn't see that overflow.

[tahoangphuc111]

Can you please describe how did you replicate it? On my end I couldn't see that overflow.

I tested it on the current VNOJ site. When opening the language selector, the dropdown becomes wider than its container, which causes horizontal overflow and a scrollbar to appear. I’m using a screen with a resolution of 1366x768. You may need to zoom in to 125% or higher to reproduce the issue

Here is a screenshot showing the problem:

[magnified103]

Which browser are you using? I checked both safari and chromium and couldn’t reproduce the issue.

[tahoangphuc111]

Which browser are you using? I checked both safari and chromium and couldn’t reproduce the issue.

I tested it on Chrome on Windows and Firefox on Ubuntu, and I was able to reproduce the issue on both

[magnified103]

Can you check the devtools and see if any error show up? The css props you added is already included in select2.min.css.

[tahoangphuc111]

Can you check the devtools and see if any error show up? The css props you added is already included in select2.min.css.

I checked the DevTools console and there are no errors related to this issue. The only message that appears is from Ace editor:

ace.js:1 Automatically scrolling cursor into view after selection change this will be disabled in the next version set editor.$blockScrolling = Infinity to disable this message

This seems to be just a warning from Ace and not related to the language selector

[tahoangphuc111]

Well, when I use a larger screen, this bug does not appear.