The menu to toggle column visibility is half hidden

[xavier-dev]

Describe the bug

When browsing a table, I can click a drop-down arrow to toggle the columns visibility. It opens a menu showing one line per column with a checkbox. When at least one of the column has a too long name or a too long comment, the menu is too large to fit on the screen and the left part is hidden. As a result, it's not possible to click on the checkboxes

To Reproduce

Steps to reproduce the behavior:

1. Create a table with long column names or comments

CREATE TABLE `test` (
  `id` int NOT NULL,
  `column_with_a_very_very_long_name` int NOT NULL,
  `col2` int NOT NULL COMMENT 'This columns has a very long comment.'
) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COLLATE=utf8mb4_unicode_ci;
ALTER TABLE `test` ADD PRIMARY KEY (`id`);
INSERT INTO `test` (`id`, `column_with_a_very_very_long_name`, `col2`) VALUES (1, 1, 1), (2, 2, 2);

2. Open the "Browse" tab for this table.
3. Click on the drop-down arrow to toggle the columns visibility

Expected behavior

The menu to toggle the columns visibility should be fully visible.

Screenshots

Server configuration

• Database version: MySQL 8.0.27
• PHP version: 8.1.2
• phpMyAdmin version: 5.1.1

Client configuration

• Browser: Chrome 97.0.4692.99
• Operating system: Windows

[xavier-dev]

I submitted a fix. This is my first contribution: please let me know if anything needs to be adjusted.