From 5591ece7bc6fa9619787f1f50a4e1f8573f91deb Mon Sep 17 00:00:00 2001
From: Geomitron <22552797+Geomitron@users.noreply.github.com>
Date: Thu, 28 May 2020 16:16:04 -0400
Subject: [PATCH] Improved chart dropdown visibility

---
 .../chart-sidebar/chart-sidebar.component.html      | 13 ++++---------
 .../chart-sidebar/chart-sidebar.component.scss      | 11 +++++++++++
 2 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/app/components/browse/chart-sidebar/chart-sidebar.component.html b/src/app/components/browse/chart-sidebar/chart-sidebar.component.html
index cc785cf..de4a54a 100644
--- a/src/app/components/browse/chart-sidebar/chart-sidebar.component.html
+++ b/src/app/components/browse/chart-sidebar/chart-sidebar.component.html
@@ -2,16 +2,11 @@
   <div class="ui placeholder" [ngClass]="{'placeholder': albumArtSrc == ''}">
     <img class="ui square image" [src]="albumArtSrc">
   </div>
-  <div *ngIf="charts.length > 1" id="chartDropdown" class="ui fluid selection dropdown">
+  <div *ngIf="charts.length > 1" id="chartDropdown" class="ui fluid right labeled icon dropdown button">
     <input type="hidden" name="Chart">
-    <i class="dropdown icon"></i>
-    <div class="default text">Chart</div>
-    <div class="menu">
-      <div class="item" data-value="1">
-        <h4 class="ui header">Chart1</h4>
-        <div>row2</div>
-      </div>
-      <div class="item" data-value="0">Chart 2</div>
+    <i id="chartDropdownIcon" class="dropdown icon"></i>
+    <div class="default text"></div>
+    <div id="chartDropdownMenu" class="menu">
     </div>
   </div>
   <div id="textPanel" class="content">
diff --git a/src/app/components/browse/chart-sidebar/chart-sidebar.component.scss b/src/app/components/browse/chart-sidebar/chart-sidebar.component.scss
index a237871..f464cad 100644
--- a/src/app/components/browse/chart-sidebar/chart-sidebar.component.scss
+++ b/src/app/components/browse/chart-sidebar/chart-sidebar.component.scss
@@ -13,4 +13,15 @@
 
 #versionDropdown {
   max-width: min-content;
+}
+
+::ng-deep #chartDropdownMenu > div.item {
+  white-space: normal;
+  word-break: break-word;
+}
+
+#chartDropdownIcon {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
 }
\ No newline at end of file