From 3b18d79b15ce472a5633449533cf068cb1f922d1 Mon Sep 17 00:00:00 2001
From: rramiachraf <51409801+rramiachraf@users.noreply.github.com>
Date: Mon, 4 Mar 2024 19:18:32 +0100
Subject: [PATCH] fix: improve styling

---
 static/style.css   |  6 ++++--
 views/lyrics.templ | 32 ++++++++++++++++++--------------
 2 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/static/style.css b/static/style.css
index 8a9961d..2486873 100644
--- a/static/style.css
+++ b/static/style.css
@@ -114,9 +114,10 @@ a {
 	display: grid;
 	padding: 5rem 0;
 	grid-template-columns: 24rem 1fr 24rem;
-	max-width: 1024px;
-	margin: auto;
+	width: 1024px;
+	margin: 0 auto;
 	gap: 4rem;
+	flex: 1;
 }
 
 #credits {
@@ -230,6 +231,7 @@ a {
 		display: flex;
 		flex-direction: column;
 		gap: 3rem;
+		width: calc(100vw - 4rem);;
 	}
 
 	#metadata {
diff --git a/views/lyrics.templ b/views/lyrics.templ
index 3a96454..d03256b 100644
--- a/views/lyrics.templ
+++ b/views/lyrics.templ
@@ -19,20 +19,24 @@ templ LyricsPage(s data.Song) {
 				@templ.Raw(s.Lyrics)
 			</div>
 			<div id="info">
-				<div id="about">
-					<h1 id="title">About</h1>
-					<p class="hidden" id="full_about">{ s.About[0] }</p>
-					<p id="summary">{ s.About[1] }</p>
-				</div>
-				<div id="credits">
-					<h1 id="title">Credits</h1>
-					for key, val := range s.Credits {
-						<details>
-							<summary>{ key }</summary>
-							<p>{ val }</p>
-						</details>
-					}
-				</div>
+				if s.About[0] != "" {
+					<div id="about">
+						<h1 id="title">About</h1>
+						<p class="hidden" id="full_about">{ s.About[0] }</p>
+						<p id="summary">{ s.About[1] }</p>
+					</div>
+				}
+				if len(s.Credits) > 0 {
+					<div id="credits">
+						<h1 id="title">Credits</h1>
+						for key, val := range s.Credits {
+							<details>
+								<summary>{ key }</summary>
+								<p>{ val }</p>
+							</details>
+						}
+					</div>
+				}
 				if s.Album.Name != "" {
 					<div id="lyrics-album-container">
 						<h1 id="title">{ s.Album.Name }</h1>