Menus are hidden when adding more languages

[cold01water]

We are currently adding Japanese translation files.
First, we added a process to increase the number of Japanese options.
A Japanese menu has been added inside the HTML/javascript, but due to a CSS problem it is displayed outside the browser screen.
The problem areas are as follows:

• packages/webapp/src/components/sidebar/UserAccount.tsx

            <Menus className="absolute left-[220px] top-0 !my-0 hidden w-[140px] group-hover:block">
              {LOCALES_OPTIONS.map(row => (
                <Menus.Item
                  key={row.value}
                  label={row.label}
                  isChecked={i18n.language === row.value}
                  onClick={() => i18n.changeLanguage(row.value)}
                />
              ))}
            </Menus>

If you change top-0 to bottom-0, the display location will change and become visible.
However, I'm not sure if this is the correct fix. Can you give me some advice?

[iMuFeng]

Values between -bottom-32 and bottom-0 are all acceptable

[cold01water]

Thank you.
It will be temporarily visible by dealing with bottom-0. If more languages ​​are added, it would be better to consider making it scrollable, but is there a style that can be easily implemented?

[iMuFeng]

Add h-[256px] to set a fixed height and scrollbar to create a better-looking scrollbar