From 2bf633e1277ff94fff9762550f820d8dcec110f7 Mon Sep 17 00:00:00 2001
From: mrjvs <jellevs@gmail.com>
Date: Sun, 22 Aug 2021 21:58:07 +0200
Subject: [PATCH] layout shift fix + centered chevron

---
 public/assets/css/dropdown.css   | 16 ++++++++++++++--
 views/partials/header.handlebars | 10 +++++-----
 2 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/public/assets/css/dropdown.css b/public/assets/css/dropdown.css
index edf782a..99dce10 100644
--- a/public/assets/css/dropdown.css
+++ b/public/assets/css/dropdown.css
@@ -36,22 +36,34 @@
 }
 
 .selected-locale::after {
-  content: url("/assets/icons/down-arrow.svg");
+  content: "";
+  width: 1.2rem;
+  height: 1.2rem;
+  background: url("/assets/icons/down-arrow.svg");
   position: absolute;
   right: 15px;
   top: 50%;
   transition: transform 150ms;
   transform: translateY(-50%);
+  background-size: contain;
+  background-position: center;
 }
 
 .select-box .option .item {
   color: #afb5dd;
 }
 
+.select-box .lang {
+  width: 1.3rem;
+  height: 1rem;
+  margin-right: .2rem;
+  display: inline-block;
+}
+
 .select-box .options-container.active {
   max-height: 240px;
   opacity: 1;
-  overflow-y: scroll;
+  overflow-y: auto;
 }
 
 .select-box .options-container.active + .selected-locale::after {
diff --git a/views/partials/header.handlebars b/views/partials/header.handlebars
index fbfbd4d..a032235 100644
--- a/views/partials/header.handlebars
+++ b/views/partials/header.handlebars
@@ -36,32 +36,32 @@
 			<div class="option">
 				<input type="radio" class="radio" id="en-US" name="category" />
 				<label for="en-US">
-					<div class="item">🇺🇸 English</div>
+					<div class="item"><span class="lang">🇺🇸</span>English</div>
 				</label>
 			</div>
 
 			<div class="option">
 				<input type="radio" class="radio" id="es-ES" name="category" />
 				<label for="es-ES">
-					<div class="item">🇪🇸 Español</div>
+					<div class="item"><span class="lang">🇪🇸</span>Español</div>
 				</label>
 			</div>
 
 			<div class="option">
 				<input type="radio" class="radio" id="it-IT" name="category" />
 				<label for="it-IT">
-					<div class="item">🇮🇹 Italiano</div>
+					<div class="item"><span class="lang">🇮🇹</span>Italiano</div>
 				</label>
 			</div>
 			<div class="option">
 				<input type="radio" class="radio" id="ru-RU" name="category" />
 				<label for="ru-RU">
-					<div class="item">🇷🇺 Pусский</div>
+					<div class="item"><span class="lang">🇷🇺</span>Pусский</div>
 				</label>
 			</div>
 		</div>
 		<div class="selected-locale">
-			<div class="item">English</div>
+			<div class="item"><span class="lang"></span></div>
 		</div>
 	</div>