Improve homepage layout and add icon guidelines

- Move results count next to search bar for better grouping
- Constrain search bar width to 850px (fixed) so results count stays adjacent
- Add icon guidelines to design system (prefer SVG, store in assets/icons/)
- Maintain alignment between controls wrapper and catalog grid

Author: machaval

docs/design-system.md

@@ -573,6 +573,38 @@ These principles ensure visual consistency and clear interaction patterns across
 
 **Exception:** Small icon-only buttons may use `--radius-medium` (8px) when the button size is very small (≤32px).
 
+### 5. Icons and Assets
+
+**Rule:** Always use SVG icons. PNG is acceptable only when SVG is not available. All icons must be stored in `assets/icons/`.
+
+```html
+<!-- ✅ CORRECT - SVG icon from assets/icons/ -->
+<img src="assets/icons/api-filter-icon.svg" width="16" height="16" alt="">
+
+<!-- ✅ CORRECT - Inline SVG for interactive icons -->
+<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="20" height="20">
+  <path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12Z"></path>
+</svg>
+
+<!-- ⚠️ ACCEPTABLE - PNG only if SVG unavailable -->
+<img src="assets/icons/legacy-icon.png" width="16" height="16" alt="">
+
+<!-- ❌ WRONG - Icon not in assets/icons/ -->
+<img src="images/icon.svg" width="16" height="16" alt="">
+```
+
+**Why:**
+- SVG icons are scalable, crisp at any resolution, and easily styled with CSS
+- Centralized `assets/icons/` directory makes icon management consistent
+- Inline SVG allows `fill="currentColor"` to inherit text color for theme consistency
+
+**Icon Guidelines:**
+- Prefer inline SVG for icons that change color or respond to interactions
+- Use `<img>` tags for static decorative icons
+- Always specify `width` and `height` attributes for performance
+- Use `currentColor` for fill/stroke when icons should match text color
+- Name icon files descriptively (e.g., `api-filter-icon.svg`, `skill-filter-icon.svg`)
+
 ---
 
 ## Quick Reference Cheat Sheet

scripts/portal_generator/assets/styles.css

@@ -610,11 +610,11 @@ code {
 
 .tag-search-wrapper {
     position: relative;
-    width: 100%;
     display: flex;
     align-items: center;
     gap: 12px;
-    flex: 1;
+    flex: 0 1 auto;
+    max-width: 850px;
 }
 
 .search-icon-catalog {
@@ -628,9 +628,19 @@ code {
 
 /* Catalog Results Header */
 .catalog-results-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--space-lg);
+    margin-right: 60px;
+}
+
+.catalog-search-and-results {
     display: flex;
     align-items: center;
     gap: var(--space-lg);
+    flex: 1;
+    min-width: 0;
 }
 
 .results-count {
@@ -639,6 +649,7 @@ code {
     margin: 0;
     white-space: nowrap;
     flex-shrink: 0;
+    color: var(--color-text-secondary);
 }
 
 /* Catalog Stats (Very Subtle Decorator) */
@@ -696,14 +707,13 @@ code {
     align-items: center;
     gap: var(--space-xx-small);
     padding: 8px 16px 8px 46px;
-    max-width: 850px;
+    width: 850px;
     border: 1.5px solid var(--color-gray-300);
     border-radius: 24px;
     background: var(--color-white);
     min-height: 30px;
     cursor: text;
     transition: all 0.2s;
-    flex: 1;
     margin-left: -32px;
 }
 

scripts/portal_generator/templates/homepage.html

@@ -31,22 +31,24 @@ <h1 class="hero-title">MuleSoft Platform Developer Portal</h1>
     <div class="catalog-main-content">
         <div class="catalog-controls-wrapper">
             <div class="catalog-results-header">
-                <div class="tag-search-wrapper">
-                    <svg class="search-icon-catalog" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
-                        <path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm-8 6a8 8 0 1 1 14.32 4.906l4.387 4.387a1 1 0 0 1-1.414 1.414l-4.387-4.387A8 8 0 0 1 2 10Z"></path>
-                    </svg>
-                    <div class="tag-search-input-container" id="tagSearchInputContainer">
-                        <div class="selected-tags" id="selectedTags"></div>
-                        <input type="text"
-                               id="tagSearchInput"
-                               class="tag-search-input"
-                               placeholder="Search by tags"
-                               aria-label="Search by tags"
-                               autocomplete="off">
+                <div class="catalog-search-and-results">
+                    <div class="tag-search-wrapper">
+                        <svg class="search-icon-catalog" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" focusable="false">
+                            <path d="M10 4a6 6 0 1 0 0 12 6 6 0 0 0 0-12Zm-8 6a8 8 0 1 1 14.32 4.906l4.387 4.387a1 1 0 0 1-1.414 1.414l-4.387-4.387A8 8 0 0 1 2 10Z"></path>
+                        </svg>
+                        <div class="tag-search-input-container" id="tagSearchInputContainer">
+                            <div class="selected-tags" id="selectedTags"></div>
+                            <input type="text"
+                                   id="tagSearchInput"
+                                   class="tag-search-input"
+                                   placeholder="Search by tags"
+                                   aria-label="Search by tags"
+                                   autocomplete="off">
+                        </div>
+                        <div class="tag-suggestions" id="tagSuggestions" style="display: none;"></div>
                     </div>
-                    <div class="tag-suggestions" id="tagSuggestions" style="display: none;"></div>
+                    <h2 class="results-count"><span id="resultsType">All</span> (<span id="resultsCount">{{ apis|length + (all_skills|length if all_skills else 0) }}</span> Results)</h2>
                 </div>
-                <h2 class="results-count"><span id="resultsType">All</span> (<span id="resultsCount">{{ apis|length + (all_skills|length if all_skills else 0) }}</span> Results)</h2>
                 <div class="catalog-controls-right">
                     <button class="sort-btn" aria-label="Sort options">
                         <svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 24 24" width="14" height="14" class="block shrink-0 text-current" aria-hidden="true" focusable="false" style="margin-right: 6px;">