From d7b8db93874a429e3b581a0c8ef2f56d5fc6447a Mon Sep 17 00:00:00 2001
From: Tessa Kelly <tessakkelly@gmail.com>
Date: Tue, 7 Dec 2021 10:58:32 -0800
Subject: [PATCH] Left-align the premium checkboxes

---
 src/Nri/Ui/PremiumCheckbox/V7.elm | 17 ++++++++++++++---
 1 file changed, 14 insertions(+), 3 deletions(-)

diff --git a/src/Nri/Ui/PremiumCheckbox/V7.elm b/src/Nri/Ui/PremiumCheckbox/V7.elm
index 9f8f5158..c21d67c8 100644
--- a/src/Nri/Ui/PremiumCheckbox/V7.elm
+++ b/src/Nri/Ui/PremiumCheckbox/V7.elm
@@ -50,13 +50,14 @@ view config =
         [ if config.isPremium then
             premiumFlag
                 |> Svg.withLabel "Premium"
-                |> Svg.withWidth (Css.px 25)
+                |> Svg.withWidth (Css.px iconWidth)
                 |> Svg.withHeight (Css.px 30)
-                |> Svg.withCss [ Css.marginRight (Css.px 8) ]
+                |> Svg.withCss [ Css.marginRight (Css.px iconRightMargin) ]
                 |> Svg.toHtml
 
           else
-            Html.text ""
+            -- left-align the checkbox with checkboxes that _do_ have the premium pennant
+            Html.div [ css [ Css.width (Css.px (iconWidth + iconRightMargin)) ] ] []
         , Checkbox.viewWithLabel
             { identifier = config.id
             , label = config.label
@@ -76,3 +77,13 @@ view config =
                     Checkbox.Square
             }
         ]
+
+
+iconWidth : Float
+iconWidth =
+    25
+
+
+iconRightMargin : Float
+iconRightMargin =
+    8