Render quick input separators as individual items instead of applying border to list item

Here's what the borders look like today. Note the gap on both sides that results from L/R padding used to get the spacing effect on list items. <img width="658" alt="CleanShot 2022-12-15 at 09 44 09@2x" src="https://user-images.githubusercontent.com/25163139/207931312-57aab45d-e93b-4d72-864d-04c9101fbce2.png"> <img width="663" alt="CleanShot 2022-12-15 at 09 53 19@2x" src="https://user-images.githubusercontent.com/25163139/207932838-e03effa0-c93e-42a1-a694-57d554858b8e.png"> Because separators are rendered on the list items themselves, there are two problems: - I can't render them to take up the full width of the quick pick as desired (see context menu example below) - I can't change their height to better separate sections within a quick pick list - Items are jammed up against the border when hovered/focused ## Prior art <img width="324" alt="CleanShot 2022-12-15 at 09 44 24@2x" src="https://user-images.githubusercontent.com/25163139/207931804-dd666fa7-daf6-4000-b99a-8bebaa845f0d.png"> <img width="314" alt="CleanShot 2022-12-15 at 09 45 28@2x" src="https://user-images.githubusercontent.com/25163139/207931807-83137a9e-8df3-4f42-8c27-7bdba0bdf0f1.png"> ## Example <img width="974" alt="CleanShot 2022-12-15 at 09 53 42@2x" src="https://user-images.githubusercontent.com/25163139/207932803-a4cb9b9a-3457-49f7-9a4f-a3545e0b587c.png"> <img width="1013" alt="CleanShot 2022-12-15 at 09 53 47@2x" src="https://user-images.githubusercontent.com/25163139/207932820-d5a8f028-bb41-40d1-b23f-3a5df3bd7b35.png">