fix

src/common/gui/base/BubbleTextField.ts

@@ -87,7 +87,7 @@ export class BubbleTextField<T> implements ClassComponent<BubbleTextFieldAttrs<T
 						return m(".flex.overflow-hidden.items-end", [
 							m(".flex-no-grow-shrink-auto.overflow-hidden", m(BaseButton, baseButtonAttrs)),
 							// Comma is shown when there's text/another bubble afterwards or if the field is active
-							this.active || idx < items.length - 1 || attrs.text !== "" ? m("span.pr", ",") : null,
+							this.active || idx < items.length - 1 || attrs.text !== "" ? m("span.pr-12", ",") : null,
 						])
 					})
 				},

src/common/subscription/components/PersonalPaidPlanBox.ts

@@ -171,7 +171,7 @@ export class PersonalPaidPlanBox implements Component<PersonalPlanBoxAttrs> {
 					},
 				}),
 				m(
-					".flex.mt-s",
+					".flex.mt-8",
 					{
 						style: {
 							"justify-content": position === "right" ? "start" : "end",
@@ -183,7 +183,7 @@ export class PersonalPaidPlanBox implements Component<PersonalPlanBoxAttrs> {
 						? m(PlanBadge, { langKey: isCurrentPlan ? "pricing.currentPlan_label" : "unavailable_label" })
 						: m(".smaller", lang.get(planConfig.tagLine)),
 				),
-				m(".flex-space-between.gap-hpad.mt.mb", { style: { "flex-direction": position === "right" ? "row-reverse" : "row" } }, [
+				m(".flex-space-between.gap-hpad.mt-16.mb-16", { style: { "flex-direction": position === "right" ? "row-reverse" : "row" } }, [
 					m(
 						"",
 						{

src/common/subscription/components/PersonalPlanContainer.ts

@@ -104,7 +104,7 @@ export class PersonalPlanContainer implements Component<PlanBoxContainerAttrs> {
 		},
 	}: Vnode<PlanBoxContainerAttrs>): Children {
 		return m(
-			`.flex-column${allowSwitchingPaymentInterval ? "" : ".mt"}`,
+			`.flex-column${allowSwitchingPaymentInterval ? "" : ".mt-16"}`,
 			{
 				"data-testid": "dialog:select-subscription",
 				style: {

src/common/subscription/components/PlanSelectorHeadline.ts

@@ -12,7 +12,7 @@ interface PlanSelectorHeadlineAttrs {
 export class PlanSelectorHeadline implements Component<PlanSelectorHeadlineAttrs> {
 	view({ attrs: { translation, icon } }: Vnode<PlanSelectorHeadlineAttrs>) {
 		return m(
-			".flex-center.items-center.gap-vpad-xs.mb",
+			".flex-center.items-center.gap-vpad-xs.mb-16",
 			{
 				style: {
 					background: theme.surface_container,

src/mail-app/search/SearchBarOverlay.ts

@@ -66,7 +66,7 @@ export class SearchBarOverlay implements Component<SearchBarOverlayAttrs> {
 			]),
 			searchInOurAppsElement &&
 				m(
-					".bottom.small.pt-8.pb-8.plr.text-center",
+					".bottom.small.pt-8.pb-8.plr-12.text-center",
 					{
 						// avoid closing overlay before the click event can be received
 						onmousedown: (e: MouseEvent) => e.preventDefault(),