@Track.Artist
diff --git a/DeepDrftPublic.Client/Pages/TrackDetail.razor b/DeepDrftPublic.Client/Pages/TrackDetail.razor
index 33c0d14..03b274f 100644
--- a/DeepDrftPublic.Client/Pages/TrackDetail.razor
+++ b/DeepDrftPublic.Client/Pages/TrackDetail.razor
@@ -50,23 +50,27 @@ else if (ViewModel.Track is not null)
← All tracks
+
+
+ @track.TrackName
+ @track.Artist
+
+
+
+
+
+
+
-
-
- @track.TrackName
- @track.Artist
-
-
-
-
-
+
+
@if (hasMeta)
{
@@ -83,12 +87,14 @@ else if (ViewModel.Track is not null)
@if (track.Genre is not null)
{
-
- @track.Genre
-
+
+
+ @track.Genre
+
+
}
@if (track.ReleaseDate is not null)
diff --git a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
index 733d61f..aeb5efe 100644
--- a/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
+++ b/DeepDrftPublic/wwwroot/styles/deepdrft-styles.css
@@ -298,7 +298,7 @@ h2, h3, h4, h5, h6,
.deepdrft-track-detail-cover {
aspect-ratio: 1 / 1;
max-width: 360px;
- margin: 0 auto;
+ margin: 0 auto 2rem;
overflow: hidden;
box-shadow: 0 8px 28px color-mix(in srgb, var(--mud-palette-text-secondary) 18%, transparent);
}
@@ -321,13 +321,14 @@ h2, h3, h4, h5, h6,
display: flex;
flex-direction: column;
gap: 0.5rem;
- margin: 2rem 0 1.5rem;
}
.deepdrft-track-detail-meta {
display: flex;
- flex-direction: column;
- gap: 1rem;
+ flex-direction: row;
+ align-items: center;
+ justify-content: space-around;
+ gap: 2rem;
margin-top: 1.5rem;
}
@@ -347,3 +348,8 @@ h2, h3, h4, h5, h6,
color: inherit;
}
+@media (max-width: 419.98px) {
+ .deepdrft-track-detail-meta {
+ flex-direction: column;
+ }
+}