From 1a874b184db3d5221d5afeddf68f0c51ed8f8afb Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Fri, 19 Nov 2021 02:02:54 +0100
Subject: [PATCH] Fix missing left margin in CongratsPage (#1498)

---
 ts/congrats/CongratsPage.svelte | 59 +++++++++++++++++----------------
 1 file changed, 31 insertions(+), 28 deletions(-)

diff --git a/ts/congrats/CongratsPage.svelte b/ts/congrats/CongratsPage.svelte
index 044786cd6..c6b218a68 100644
--- a/ts/congrats/CongratsPage.svelte
+++ b/ts/congrats/CongratsPage.svelte
@@ -4,6 +4,7 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import Container from "../components/Container.svelte";
+    import Col from "../components/Col.svelte";
     import type { Scheduler } from "../lib/proto";
     import { buildNextLearnMsg } from "./lib";
     import { bridgeLink } from "../lib/bridgecommand";
@@ -25,40 +26,42 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
     });
 </script>
 
-<Container class="d-flex justify-content-center pt-3">
-    <div class="congrats">
-        <h3>{congrats}</h3>
+<Container --gutter-block="1rem" --gutter-inline="2px" breakpoint="sm">
+    <Col --col-justify="center">
+        <div class="congrats">
+            <h3>{congrats}</h3>
 
-        <p>{nextLearnMsg}</p>
+            <p>{nextLearnMsg}</p>
 
-        {#if info.reviewRemaining}
-            <p>{today_reviews}</p>
-        {/if}
-
-        {#if info.newRemaining}
-            <p>{today_new}</p>
-        {/if}
-
-        {#if info.bridgeCommandsSupported}
-            {#if info.haveSchedBuried || info.haveUserBuried}
-                <p>
-                    {@html buriedMsg}
-                </p>
+            {#if info.reviewRemaining}
+                <p>{today_reviews}</p>
             {/if}
 
-            {#if !info.isFilteredDeck}
-                <p>
-                    {@html customStudyMsg}
-                </p>
+            {#if info.newRemaining}
+                <p>{today_new}</p>
             {/if}
-        {/if}
 
-        {#if info.deckDescription}
-            <div class="description">
-                {@html info.deckDescription}
-            </div>
-        {/if}
-    </div>
+            {#if info.bridgeCommandsSupported}
+                {#if info.haveSchedBuried || info.haveUserBuried}
+                    <p>
+                        {@html buriedMsg}
+                    </p>
+                {/if}
+
+                {#if !info.isFilteredDeck}
+                    <p>
+                        {@html customStudyMsg}
+                    </p>
+                {/if}
+            {/if}
+
+            {#if info.deckDescription}
+                <div class="description">
+                    {@html info.deckDescription}
+                </div>
+            {/if}
+        </div>
+    </Col>
 </Container>
 
 <style lang="scss">