Refactor layout and feature cards for improved responsiveness; adjust padding and grid gaps for better alignment across components

Author: shinwonse

app/components/feature-cards.tsx

@@ -33,13 +33,13 @@ const features = [
 
 export function FeatureCards() {
   return (
-    <section className="py-20">
-      <div className="container">
-        <div className="grid grid-cols-1 gap-8 sm:grid-cols-2 lg:grid-cols-3">
+    <section className="py-12 sm:py-16 md:py-20">
+      <div className="container px-3 sm:px-4 md:px-6">
+        <div className="grid grid-cols-1 gap-4 sm:gap-6 md:gap-8 sm:grid-cols-2 lg:grid-cols-3">
           {features.map((feature) => (
             <div
               key={feature.title}
-              className="group relative overflow-hidden rounded-lg border border-border/50 bg-card p-6 transition-all hover:border-border hover:shadow-md"
+              className="group relative overflow-hidden rounded-lg border border-border/50 bg-card p-4 sm:p-6 transition-all hover:border-border hover:shadow-md"
             >
               <div
                 className={cn(

app/components/layout.tsx

@@ -12,7 +12,11 @@ export function Layout({ children }: LayoutProps) {
     <ThemeProvider defaultTheme="system">
       <div className={cn('min-h-screen bg-background font-sans antialiased')}>
         <Header />
-        <main className={cn('container mx-auto px-4 py-8 md:px-6 lg:px-8')}>
+        <main
+          className={cn(
+            'container mx-auto px-3 py-6 sm:px-4 md:px-6 lg:px-8 md:py-8',
+          )}
+        >
           {children}
         </main>
         <Footer />

app/routes/articles.tsx

@@ -61,42 +61,46 @@ export default function Articles() {
     <Layout>
       <div className={cn('container mx-auto max-w-7xl')}>
         {/* Header Section */}
-        <div className={cn('mb-8')}>
-          <h1 className={cn('mb-4 text-4xl font-bold')}>Articles</h1>
-          <p className={cn('text-lg text-muted-foreground')}>
+        <div className={cn('mb-6 md:mb-8')}>
+          <h1 className={cn('mb-2 md:mb-4 text-2xl md:text-4xl font-bold')}>
+            Articles
+          </h1>
+          <p className={cn('text-base md:text-lg text-muted-foreground')}>
             Discover insightful articles from our community of frontend
             developers.
           </p>
         </div>
 
         {/* Search and Filter Section */}
-        <div className={cn('mb-8 flex flex-wrap items-center gap-4')}>
+        <div className={cn('mb-6 md:mb-8 flex flex-wrap items-center gap-4')}>
           <Form
-            className={cn('relative flex flex-1 gap-2')}
+            className={cn('relative flex w-full gap-2')}
             onSubmit={handleSubmit}
           >
             <div className={cn('relative flex-1')}>
               <Search
                 className={cn(
-                  'absolute left-3 top-2.5 h-5 w-5 text-muted-foreground',
+                  'absolute left-3 top-2.5 h-4 w-4 text-muted-foreground',
                 )}
               />
               <Input
                 type="search"
                 name="q"
                 placeholder="Search articles..."
-                className={cn('pl-10')}
+                className={cn('pl-9 h-10')}
                 defaultValue={searchParams.get('q') || ''}
               />
             </div>
-            <Button type="submit" variant="outline">
+            <Button type="submit" variant="outline" size="sm">
               Search
             </Button>
           </Form>
         </div>
 
         {/* Articles Grid */}
-        <div className={cn('grid gap-6 md:grid-cols-2 lg:grid-cols-3')}>
+        <div
+          className={cn('grid gap-4 sm:gap-6 md:grid-cols-2 lg:grid-cols-3')}
+        >
           {articles.map((article) => (
             <a
               key={article.id}
@@ -112,7 +116,7 @@ export default function Articles() {
               >
                 <div
                   className={cn(
-                    'relative aspect-video w-full overflow-hidden rounded-t-lg',
+                    'relative aspect-[2/1] w-full overflow-hidden rounded-t-lg',
                   )}
                 >
                   <img
@@ -124,13 +128,15 @@ export default function Articles() {
                     loading="lazy"
                   />
                 </div>
-                <div className={cn('flex flex-col p-6')}>
-                  <div className={cn('mb-4 flex items-center gap-2')}>
+                <div className={cn('flex flex-col p-3 sm:p-4')}>
+                  <div
+                    className={cn('mb-2 flex flex-wrap items-center gap-1.5')}
+                  >
                     {article.tags.map((tag) => (
                       <span
                         key={tag}
                         className={cn(
-                          'rounded-full bg-primary/10 px-2.5 py-0.5 text-xs font-medium text-primary',
+                          'rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary',
                         )}
                       >
                         {tag}
@@ -139,14 +145,14 @@ export default function Articles() {
                   </div>
                   <h2
                     className={cn(
-                      'mb-2 text-xl font-semibold group-hover:text-primary',
+                      'mb-2 text-lg md:text-xl font-semibold group-hover:text-primary line-clamp-2',
                     )}
                   >
                     {article.title}
                   </h2>
                   <p
                     className={cn(
-                      'mb-4 flex-grow text-muted-foreground line-clamp-3',
+                      'mb-0 flex-grow text-sm text-muted-foreground line-clamp-2',
                     )}
                   >
                     {article.description}

app/routes/jobs.tsx

@@ -435,7 +435,7 @@ export default function Jobs() {
         ) : (
           <div
             className={cn(
-              'grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
+              'grid grid-cols-1 gap-4 sm:gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
             )}
           >
             {sortedJobs.map((job) => (