Wrap track title+desc

radio4000 · Apr 21, 2024 · 1bdeca9 · 1bdeca9
1 parent d2d6301
commit 1bdeca9
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 6 deletions.
diff --git 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
@@ -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()}