From 395ccafd6ba4d34aba5b6402e83642da64c71e52 Mon Sep 17 00:00:00 2001
From: dwithana <dwithana@iu.edu>
Date: Wed, 17 Jul 2024 17:18:20 -0400
Subject: [PATCH] Wrap tags in playlist view page to a new line

---
 app/javascript/components/PlaylistRamp.jsx | 4 ++--
 app/javascript/components/Ramp.scss        | 4 ++++
 2 files changed, 6 insertions(+), 2 deletions(-)

diff --git a/app/javascript/components/PlaylistRamp.jsx b/app/javascript/components/PlaylistRamp.jsx
index 92d43d6d36..2efd8af22b 100644
--- a/app/javascript/components/PlaylistRamp.jsx
+++ b/app/javascript/components/PlaylistRamp.jsx
@@ -223,9 +223,9 @@ const Ramp = ({
               </div>
             </Col>
           </Row>
-          <Row>
+          <Row className="ramp--playlist-desc-tags">
             {comment && (
-              <div style={{position: 'relative'}}>
+              <div style={{ position: 'relative' }}>
                 <h4>{comment_label}</h4>
                 <div className='ramp--playlist-description' onScroll={handleScrollableDescription}>
                   <span dangerouslySetInnerHTML={{ __html: description }} />
diff --git a/app/javascript/components/Ramp.scss b/app/javascript/components/Ramp.scss
index 18b4982164..83a576c5bf 100644
--- a/app/javascript/components/Ramp.scss
+++ b/app/javascript/components/Ramp.scss
@@ -367,6 +367,10 @@
     flex-basis: auto;
     height: 70vh;
 
+    .ramp--playlist-desc-tags {
+      flex-direction: column;
+    }
+
     .ramp--playlist-description {
       overflow: auto;
       max-height: 25vh;