From aa7fddd51889a5f9e84992d46d4ade929da83733 Mon Sep 17 00:00:00 2001
From: Gabe Farrell <90876006+gabehf@users.noreply.github.com>
Date: Thu, 15 Jan 2026 20:21:05 -0500
Subject: [PATCH] fix: a couple ui fixes (#147)

* fix: reduce loading component width

* improve theme selector for mobile

* match interest graph width to activity grid
---
 client/app/components/ActivityGrid.tsx        |  4 +-
 client/app/components/AllTimeStats.tsx        |  2 +-
 client/app/components/InterestGraph.tsx       |  6 +--
 .../components/themeSwitcher/ThemeOption.tsx  | 52 +++++++++++++------
 .../themeSwitcher/ThemeSwitcher.tsx           |  2 +-
 5 files changed, 43 insertions(+), 23 deletions(-)

diff --git a/client/app/components/ActivityGrid.tsx b/client/app/components/ActivityGrid.tsx
index 18ca0de..0d39e2c 100644
--- a/client/app/components/ActivityGrid.tsx
+++ b/client/app/components/ActivityGrid.tsx
@@ -68,14 +68,14 @@ export default function ActivityGrid({
 
   if (isPending) {
     return (
-      <div className="w-[500px]">
+      <div className="w-[350px]">
         <h3>Activity</h3>
         <p>Loading...</p>
       </div>
     );
   } else if (isError) {
     return (
-      <div className="w-[500px]">
+      <div className="w-[350px]">
         <h3>Activity</h3>
         <p className="error">Error: {error.message}</p>
       </div>
diff --git a/client/app/components/AllTimeStats.tsx b/client/app/components/AllTimeStats.tsx
index 556fa32..6a3ebac 100644
--- a/client/app/components/AllTimeStats.tsx
+++ b/client/app/components/AllTimeStats.tsx
@@ -11,7 +11,7 @@ export default function AllTimeStats() {
 
   if (isPending) {
     return (
-      <div className="w-[200px]">
+      <div>
         <h3>{header}</h3>
         <p>Loading...</p>
       </div>
diff --git a/client/app/components/InterestGraph.tsx b/client/app/components/InterestGraph.tsx
index 7f22209..9e2baaf 100644
--- a/client/app/components/InterestGraph.tsx
+++ b/client/app/components/InterestGraph.tsx
@@ -48,14 +48,14 @@ export default function InterestGraph({
 
   if (isPending) {
     return (
-      <div className="w-[500px]">
+      <div className="w-[350px] sm:w-[500px]">
         <h3>Interest over time</h3>
         <p>Loading...</p>
       </div>
     );
   } else if (isError) {
     return (
-      <div className="w-[500px]">
+      <div className="w-[350px] sm:w-[500px]">
         <h3>Interest over time</h3>
         <p className="error">Error: {error.message}</p>
       </div>
@@ -67,7 +67,7 @@ export default function InterestGraph({
   // so I think I just have to remove it for now.
 
   return (
-    <div className="flex flex-col items-start w-full max-w-[500px]">
+    <div className="flex flex-col items-start w-full max-w-[335px] sm:max-w-[500px]">
       <h3>Interest over time</h3>
       <AreaChart
         style={{
diff --git a/client/app/components/themeSwitcher/ThemeOption.tsx b/client/app/components/themeSwitcher/ThemeOption.tsx
index 51b9acf..7c0166b 100644
--- a/client/app/components/themeSwitcher/ThemeOption.tsx
+++ b/client/app/components/themeSwitcher/ThemeOption.tsx
@@ -1,23 +1,43 @@
 import type { Theme } from "~/styles/themes.css";
 
 interface Props {
-    theme: Theme
-    themeName: string
-    setTheme: Function
+  theme: Theme;
+  themeName: string;
+  setTheme: Function;
 }
 
 export default function ThemeOption({ theme, themeName, setTheme }: Props) {
+  const capitalizeFirstLetter = (s: string) => {
+    return s.charAt(0).toUpperCase() + s.slice(1);
+  };
 
-    const capitalizeFirstLetter = (s: string) => {
-        return s.charAt(0).toUpperCase() + s.slice(1);
-    }
-
-    return (
-        <div onClick={() => setTheme(themeName)} className="rounded-md p-3 sm:p-5 hover:cursor-pointer flex gap-4 items-center border-2" style={{background: theme.bg, color: theme.fg, borderColor: theme.bgSecondary}}>
-            <div className="text-xs sm:text-sm">{capitalizeFirstLetter(themeName)}</div>
-            <div className="w-[50px] h-[30px] rounded-md" style={{background: theme.bgSecondary}}></div>
-            <div className="w-[50px] h-[30px] rounded-md" style={{background: theme.fgSecondary}}></div>
-            <div className="w-[50px] h-[30px] rounded-md" style={{background: theme.primary}}></div>
-        </div>
-    )
-}
\ No newline at end of file
+  return (
+    <div
+      onClick={() => setTheme(themeName)}
+      className="rounded-md p-3 sm:p-5 hover:cursor-pointer flex gap-3 items-center border-2 justify-between"
+      style={{
+        background: theme.bg,
+        color: theme.fg,
+        borderColor: theme.bgSecondary,
+      }}
+    >
+      <div className="text-xs sm:text-sm">
+        {capitalizeFirstLetter(themeName)}
+      </div>
+      <div className="flex gap-2 w-full">
+        <div
+          className="w-2/7 max-w-[50px] h-[30px] rounded-md"
+          style={{ background: theme.bgSecondary }}
+        ></div>
+        <div
+          className="w-2/7 max-w-[50px] h-[30px] rounded-md"
+          style={{ background: theme.fgSecondary }}
+        ></div>
+        <div
+          className="w-2/7 max-w-[50px] h-[30px] rounded-md"
+          style={{ background: theme.primary }}
+        ></div>
+      </div>
+    </div>
+  );
+}
diff --git a/client/app/components/themeSwitcher/ThemeSwitcher.tsx b/client/app/components/themeSwitcher/ThemeSwitcher.tsx
index 62374be..f27d41c 100644
--- a/client/app/components/themeSwitcher/ThemeSwitcher.tsx
+++ b/client/app/components/themeSwitcher/ThemeSwitcher.tsx
@@ -49,7 +49,7 @@ export function ThemeSwitcher() {
             <AsyncButton onClick={resetTheme}>Reset</AsyncButton>
           </div>
         </div>
-        <div className="grid grid-cols-2 items-center gap-2">
+        <div className="grid grid-cols-1 sm:grid-cols-2 items-center gap-2">
           {Object.entries(themes).map(([name, themeData]) => (
             <ThemeOption
               setTheme={setTheme}