[Bug]: Prompt template with many variables causes overflow issues and hides submit button

[d3banjan]

What happened?

When a prompt template contains a large number of variables, the page displaying the dropdown menus for filling these variables does not handle overflow correctly. This results in the following issues:

• The page content extends beyond the viewport's lower edge.
• Some dropdown options become inaccessible due to being pushed out of view.
• The submit button disappears off-screen, preventing users from completing the template.

Steps to Reproduce

1. Create a new prompt titled "long prompt with many variables".

2. In the text field fill with the following text --
   Lorem ipsum dolor sit amet, consectetur adipiscing elit{{variable_name:option1|option2|option3}}. Sed sed pharetra tortor, sed congue eros{{variable_name:option1|option2|option3}}. Phasellus placerat in urna et suscipit{{variable_name:option1|option2|option3}}. Sed vehicula pharetra sapien et vestibulum{{variable_name:option1|option2|option3}}. Nam tincidunt sem eu efficitur faucibus{{variable_name:option1|option2|option3}}. Nam a sem ex{{variable_name:option1|option2|option3}}. Maecenas eu turpis ipsum{{variable_name:option1|option2|option3}}. Nam viverra vitae ligula sed vulputate{{variable_name:option1|option2|option3}}. Suspendisse potenti{{variable_name:option1|option2|option3}}. Sed eu ultrices leo{{variable_name:option1|option2|option3}}. Maecenas finibus ipsum massa, sit amet pretium ante pellentesque at{{variable_name:option1|option2|option3}}. Sed viverra turpis a urna porttitor, at interdum ipsum convallis{{variable_name:option1|option2|option3}}. Curabitur eget eleifend diam{{variable_name:option1|option2|option3}}.

   Vestibulum posuere risus non ullamcorper fermentum{{variable_name:option1|option2|option3}}. Fusce quis erat felis{{variable_name:option1|option2|option3}}. Nullam ornare feugiat erat, id posuere lacus{{variable_name:option1|option2|option3}}. Mauris ut tellus nec quam faucibus tempus pretium sit amet lorem{{variable_name:option1|option2|option3}}. Sed venenatis odio augue, sit amet blandit lorem venenatis vitae{{variable_name:option1|option2|option3}}. Nullam dapibus, est sit amet congue fringilla, quam augue laoreet turpis, nec mollis augue leo sed diam{{variable_name:option1|option2|option3}}. Phasellus vitae lobortis tellus{{variable_name:option1|option2|option3}}. Sed nibh leo, condimentum vel tincidunt id, elementum et ipsum{{variable_name:option1|option2|option3}}. Praesent a tortor id odio gravida condimentum et vel elit{{variable_name1:option1|option2|option3}}. Nullam fermentum hendrerit lorem, in porta nunc tempor et{{variable_name2:option1|option2|option3}}.

   Nunc congue cursus felis sit amet pharetra{{variable_name3:option1|option2|option3}}. Integer sapien magna, semper et lectus aliquet, facilisis pellentesque massa{{variable_name4:option1|option2|option3}}. Etiam turpis ex, ultrices ac ligula ac, venenatis auctor orci{{variable_name5:option1|option2|option3}}. Vestibulum quis nisl nisl{{variable_name6:option1|option2|option3}}. Praesent suscipit, sapien vitae porta sodales, purus erat varius felis, eu bibendum arcu lacus sit amet quam{{variable_name7:option1|option2|option3}}. Phasellus auctor ut leo viverra consectetur{{variable_name8:option1|option2|option3}}. Proin vel auctor urna{{variable_name9:option1|option2|option3}}. Donec iaculis, odio quis elementum dapibus, diam diam tempor orci, a vestibulumsem ligula sed magna{{variable_name10:option1|option2|option3}}. Ut ante odio, sagittis sed tincidunt ut, feugiat nec ipsum{{variable_name11:option1|option2|option3}}. Suspendisse mollis tincidunt felis at ullamcorper{{variable_name12:option1|option2|option3}}. Fusce nunc orci, tempus vel dolor non, tincidunt dapibus odio{{variable_name13:option1|option2|option3}}. Quisque ut sapiennon lorem malesuada vestibulum{{variable_name14:option1|option2|option3}}. Integer pellentesque, augue eget sodales ullamcorper, orci neque dapibus justo, sit amet fringilla sem turpis et lectus{{variable_name15:option1|option2|option3}}.

   Integer pretium, magna eget hendrerit commodo, odio erat consequat massa, id lobortis eros ante eu odio{{variable_name16:option1|option2|option3}}. In pulvinar nulla eu libero ultricies scelerisque{{variable_name17:option1|option2|option3}}. Ut interdum fringilla nisi sit amet pulvinar{{variable_name18:option1|option2|option3}}. Sed lectus ante, tristique nec velit sed, mollis auctor massa{{variable_name19:option1|option2|option3}}. Cras ut elit faucibus neque efficitur pretium{{variable_name20:option1|option2|option3}}. Suspendisse egestas magna vitae lorem venenatis aliquet{{variable_name21:option1|option2|option3}}. Duis egestas fringilla purus blandit faucibus{{variable_name22:option1|option2|option3}}. Sed at leo aliquet, dapibus sem nec, ullamcorper diam{{variable_name23:option1|option2|option3}}. Maecenas a dui vel mi ultrices consectetur vel non augue{{variable_name24:option1|option2|option3}}.

3. Create the template and then try to use it from a chat, where the issue described above occurs.

What browsers are you seeing the problem on?

Chrome, Microsoft Edge

Relevant log output

No response

Screenshots

No response

Code of Conduct

• I agree to follow this project's Code of Conduct