From 725152359fc7e9f3df6a673138127ca4ee04d3ae Mon Sep 17 00:00:00 2001
From: rimar1337 <132627503+rimar1337@users.noreply.github.com>
Date: Sat, 18 Oct 2025 20:35:55 +0700
Subject: [PATCH] only enable dynamic header color on very small viewports

---
 src/components/Header.tsx | 4 ++--
 src/routes/index.tsx      | 2 +-
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index 691e47a..750e74c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -14,7 +14,7 @@ export function Header({
   const [isAtTop] = useAtom(isAtTopAtom);
   //const what = router.history.
   return (
-    <div className={`flex items-center gap-3 px-3 py-3 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 ${!isAtTop && "shadow"} border-gray-200 dark:border-gray-700`}>
+    <div className={`flex items-center gap-3 px-3 py-3 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 ${!isAtTop && "shadow-sm"} sm:dark:bg-gray-950 sm:bg-white border-gray-200 dark:border-gray-700`}>
       {backButtonCallback ? (<Link
         to=".."
         //className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
@@ -27,7 +27,7 @@ export function Header({
       >
         <IconMaterialSymbolsArrowBack className="w-6 h-6" />
       </Link>) : (<div className="w-[0px]" />)}
-      <span className="text-[21px] font-roboto">{title}</span>
+      <span className="text-[21px] sm:text-[19px] sm:font-semibold font-roboto">{title}</span>
     </div>
   );
 }
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 07fbf91..8ed6841 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -359,7 +359,7 @@ export function Home({ hidden = false }: { hidden?: boolean }) {
       className={`relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800 ${hidden && "hidden"} ${!isAtTop && "shadow"}`}
     >
       {savedFeeds.length > 0 ? (
-        <div className="flex items-center px-4 py-2 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] z-10 border-0 border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin">
+        <div className="flex items-center px-4 py-2 h-[52px] sticky top-0 bg-[var(--header-bg-light)] dark:bg-[var(--header-bg-dark)] sm:bg-white sm:dark:bg-gray-950 z-10 border-0 border-gray-200 dark:border-gray-700 overflow-x-auto overflow-y-hidden scroll-thin">
           {savedFeeds.map((item: any, idx: number) => {
             const label = item.value.split("/").pop() || item.value;
             const isActive = selectedFeed === item.value;
-- 
2.51.2