From 0ec7b458ccf29bed07e5cd53ac407c117a29f2b2 Mon Sep 17 00:00:00 2001
From: Gabe Farrell <90876006+gabehf@users.noreply.github.com>
Date: Wed, 4 Feb 2026 13:41:12 -0500
Subject: [PATCH] ui: tweaks and fixes (#194)

* reduce min width of top chart on mobile

* adjust error page style

* adjust h1 line height
---
 client/app/app.css                       | 3 +++
 client/app/root.tsx                      | 8 ++++----
 client/app/routes/Charts/AlbumChart.tsx  | 4 ++--
 client/app/routes/Charts/ArtistChart.tsx | 4 ++--
 client/app/routes/Charts/TrackChart.tsx  | 4 ++--
 5 files changed, 13 insertions(+), 10 deletions(-)

diff --git a/client/app/app.css b/client/app/app.css
index bc60042..15cfbc0 100644
--- a/client/app/app.css
+++ b/client/app/app.css
@@ -58,6 +58,7 @@
   --header-sm: 16px;
   --header-xl-weight: 600;
   --header-weight: 600;
+  --header-line-height: 3rem;
 }
 
 @media (min-width: 60rem) {
@@ -68,6 +69,7 @@
     --header-sm: 16px;
     --header-xl-weight: 600;
     --header-weight: 600;
+    --header-line-height: 1.3em;
   }
 }
 
@@ -98,6 +100,7 @@ h1 {
   font-family: "League Spartan";
   font-weight: var(--header-weight);
   font-size: var(--header-xl);
+  line-height: var(--header-line-height);
 }
 h2 {
   font-family: "League Spartan";
diff --git a/client/app/root.tsx b/client/app/root.tsx
index 077d09e..cb0723f 100644
--- a/client/app/root.tsx
+++ b/client/app/root.tsx
@@ -116,12 +116,12 @@ export function ErrorBoundary() {
     <AppProvider>
       <ThemeProvider>
         <title>{title}</title>
+        <Sidebar />
         <div className="flex">
-          <Sidebar />
           <div className="w-full flex flex-col">
-            <main className="pt-16 p-4 container mx-auto flex-grow">
-              <div className="flex gap-4 items-end">
-                <img className="w-[200px] rounded" src="../yuu.jpg" />
+            <main className="pt-16 p-4 mx-auto flex-grow">
+              <div className="md:flex gap-4">
+                <img className="w-[200px] rounded mb-3" src="../yuu.jpg" />
                 <div>
                   <h1>{message}</h1>
                   <p>{details}</p>
diff --git a/client/app/routes/Charts/AlbumChart.tsx b/client/app/routes/Charts/AlbumChart.tsx
index 7bc4eea..7a157a8 100644
--- a/client/app/routes/Charts/AlbumChart.tsx
+++ b/client/app/routes/Charts/AlbumChart.tsx
@@ -30,7 +30,7 @@ export default function AlbumChart() {
       initialData={initialData}
       endpoint="chart/top-albums"
       render={({ data, page, onNext, onPrev }) => (
-        <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5 w-full">
           <div className="flex gap-15 mx-auto">
             <button className="default" onClick={onPrev} disabled={page <= 1}>
               Prev
@@ -47,7 +47,7 @@ export default function AlbumChart() {
             ranked
             separators
             data={data}
-            className="w-[400px] sm:w-[600px]"
+            className="w-11/12 sm:w-[600px]"
             type="album"
           />
           <div className="flex gap-15 mx-auto">
diff --git a/client/app/routes/Charts/ArtistChart.tsx b/client/app/routes/Charts/ArtistChart.tsx
index f128027..8bc2935 100644
--- a/client/app/routes/Charts/ArtistChart.tsx
+++ b/client/app/routes/Charts/ArtistChart.tsx
@@ -30,7 +30,7 @@ export default function Artist() {
       initialData={initialData}
       endpoint="chart/top-artists"
       render={({ data, page, onNext, onPrev }) => (
-        <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5 w-full">
           <div className="flex gap-15 mx-auto">
             <button className="default" onClick={onPrev} disabled={page <= 1}>
               Prev
@@ -47,7 +47,7 @@ export default function Artist() {
             ranked
             separators
             data={data}
-            className="w-[400px] sm:w-[600px]"
+            className="w-11/12 sm:w-[600px]"
             type="artist"
           />
           <div className="flex gap-15 mx-auto">
diff --git a/client/app/routes/Charts/TrackChart.tsx b/client/app/routes/Charts/TrackChart.tsx
index 023dceb..450d022 100644
--- a/client/app/routes/Charts/TrackChart.tsx
+++ b/client/app/routes/Charts/TrackChart.tsx
@@ -30,7 +30,7 @@ export default function TrackChart() {
       initialData={initialData}
       endpoint="chart/top-tracks"
       render={({ data, page, onNext, onPrev }) => (
-        <div className="flex flex-col gap-5">
+        <div className="flex flex-col gap-5 w-full">
           <div className="flex gap-15 mx-auto">
             <button className="default" onClick={onPrev} disabled={page <= 1}>
               Prev
@@ -47,7 +47,7 @@ export default function TrackChart() {
             ranked
             separators
             data={data}
-            className="w-[400px] sm:w-[600px]"
+            className="w-11/12 sm:w-[600px]"
             type="track"
           />
           <div className="flex gap-15 mx-auto">