Decrease padding in plan cards

This makes the `?` icon not drop to a new line on Tony's device, but also in general gives the text some more room on smaller screens.
mozilla · Dec 8, 2023 · e0c5ad7 · e0c5ad7
1 parent 0c5dc10
commit e0c5ad7
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/src/app/(proper_react)/redesign/(public)/PlansTable.module.scss b/src/app/(proper_react)/redesign/(public)/PlansTable.module.scss
@@ -227,7 +227,7 @@
     gap: $spacing-lg;
     background-color: $color-white;
     border-radius: $border-radius-md;
-    padding: $spacing-2xl $spacing-lg;
+    padding: $spacing-2xl $spacing-md;
 
     hr {
       border-style: none;
@@ -292,7 +292,7 @@
       display: flex;
       flex-direction: column;
       gap: $spacing-md;
-      padding-inline: $spacing-md;
+      padding-inline: $spacing-sm;
 
       h4 {
         font: $text-title-3xs;
@@ -311,7 +311,7 @@
         li {
           display: flex;
           align-items: start;
-          gap: $spacing-sm;
+          gap: $spacing-xs;
 
           .inclusionIcon {
             margin: $spacing-xs;

diff --git a/src/app/(proper_react)/redesign/(public)/PlansTable.tsx b/src/app/(proper_react)/redesign/(public)/PlansTable.tsx
@@ -227,6 +227,7 @@ export const PlansTable = (props: Props) => {
                       elems: { b: <b /> },
                     },
                   )}
+                  &nbsp;
                   <InfoPopover>
                     <PopoverContent>
                       {l10n.getString(
@@ -254,6 +255,7 @@ export const PlansTable = (props: Props) => {
                       elems: { b: <b /> },
                     },
                   )}
+                  &nbsp;
                   <InfoPopover>
                     <PopoverContent>
                       {l10n.getString(
@@ -399,6 +401,7 @@ export const PlansTable = (props: Props) => {
                       elems: { b: <b /> },
                     },
                   )}
+                  &nbsp;
                   <InfoPopover>
                     <PopoverContent>
                       {l10n.getString(
@@ -426,6 +429,7 @@ export const PlansTable = (props: Props) => {
                       elems: { b: <b /> },
                     },
                   )}
+                  &nbsp;
                   <InfoPopover>
                     <PopoverContent>
                       {l10n.getString(
@@ -539,6 +543,7 @@ export const PlansTable = (props: Props) => {
               {l10n.getString(
                 "landing-premium-plans-table-feature-removal-free",
               )}
+              &nbsp;
               <InfoPopover>
                 <PopoverContent>
                   {l10n.getString(
@@ -551,6 +556,7 @@ export const PlansTable = (props: Props) => {
               {l10n.getString(
                 "landing-premium-plans-table-feature-removal-plus",
               )}
+              &nbsp;
               <InfoPopover>
                 <PopoverContent>
                   {l10n.getString(