navbar-collapse used with dropdown-toggle

[CJ-Pav]

Prerequisites

• I have searched for duplicate or closed issues
• I have validated any HTML to avoid common problems
• I have read the contributing guidelines

Describe the issue

Using a drop down navbar item within a navbar collapse seems to break bootstraps styling. Specifically, the shrink to fit breaks, and expands to the full screen width (with some padding). I tested in 5 different screen sizes and found it looks fantastic on larger screens. The issue I am noticing really only impacts medium sized screens (tablets and small laptops). See the screenshots below. On a larger screen the dropdown box shrink wraps the button options within. On a medium sized screen, it blows up across the whole screen. This makes sense for phones, but on tablets over 60% of the screen width is wasted.

Large screens look great:

Medium screens not so much (looks fine on small using these same styles):

Reduced test cases

https://codepen.io/CJ-Pav/pen/mdNNPJy

What operating system(s) are you seeing the problem on?

Windows, macOS, Linux

What browser(s) are you seeing the problem on?

Chrome, Firefox

What version of Bootstrap are you using?

v5.2.3