improve responsiveness

Author: ericdallo

website/src/components/Header.astro

@@ -156,9 +156,9 @@ import { REPO_URL, DOCS_URL, SITE_URL } from '../constants';
     border-color: rgba(0, 165, 184, 0.5);
   }
 
-  @media (max-width: 640px) {
+  @media (max-width: 768px) {
     .header-nav {
-      gap: 12px;
+      gap: 10px;
     }
 
     .header-link span,
@@ -167,16 +167,37 @@ import { REPO_URL, DOCS_URL, SITE_URL } from '../constants';
     }
 
     .header-link--submit {
-      padding: 5px 8px;
+      display: none;
+    }
+
+    .header-link--cta {
+      font-size: 0.8rem;
+      padding: 5px 10px;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .header-inner {
+      padding: 0 16px;
+    }
+
+    .header-brand {
+      gap: 8px;
+      font-size: 0.95rem;
     }
 
-    .header-link--submit span {
+    .header-nav {
+      gap: 6px;
+    }
+
+    /* Hide "How plugins work" entirely — no icon fallback */
+    .header-link:not(.header-link--submit):not(.header-link--cta):not([href*="github"]) {
       display: none;
     }
 
     .header-link--cta {
-      padding: 5px 10px;
-      font-size: 0.8rem;
+      padding: 5px 8px;
+      font-size: 0.75rem;
     }
   }
 </style>

website/src/components/Hero.astro

@@ -271,7 +271,7 @@ const { pluginCount } = Astro.props;
 
   @media (max-width: 640px) {
     .hero {
-      padding: 56px 0 36px;
+      padding: 48px 0 32px;
     }
 
     .hero-title {
@@ -280,10 +280,44 @@ const { pluginCount } = Astro.props;
 
     .hero-subtitle {
       font-size: 0.95rem;
+      margin-bottom: 28px;
+    }
+
+    .hero-search-input {
+      padding: 13px 18px 13px 46px;
+      font-size: 0.95rem;
+    }
+
+    .hero-search-icon {
+      left: 16px;
+    }
+
+    /* Kbd hint is useless on touch devices */
+    .hero-search-kbd {
+      display: none;
+    }
+
+    .hero-badge {
+      margin-bottom: 20px;
     }
 
     .hero-contribute {
       font-size: 0.8rem;
     }
   }
+
+  @media (max-width: 380px) {
+    .hero {
+      padding: 40px 0 28px;
+    }
+
+    .hero-title {
+      font-size: 1.55rem;
+    }
+
+    .hero-subtitle {
+      font-size: 0.88rem;
+      margin-bottom: 24px;
+    }
+  }
 </style>

website/src/components/PluginGrid.astro

@@ -183,7 +183,7 @@ const categories = ['All', ...new Set(plugins.map(p => p.category))];
 
   .plugin-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
+    grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
     gap: 20px;
   }
 
@@ -213,11 +213,40 @@ const categories = ['All', ...new Set(plugins.map(p => p.category))];
   @media (max-width: 720px) {
     .plugin-grid {
       grid-template-columns: 1fr;
+      gap: 16px;
     }
 
     .grid-controls {
       flex-direction: column;
-      align-items: flex-start;
+      align-items: stretch;
+      gap: 12px;
+    }
+
+    .filter-bar {
+      overflow-x: auto;
+      flex-wrap: nowrap;
+      -webkit-overflow-scrolling: touch;
+      scrollbar-width: none;
+      padding-bottom: 4px;
+      max-width: 100%;
+    }
+
+    .filter-bar::-webkit-scrollbar {
+      display: none;
+    }
+
+    .filter-pill {
+      flex-shrink: 0;
+    }
+
+    .grid-count {
+      font-size: 0.8rem;
+    }
+  }
+
+  @media (max-width: 480px) {
+    .grid-section {
+      padding: 0 0 56px;
     }
   }
 </style>

website/src/pages/plugins/[name].astro

@@ -502,5 +502,46 @@ const configSnippet = `{
     .detail-name {
       font-size: 1.4rem;
     }
+
+    .detail-description {
+      font-size: 0.9rem;
+    }
+
+    .detail-install {
+      padding: 16px;
+    }
+
+    .detail-info {
+      padding: 16px;
+    }
+
+    .detail-code {
+      font-size: 0.75rem;
+      padding: 12px;
+    }
+
+    .detail-readme-content :global(pre) {
+      padding: 12px;
+      font-size: 0.78rem;
+    }
+
+    .detail-readme-content :global(ul),
+    .detail-readme-content :global(ol) {
+      padding-left: 18px;
+    }
+  }
+
+  @media (max-width: 380px) {
+    .detail-name {
+      font-size: 1.25rem;
+    }
+
+    .detail-icon {
+      font-size: 2.5rem;
+    }
+
+    .back-link {
+      margin-bottom: 24px;
+    }
   }
 </style>

website/src/styles/global.css

@@ -124,6 +124,12 @@ code {
   padding: 0 24px;
 }
 
+@media (max-width: 380px) {
+  .container {
+    padding: 0 16px;
+  }
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -180,6 +186,36 @@ code {
   50% { box-shadow: 0 0 16px rgba(0, 165, 184, 0.5); }
 }
 
+/* --- Mobile touch & overflow safety --- */
+html {
+  overflow-x: hidden;
+}
+
+body {
+  overscroll-behavior-x: none;
+  -webkit-tap-highlight-color: transparent;
+}
+
+/* Minimum touch target for interactive elements */
+@media (pointer: coarse) {
+  button,
+  a,
+  input,
+  select,
+  textarea {
+    min-height: 44px;
+    min-width: 44px;
+  }
+
+  /* Let inline links stay natural size */
+  p a,
+  li a,
+  span a {
+    min-height: unset;
+    min-width: unset;
+  }
+}
+
 @media (prefers-reduced-motion: reduce) {
   *,
   *::before,