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

@@ -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";

client/app/root.tsx

@@ -116,12 +116,12 @@ export function ErrorBoundary() {
     <AppProvider>
       <ThemeProvider>
         <title>{title}</title>
-        <div className="flex">
         <Sidebar />
+        <div className="flex">
           <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>

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">

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">

client/app/routes/Charts/ChartLayout.tsx

@@ -40,7 +40,7 @@ export default function ChartLayout<T>({
   useEffect(() => {
     if ((data?.items?.length ?? 0) === 0) return;
 
-    const img = (data.items[0] as any)?.item.image;
+    const img = (data.items[0] as any)?.item?.image;
     if (!img) return;
 
     average(imageUrl(img, "small"), { amount: 1 }).then((color) => {

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">