From 1960630096dfa7de707ee70df1da72e6014ec605 Mon Sep 17 00:00:00 2001
From: Dariusz Szut <dew326@gmail.com>
Date: Tue, 11 Apr 2017 09:24:34 +0200
Subject: [PATCH] EZP-26999: Misaligned elements in content-on-the-fly when on
 smaller screens

---
 .../css/theme/views/discovery-create.css      |  4 ++
 .../public/css/views/content-creation.css     |  5 ++
 .../public/css/views/discovery-create.css     |  7 +--
 .../public/templates/content-creation.hbt     | 60 ++++++++++---------
 4 files changed, 41 insertions(+), 35 deletions(-)

diff --git a/bundle/Resources/public/css/theme/views/discovery-create.css b/bundle/Resources/public/css/theme/views/discovery-create.css
index 8fb3b2e..eae8904 100644
--- a/bundle/Resources/public/css/theme/views/discovery-create.css
+++ b/bundle/Resources/public/css/theme/views/discovery-create.css
@@ -9,6 +9,10 @@
     border-radius: 3px;
 }
 
+.ez-view-universaldiscoverycreateview .cof-pagination {
+    overflow: auto;
+}
+
 @media (max-width: 1400px) {
     .ez-view-universaldiscoverycreateview .ez-selection-filter-item-selected:before {
         left: 46.8rem;
diff --git a/bundle/Resources/public/css/views/content-creation.css b/bundle/Resources/public/css/views/content-creation.css
index 416f409..1562dff 100644
--- a/bundle/Resources/public/css/views/content-creation.css
+++ b/bundle/Resources/public/css/views/content-creation.css
@@ -10,6 +10,11 @@
     box-sizing: border-box;
 }
 
+.ez-view-contentcreationview .cof-content-creation__wrapper {
+    overflow: auto;
+    height: 100%
+}
+
 .ez-view-contentcreationview.on-page-two .cof-content-creation__page-one,
 .ez-view-contentcreationview.on-page-two .cof-content-creation__page-two {
     transform: translateX(-100%);
diff --git a/bundle/Resources/public/css/views/discovery-create.css b/bundle/Resources/public/css/views/discovery-create.css
index 93d4d8e..4e62eda 100644
--- a/bundle/Resources/public/css/views/discovery-create.css
+++ b/bundle/Resources/public/css/views/discovery-create.css
@@ -3,10 +3,6 @@
  * For full copyright and license information view LICENSE file distributed with this source code.
  */
 
-.ez-view-universaldiscoverycreateview .ez-view-contentcreationview {
-    margin: .7rem 0 0 0;
-}
-
 @media (max-width: 1400px) {
     .ez-view-universaldiscoverycreateview {
         position: relative;
@@ -20,8 +16,7 @@
 
     .ez-view-universaldiscoverycreateview .ez-view-contentcreationview {
         height: 100%;
-        margin: .5rem auto;
-        padding: 0 2rem;
+        padding: 0 2rem 1rem;
     }
 
     .ez-view-universaldiscoverycreateview .cof-content-creation__page-one,
diff --git a/bundle/Resources/public/templates/content-creation.hbt b/bundle/Resources/public/templates/content-creation.hbt
index 1c559e2..80d7d66 100644
--- a/bundle/Resources/public/templates/content-creation.hbt
+++ b/bundle/Resources/public/templates/content-creation.hbt
@@ -1,33 +1,35 @@
-<div class="cof-content-creation__content">
-    <div class="cof-content-creation__page-one">
-        <div class="cof-content-creation__header">
-            <ul class="cof-content-creation__header__list">
-                <li class="cof-content-creation__header__text cof-content-creation__header__text--highlighted">Choose a Content Type</li>
-                <li class="cof-content-creation__header__text">Select Location</li>
-            </ul>
+<div class="cof-content-creation__wrapper">
+    <div class="cof-content-creation__content">
+        <div class="cof-content-creation__page-one">
+            <div class="cof-content-creation__header">
+                <ul class="cof-content-creation__header__list">
+                    <li class="cof-content-creation__header__text cof-content-creation__header__text--highlighted">Choose a Content Type</li>
+                    <li class="cof-content-creation__header__text">Select Location</li>
+                </ul>
+            </div>
+            <div class="cof-content-creation__content-type-selector"></div>
         </div>
-        <div class="cof-content-creation__content-type-selector"></div>
-    </div>
-    <div class="cof-content-creation__page-two">
-        <div class="cof-content-creation__header">
-            <ul class="cof-content-creation__header__list">
-                <li class="cof-content-creation__header__text">Choose a Content Type
-                    <button class="cof-btn cof-btn--rounded cof-btn--change-content-type"></button>
-                </li>
-                <li class="cof-content-creation__header__text cof-content-creation__header__text--highlighted">Select Location</li>
-            </ul>
+        <div class="cof-content-creation__page-two">
+            <div class="cof-content-creation__header">
+                <ul class="cof-content-creation__header__list">
+                    <li class="cof-content-creation__header__text">Choose a Content Type
+                        <button class="cof-btn cof-btn--rounded cof-btn--change-content-type"></button>
+                    </li>
+                    <li class="cof-content-creation__header__text cof-content-creation__header__text--highlighted">Select Location</li>
+                </ul>
+            </div>
+            <button class="cof-btn cof-btn--big cof-btn--rounded cof-btn--edit-location">Select Location</button>
+            <span class="cof-content-creation__separator">or</span>
+            <button class="cof-btn cof-btn--big cof-btn--select">Select from Suggested Locations</button>
+            <ul class="cof-content-creation__suggested-locations cof-content-creation__suggested-locations--is-hidden"></ul>
+            <h4 class="cof-content-creation__location__title">Selected Location:</h4>
+            <span class="cof-content-creation__location"></span>
         </div>
-        <button class="cof-btn cof-btn--big cof-btn--rounded cof-btn--edit-location">Select Location</button>
-        <span class="cof-content-creation__separator">or</span>
-        <button class="cof-btn cof-btn--big cof-btn--select">Select from Suggested Locations</button>
-        <ul class="cof-content-creation__suggested-locations cof-content-creation__suggested-locations--is-hidden"></ul>
-        <h4 class="cof-content-creation__location__title">Selected Location:</h4>
-        <span class="cof-content-creation__location"></span>
     </div>
+    <div class="cof-pagination">
+        <button class="cof-btn cof-btn--rounded cof-btn--back">Back</button>
+        <button class="cof-btn cof-btn--rounded cof-btn--next cof-btn--disabled">Next</button>
+        <button class="cof-btn cof-btn--rounded cof-btn--finish cof-btn--disabled">{{finishBtnText}}</button>
+    </div>
+    <div class="cof-content-creation__creator cof-is-hidden"></div>
 </div>
-<div class="cof-pagination">
-    <button class="cof-btn cof-btn--rounded cof-btn--back">Back</button>
-    <button class="cof-btn cof-btn--rounded cof-btn--next cof-btn--disabled">Next</button>
-    <button class="cof-btn cof-btn--rounded cof-btn--finish cof-btn--disabled">{{finishBtnText}}</button>
-</div>
-<div class="cof-content-creation__creator cof-is-hidden"></div>