Prevent widows and specify css class for zindex

Automattic · May 15, 2024 · 79320c9 · 79320c9
1 parent 193555d
commit 79320c9
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/client/my-sites/plans/jetpack-plans/product-lightbox/quantity-dropdown.tsx b/client/my-sites/plans/jetpack-plans/product-lightbox/quantity-dropdown.tsx
@@ -5,6 +5,7 @@ import { useMemo, useCallback, type FC } from 'react';
 import FormFieldset from 'calypso/components/forms/form-fieldset';
 import FormLegend from 'calypso/components/forms/form-legend';
 import InfoPopover from 'calypso/components/info-popover';
+import { preventWidows } from 'calypso/lib/formatting';
 import { getProductPartsFromAlias } from 'calypso/my-sites/checkout/src/hooks/use-prepare-products-for-cart';
 import { useDispatch } from 'calypso/state';
 import { recordTracksEvent } from 'calypso/state/analytics/actions/record';
@@ -79,7 +80,7 @@ const QuantityDropdown: FC< QuantityDropdownProps > = ( { product, siteId, onCha
 						screenReaderText={ translate( 'Learn more' ) }
 						className="product-lightbox__variants-dropdown--popover"
 					>
-						{ PRODUCT_OPTIONS_HEADER_INFO_CONTENT[ product?.productSlug ] }
+						{ preventWidows( PRODUCT_OPTIONS_HEADER_INFO_CONTENT[ product?.productSlug ] ) }
 					</InfoPopover>
 				</FormLegend>
 				<SelectDropdown

diff --git a/client/my-sites/plans/jetpack-plans/product-lightbox/style.scss b/client/my-sites/plans/jetpack-plans/product-lightbox/style.scss
@@ -260,6 +260,6 @@
 // The lightbox z-index is 100200, consequences of updating the popover z-index
 // to higher than that are unclear, so we'll manually set it to 100200 here so we
 // can see the popover in the lightbox.
-.popover {
+.popover.product-lightbox__variants-dropdown--popover {
 	z-index: 100200;
 }