app/components/page-layout.tsx

@@ -28,7 +28,7 @@ export function useStationContext() {
 export function ListenLink(props: RemixLinkProps & RefAttributes<HTMLAnchorElement>) {
     const { station } = useStationContext();
     const url = props.to + (station ? `?station=${station.id}` : "");
-    return <Link {...props} to={url}>{props.children}</Link>;
+    return <Link preventScrollReset={true}  {...props} to={url}>{props.children}</Link>;
 }
 
 /**

app/components/station-player.tsx

@@ -22,7 +22,7 @@ export function StationPlayer({ station }: StationPlayerProps) {
                   title={station.name} 
                   description={station.description || undefined}
                   image={station.imgUrl}
-                  secondDescription={`* ${station}`}
+                  secondDescription={`*  ${station.popularity}`}
                   />);
             } catch (error) {
                 console.log('rerrerer', error)
@@ -36,7 +36,7 @@ export function StationPlayer({ station }: StationPlayerProps) {
     }
     return (
         <div
-            className="fixed bottom-0 right-[-1rem] w-[76%] h-[70px] px-4 py-2 z-50 flex justify-end content-center items-center gap-2 text-accent-content">
+            className="fixed bottom-0 right-0 w-[76%] h-[90px] z-50">
                 {player}
         </div>
     );

app/components/stations-gallery.tsx

@@ -37,7 +37,7 @@ export function StationsGallery({ stations, tag }: StationsGalleryProps) {
                             </h2>
                             <p>{station.description}</p>
                             <div className="card-actions justify-end">
-                                <Link to={getStationUrl(station.id)}
+                                <Link preventScrollReset  to={getStationUrl(station.id)}
                                       className={`btn btn-primary gap-2 plausible-event-name=play-station plausible-event-station=${station.slug}`}>
                                     <PlayIcon className="h-6 w-6" />
                                     Listen Now

app/routes/listen._index.tsx

@@ -17,7 +17,7 @@ export default function ListenHome() {
     return (
         <>
             <Breadcrumbs>
-                <Link to="/listen">Home</Link>
+                <Link preventScrollReset to="/listen">Home</Link>
             </Breadcrumbs>
             <StationsGallery stations={stations} />
             <Outlet />

package.json

@@ -39,7 +39,7 @@
     "isbot": "^3.6.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-radio-player": "^0.0.7",
+    "react-radio-player": "^0.0.12",
     "tiny-invariant": "^1.3.1"
   },
   "devDependencies": {