From 80e840ff87652cd578c84534ccd2097919545c60 Mon Sep 17 00:00:00 2001
From: Nirmal Kumar <nirmalkc@gmail.com>
Date: Sun, 17 Apr 2022 13:17:27 +0530
Subject: [PATCH] fixing the play details header wrapping issue in all view
 ports

---
 src/common/playlists/PlayHeaderInfo.jsx | 16 +++--
 src/common/playlists/playlist.css       | 96 ++++++++++++++++++++-----
 2 files changed, 89 insertions(+), 23 deletions(-)

diff --git a/src/common/playlists/PlayHeaderInfo.jsx b/src/common/playlists/PlayHeaderInfo.jsx
index ec63a913a8..14ce69846d 100644
--- a/src/common/playlists/PlayHeaderInfo.jsx
+++ b/src/common/playlists/PlayHeaderInfo.jsx
@@ -80,16 +80,22 @@ const PlayHeaderInfo = ({ play }) => {
    
   return (
     <div className="header-leftcol">
-      <div className="header-primary">
+      <div className="header-leftcol-action">
         <Link to="/plays" className="action">
           <IoMdArrowBack className="icon" size="24px" />
           <span className="sr-only">Back</span>
         </Link>
-        <h3 className="header-title">{play.name}</h3>
-        <LevelBadge level={play.level} /> { play.tags && <Tags tags={play.tags.split(',')} /> }
       </div>
-      <div className="header-secondary">
-        { play.github && <Author github={play.github} /> }
+      <div className="header-leftcol-contents">
+        <div className="header-primary">
+          <h3 className="header-title">{play.name}</h3>
+          <div className="header-title-tags">
+            <LevelBadge level={play.level} /> { play.tags && <Tags tags={play.tags.split(',')} /> }
+          </div>
+        </div>
+        <div className="header-secondary">
+          { play.github && <Author github={play.github} /> }
+        </div>
       </div>
     </div>
   );
diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css
index 9044f95356..a465ef4f89 100644
--- a/src/common/playlists/playlist.css
+++ b/src/common/playlists/playlist.css
@@ -204,6 +204,44 @@
 }
 
 .play-details .play-details-header .header-leftcol {
+    display: flex;
+    flex-direction: row;
+}
+
+.play-details .play-details-header .header-leftcol-action {
+    padding-top: .3rem;
+    padding-right: .3rem;
+}
+
+.play-details .play-details-header .header-leftcol-action .action {
+    display: block;
+}
+
+.play-details .play-details-header .header-leftcol-action .action .icon {
+    fill: rgba(var(--color-neutral-90-rgb), 0.4);
+}
+
+.play-details .play-details-header .header-leftcol-action .action:hover .icon,
+.play-details .play-details-header .header-leftcol-action .action:focus .icon {
+    fill: rgba(var(--color-neutral-90-rgb), 0.8);
+}
+
+@media screen and (max-width: 1172px) {
+    .play-details .play-details-header .header-leftcol-action {
+        padding-top: .16rem;
+    }
+}
+
+@media screen and (max-width: 768px) {
+    .play-details .play-details-header .header-leftcol-action {
+        padding-top: .06rem;
+    }
+    .play-details .play-details-header .header-leftcol-action svg {
+        width: 20px;
+    }
+}
+
+.play-details .play-details-header .header-leftcol-contents {
     display: flex;
     flex-direction: column;
     align-items: flex-start;
@@ -214,6 +252,10 @@
     .play-details .play-details-header .header-leftcol {
         grid-gap: .3rem;
     }
+
+    .play-details .play-details-header .header-leftcol-action {
+        padding-top: .1rem;
+    }
 }
 
 .play-details .play-details-header .header-rightcol {
@@ -224,35 +266,33 @@
     padding-top: 0.4rem;
 }
 
+.play-details .play-details-header .header-primary {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    grid-gap: .2rem .6rem;
+    flex-wrap: wrap;
+}
+
 @media screen and (max-width: 480px) {
     .play-details .play-details-header .header-rightcol {
+        flex-direction: row-reverse;
         align-items: flex-start;
         border-top: solid 1px var(--color-neutral-30);
         margin-top: 0.4rem;
         padding-top: 0.4rem;
     }
-}
 
-.play-details .play-details-header .header-primary {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    grid-gap: .2rem .6rem;
-    flex-wrap: wrap;
+    .play-details .play-details-header .header-rightcol .header-desc {
+        text-align: left;
+        margin-right: 1rem;
+        line-height: var(--lh-rg);
+    }
 }
 
-.play-details .play-details-header .header-primary .action {
-    margin-top: 0.4rem;
-}
 
-.play-details .play-details-header .header-primary .action .icon {
-    fill: rgba(var(--color-neutral-90-rgb), 0.4);
-}
 
-.play-details .play-details-header .header-primary .action:hover .icon,
-.play-details .play-details-header .header-primary .action:focus .icon {
-    fill: rgba(var(--color-neutral-90-rgb), 0.8);
-}
+
 
 .play-level {
     display: inline-flex;
@@ -322,7 +362,12 @@
     flex-wrap: wrap;
     grid-gap: .2rem .6rem;
     align-items: center;
-    margin-left: calc(24px + .8rem);
+}
+
+@media screen and (max-width: 768px) {
+    .play-details .play-details-header .header-secondary {
+        margin-top: .3rem;
+    }
 }
 
 .play-details .play-details-header .list-tags {
@@ -363,6 +408,21 @@
     margin: 0;
     font-size: var(--fs-xs);
     color: var(--color-neutral-60);
+    text-align: right;
+}
+
+.play-details .play-details-header .header-title-tags {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: wrap;
+    align-items: center;
+    grid-gap: .6rem;
+}
+
+@media screen and (max-width:768px) {
+    .play-details .play-details-header .header-title-tags {
+        grid-gap: .3rem;
+    }
 }
 
 .play-details .play-details-header .header-actions {