From 1f1f857847cd9ffa0fdd5001c0dd72f06ba903c0 Mon Sep 17 00:00:00 2001
From: Mohammad Amoush <mohammad_amoush@brown.edu>
Date: Wed, 17 Jul 2019 20:26:00 -0400
Subject: Titles alligned

---
 src/client/apis/youtube/YoutubeBox.scss | 6 ++++++
 src/client/apis/youtube/YoutubeBox.tsx  | 2 +-
 2 files changed, 7 insertions(+), 1 deletion(-)

(limited to 'src')

diff --git a/src/client/apis/youtube/YoutubeBox.scss b/src/client/apis/youtube/YoutubeBox.scss
index e6ccfea90..23f264b95 100644
--- a/src/client/apis/youtube/YoutubeBox.scss
+++ b/src/client/apis/youtube/YoutubeBox.scss
@@ -5,9 +5,15 @@ ul {
 
 li {
     margin: 4px;
+    display: inline-flex;
 }
 
 li:hover {
     cursor: pointer;
     opacity: 0.8;
+}
+
+.videoTitle {
+    margin-left: 4px;
+    font-family: Arial, Helvetica, sans-serif;
 }
\ No newline at end of file
diff --git a/src/client/apis/youtube/YoutubeBox.tsx b/src/client/apis/youtube/YoutubeBox.tsx
index e7913da9e..d94f3785c 100644
--- a/src/client/apis/youtube/YoutubeBox.tsx
+++ b/src/client/apis/youtube/YoutubeBox.tsx
@@ -81,7 +81,7 @@ export class YoutubeBox extends React.Component<FieldViewProps> {
             return <ul>
                 {this.searchResults.map((video) => {
                     let filteredTitle = this.filterYoutubeTitleResult(video.snippet.title);
-                    return <li onClick={() => this.embedVideoOnClick(video.id.videoId, filteredTitle)} key={video.id.videoId}><img src={video.snippet.thumbnails.medium.url} />  {filteredTitle}</li>;
+                    return <li onClick={() => this.embedVideoOnClick(video.id.videoId, filteredTitle)} key={video.id.videoId}><img src={video.snippet.thumbnails.medium.url} /> <span className="videoTitle">{filteredTitle}</span>  </li>;
                 })}
             </ul>;
             // } else if (this.videoClicked) {
-- 
cgit v1.2.3-70-g09d2