From 33cff99d09f0b27028092a5e2ced076d3507e291 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Carl-Gerhard=20Lindesva=CC=88rd?= <lindesvard@gmail.com>
Date: Thu, 14 Nov 2024 10:41:23 +0100
Subject: [PATCH] fix(public): grid on articles

---
 apps/public/app/(content)/articles/page.tsx | 3 ++-
 apps/public/components/ui/slider.tsx        | 6 +++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/apps/public/app/(content)/articles/page.tsx b/apps/public/app/(content)/articles/page.tsx
index 22b712c0..1e5eecbd 100644
--- a/apps/public/app/(content)/articles/page.tsx
+++ b/apps/public/app/(content)/articles/page.tsx
@@ -35,7 +35,7 @@ export default async function Page() {
         <div className="py-16">
           <h1 className="text-center text-7xl font-bold">Articles</h1>
         </div>
-        <div className="grid grid-cols-3 gap-8">
+        <div className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8">
           {articles.map((item) => (
             <Link
               href={item.url}
@@ -47,6 +47,7 @@ export default async function Page() {
                 alt={item.data.title}
                 width={323}
                 height={181}
+                className="w-full"
               />
               <span className="p-4 col flex-1">
                 {item.data.tag && (
diff --git a/apps/public/components/ui/slider.tsx b/apps/public/components/ui/slider.tsx
index cfe0a01f..955077e9 100644
--- a/apps/public/components/ui/slider.tsx
+++ b/apps/public/components/ui/slider.tsx
@@ -29,10 +29,10 @@ const Slider = ({
   step: number;
   onValueChange: (value: number[]) => void;
 }) => {
-  const isDesktop = useMediaQuery('(min-width: 768px)');
+  const isMobile = useMediaQuery('(max-width: 768px)');
   return (
     <>
-      {!isDesktop && (
+      {isMobile && (
         <div className="text-sm text-muted-foreground mb-4">{tooltip}</div>
       )}
       <SliderPrimitive.Root
@@ -46,7 +46,7 @@ const Slider = ({
         <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-white/10">
           <SliderPrimitive.Range className="absolute h-full bg-white/90" />
         </SliderPrimitive.Track>
-        {tooltip && isDesktop ? (
+        {tooltip && !isMobile ? (
           <Tooltip open disableHoverableContent>
             <TooltipTrigger asChild>
               <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-white bg-black ring-offset-black transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-white/50 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50" />