Account for dynamic padding on flex container

[chasegiunta]

This pull request introduces several enhancements and optimizations to the flexbox wrapping detection logic. The changes focus on improving performance, handling padding more effectively, and ensuring accurate wrap state detection.

Enhancements to flexbox wrapping detection:

• src/main.ts: Introduced containerUnwrapWidths and activeUpdates to manage unwrapped widths and prevent flickering during updates.
• src/main.ts: Added getHorizontalPadding function to calculate total horizontal padding of an element, which is used to determine if items would fit without wrapping.
• src/main.ts: Improved the markFlexboxAndItemsWrapState function to handle force wrapping, unwrapping, and padding adjustments more accurately.
• src/main.ts: Added a MutationObserver to monitor style and class changes that might affect padding, ensuring the wrap state is updated accordingly.

Documentation updates:

• docs/App.vue: Added a new example to demonstrate how padding applied to a parent flexbox affects wrap detection. [1] [2]

[netlify]

✅ Deploy Preview for wrap-aware ready!

Name	Link
🔨 Latest commit	3ab735b
🔍 Latest deploy log	https://app.netlify.com/sites/wrap-aware/deploys/67d9f48a203a3500081cbe47
😎 Deploy Preview	https://deploy-preview-2--wrap-aware.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.