fix(UI): tabsbar dropdown button visibility

[Darshan808]

Fixes #304

This pull request fixes the issue of tabsbar dropdown button being visible even when tabs bar is not being overflown by ciruit buttons. This was creating a confusion (which i faced too) about the function of the dropdown button when the tabsbar isn't overflowing. For this, I added a V-if directive with computed property which checks whether the tabsbar has been overflown or not and conditionally renders the dropdown button on tabsbar. Now the dropdown button now only appears when necessary, improving the UI clarity and user experience.

I used two browser apis mutationObserver and resizeObserver for observing changes in size of tabsbar and checking overflow on insertion of new circuit buttons. Since resizeObserver is not supported in older browsers, i had to use a polyfill for it which i installed using npm.

Impact

User Experience: Enhances user experience by preventing confusion about the purpose of the dropdown button when there is no overflow.
Performance: Observers are used efficiently to manage and trigger updates only on actual changes to the tabs bar, ensuring minimal performance impact.

Testing: Manual testing was performed to ensure that the dropdown button now only appears when the tabs bar is actually overflowing

[netlify]

✅ Deploy Preview for circuitverse ready!

Name	Link
🔨 Latest commit	b611d37
🔍 Latest deploy log	https://app.netlify.com/sites/circuitverse/deploys/663b9e71c8ac76000856d271
😎 Deploy Preview	https://deploy-preview-305--circuitverse.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.