fix(public): grid on articles

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 && (

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" />