forked from
whey.party/red-dwarf
an independent Bluesky client using Constellation, PDS Queries, and other services
only enable dynamic header color on very small viewports
+3
-3
+2
-2
src/components/Header.tsx
+2
-2
src/components/Header.tsx
···
14
14
const [isAtTop] = useAtom(isAtTopAtom);
15
15
//const what = router.history.
16
16
return (
17
-
<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`}>
17
+
<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`}>
18
18
{backButtonCallback ? (<Link
19
19
to=".."
20
20
//className="px-3 py-1 rounded hover:bg-gray-100 dark:hover:bg-gray-900 font-bold text-lg"
···
27
27
>
28
28
<IconMaterialSymbolsArrowBack className="w-6 h-6" />
29
29
</Link>) : (<div className="w-[0px]" />)}
30
-
<span className="text-[21px] font-roboto">{title}</span>
30
+
<span className="text-[21px] sm:text-[19px] sm:font-semibold font-roboto">{title}</span>
31
31
</div>
32
32
);
33
33
}
+1
-1
src/routes/index.tsx
+1
-1
src/routes/index.tsx
···
359
359
className={`relative flex flex-col divide-y divide-gray-200 dark:divide-gray-800 ${hidden && "hidden"} ${!isAtTop && "shadow"}`}
360
360
>
361
361
{savedFeeds.length > 0 ? (
362
-
<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">
362
+
<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">
363
363
{savedFeeds.map((item: any, idx: number) => {
364
364
const label = item.value.split("/").pop() || item.value;
365
365
const isActive = selectedFeed === item.value;