Commit d4ac0a5f076 for woocommerce
commit d4ac0a5f0766f3c35a729862a9140bdd5287899e
Author: Albert Juhé Lluveras <contact@albertjuhe.com>
Date: Tue Jun 2 10:47:50 2026 +0200
Fix Analytics tag popover being too narrow (#65414)
* Add changelog
* Fix Analytics tag popover being too narrow
* Move changelog to components directory
* Add comment explaining the values used in max-width
diff --git a/packages/js/components/changelog/fix-analytics-tag-popover-width b/packages/js/components/changelog/fix-analytics-tag-popover-width
new file mode 100644
index 00000000000..54466c11426
--- /dev/null
+++ b/packages/js/components/changelog/fix-analytics-tag-popover-width
@@ -0,0 +1,4 @@
+Significance: patch
+Type: fix
+
+Fix Analytics tag popover being too narrow
diff --git a/packages/js/components/src/view-more-list/style.scss b/packages/js/components/src/view-more-list/style.scss
index 97a811a6387..9b00efaebe1 100644
--- a/packages/js/components/src/view-more-list/style.scss
+++ b/packages/js/components/src/view-more-list/style.scss
@@ -15,6 +15,12 @@
.woocommerce-view-more-list__popover__item {
display: block;
margin: $gap 0;
+ // This will set the max-width of the popup item to
+ // 16rem on desktop. On mobile, it will be 80vw (to
+ // leave 20vw on the sides to close the popover) -
+ // minus the padding of the popover ($gap * 2).
+ max-width: min(16rem, calc(80vw - $gap * 2));
+ width: max-content;
&:first-child {
margin-top: 0;