From 380320179c3958f4e097619f5622b3753a6e8bd0 Mon Sep 17 00:00:00 2001
From: Asaad Mahmood <asaadmahmood@users.noreply.github.com>
Date: Tue, 8 Mar 2022 23:53:09 +0500
Subject: [PATCH] GH-2330 - Responsive UI update on template picker (#2486)

* GH-2330 - Responsive UI update on template picker

* Updating css
---
 .../boardTemplateSelector.scss                | 56 ++++++++++++-------
 1 file changed, 35 insertions(+), 21 deletions(-)

diff --git a/webapp/src/components/boardTemplateSelector/boardTemplateSelector.scss b/webapp/src/components/boardTemplateSelector/boardTemplateSelector.scss
index 5c5b20dd2..33a3fa58a 100644
--- a/webapp/src/components/boardTemplateSelector/boardTemplateSelector.scss
+++ b/webapp/src/components/boardTemplateSelector/boardTemplateSelector.scss
@@ -36,9 +36,13 @@
     .templates {
         display: flex;
         width: 100%;
-        padding: 0 10%;
+        padding: 0 32px;
         justify-content: center;
 
+        @media (min-width: 768px) {
+            padding: 0 10%;
+        }
+
         .templates-list {
             margin-right: 32px;
             width: 300px;
@@ -63,32 +67,42 @@
                 }
             }
         }
+    }
 
-        .template-preview-box {
-            position: relative;
-            background-color: rgb(var(--center-channel-bg-rgb));
-            box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
-                rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;
-            border-radius: var(--modal-rad);
-            overflow: hidden;
+    .template-preview-box {
+        position: relative;
+        background-color: rgb(var(--center-channel-bg-rgb));
+        box-shadow: rgba(var(--center-channel-color-rgb), 0.1) 0 0 0 1px,
+            rgba(var(--center-channel-color-rgb), 0.1) 0 2px 4px;
+        border-radius: var(--modal-rad);
+        overflow: hidden;
+        width: 100%;
+        max-width: 1000px;
+
+        .buttons {
+            display: flex;
+            position: absolute;
+            bottom: 32px;
             width: 100%;
-            max-width: 1000px;
+            justify-content: center;
+            flex-direction: column;
+            padding: 0 24px;
 
-            .buttons {
-                display: flex;
-                position: absolute;
-                bottom: 32px;
-                width: 100%;
-                justify-content: center;
+            @media (min-width: 1024px) {
+                flex-direction: row;
             }
+        }
 
-            .empty-board {
-                background-color: rgb(var(--center-channel-bg-rgb));
-            }
+        .empty-board {
+            background-color: rgb(var(--center-channel-bg-rgb));
+        }
 
-            .Button {
-                &:first-child {
-                    margin-right: 16px;
+        .Button {
+            &:first-child {
+                margin-bottom: 16px;
+
+                @media (min-width: 1024px) {
+                    margin: 0 16px 0 0;
                 }
             }
         }