From 777b362dabfd1efb5bb15daac120d4ae6a444ac3 Mon Sep 17 00:00:00 2001
From: Dave DeSandro <desandrocodes@gmail.com>
Date: Sun, 15 Jan 2023 19:53:22 -0500
Subject: [PATCH] =?UTF-8?q?=F0=9F=9B=A0=20#1252=20move=20controls=20in=20D?=
 =?UTF-8?q?OM=20first?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 css/flickity.css       | 2 ++
 js/page-dots.js        | 2 +-
 js/prev-next-button.js | 2 +-
 3 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/css/flickity.css b/css/flickity.css
index 3354cc7..e018e65 100644
--- a/css/flickity.css
+++ b/css/flickity.css
@@ -95,6 +95,7 @@ https://flickity.metafizzy.co
   top: 50%;
   width: 44px;
   height: 44px;
+  z-index: 1; /* above viewport */
   border-radius: 50%;
   /* vertically center */
   transform: translateY(-50%);
@@ -127,6 +128,7 @@ https://flickity.metafizzy.co
   position: absolute;
   width: 100%;
   bottom: -25px;
+  z-index: 1; /* above viewport */
   text-align: center;
   display: flex;
   justify-content: center;
diff --git a/js/page-dots.js b/js/page-dots.js
index 5d86ea3..672c18c 100644
--- a/js/page-dots.js
+++ b/js/page-dots.js
@@ -100,7 +100,7 @@ proto.activatePageDots = function() {
   this.pageDots.setDots( this.slides.length );
   this.focusableElems.push( ...this.pageDots.dots );
   this.pageDots.holder.addEventListener( 'click', this.handlePageDotsClick );
-  this.element.append( this.pageDots.holder );
+  this.element.insertBefore( this.pageDots.holder, this.viewport );
 };
 
 proto.onPageDotsClick = function( event ) {
diff --git a/js/prev-next-button.js b/js/prev-next-button.js
index 646a119..22e8dd6 100644
--- a/js/prev-next-button.js
+++ b/js/prev-next-button.js
@@ -148,7 +148,7 @@ proto.updatePrevNextButton = function( button, disabledIndex ) {
 proto.activatePrevNextButtons = function() {
   this.prevButton.element.addEventListener( 'click', this.handlePrevButtonClick );
   this.nextButton.element.addEventListener( 'click', this.handleNextButtonClick );
-  this.element.append( this.prevButton.element, this.nextButton.element );
+  this.element.prepend( this.prevButton.element, this.nextButton.element );
   this.on( 'deactivate', this.deactivatePrevNextButtons );
 };