From 1bdeca9b2c4487a69bddc3c2bf1a91cd232d8db9 Mon Sep 17 00:00:00 2001
From: Oskar Rough <oskar@rough.dk>
Date: Sun, 21 Apr 2024 10:54:27 +0200
Subject: [PATCH] Wrap track title+desc

---
 public/themes/jellybeans.css | 10 ++++++----
 src/components/r4-track.js   |  6 ++++--
 2 files changed, 10 insertions(+), 6 deletions(-)

diff --git a/public/themes/jellybeans.css b/public/themes/jellybeans.css
index dc27cb88..bd0f97ef 100644
--- a/public/themes/jellybeans.css
+++ b/public/themes/jellybeans.css
@@ -322,11 +322,14 @@ r4-page-explore r4-page-main > r4-list {
 	align-items: stretch;
 }
 
-r4-page-channel {
-	r4-channel-card {
-		text-align: center;
+@media (max-width: 700px) {
+	r4-page-channel {
+		r4-channel-card {
+			text-align: center;
+		}
 	}
 }
+
 r4-page-channel r4-page-header r4-channel-name {
 	font-size: 2rem;
 }
@@ -401,4 +404,3 @@ r4-page-channel  {
 		padding-right: 0;
 	}
 }
-
diff --git a/src/components/r4-track.js b/src/components/r4-track.js
index fd7aefd4..4a62f604 100644
--- a/src/components/r4-track.js
+++ b/src/components/r4-track.js
@@ -89,8 +89,10 @@ export default class R4Track extends LitElement {
 
 		return html`
 			<r4-button-play .channel=${this.channel} .track=${this.track}></r4-button-play>
-			<r4-track-title>${this.renderTitle()}</r4-track-title>
-			${this.track.description ? this.renderDescription() : null}
+			<r4-track-body>
+				<r4-track-title>${this.renderTitle()}</r4-track-title>
+				${this.track.description ? this.renderDescription() : null}
+			</r4-track-body>
 			${this.track.discogs_url ? this.renderDiscogsUrl() : null}
 			${this.track?.DISABLEDtags?.length ? this.renderTags() : null}
 			${this.track?.DISABLEDmentions?.length ? this.renderMentions() : null} ${this.renderMenu()}