From a6aea0b9c537892acfcc08844a9c26e63f2961e8 Mon Sep 17 00:00:00 2001
From: madjin <32600939+madjin@users.noreply.github.com>
Date: Fri, 28 Feb 2025 13:29:01 -0500
Subject: [PATCH] fix css a bit

---
 .../_components/ShowcaseCard/index.tsx        | 22 ++++-
 .../ShowcaseCard/styles.module.css            | 16 +++-
 .../_components/ShowcaseFilters/index.tsx     | 54 +++++++----
 .../ShowcaseFilters/styles.module.css         | 93 +++++++++++++++++--
 .../ShowcaseLayout/styles.module.css          | 28 +++++-
 .../ShowcaseSearchBar/styles.module.css       |  9 ++
 docs/src/pages/showcase/index.tsx             | 33 ++++---
 7 files changed, 209 insertions(+), 46 deletions(-)

diff --git a/docs/src/pages/showcase/_components/ShowcaseCard/index.tsx b/docs/src/pages/showcase/_components/ShowcaseCard/index.tsx
index 958c7390cc9..f1efae42812 100644
--- a/docs/src/pages/showcase/_components/ShowcaseCard/index.tsx
+++ b/docs/src/pages/showcase/_components/ShowcaseCard/index.tsx
@@ -19,15 +19,33 @@ function TagIcon({label, color}: {label: string; color: string}) {
   );
 }
 
+function getShortLabel(label: string): string {
+  // Convert longer tag names to shorter versions for display consistency
+  switch (label.toLowerCase()) {
+    case 'favorite':
+      return 'favorite';
+    case 'adapter':
+      return 'adapter';
+    case 'client':
+      return 'client';
+    case 'plugin':
+      return 'plugin';
+    default:
+      return label;
+  }
+}
+
 function ShowcaseCardTag({tags}: {tags: TagType[]}) {
   return (
     <>
       {tags.map((tag) => {
         const {label, color} = Tags[tag];
+        const displayLabel = getShortLabel(label);
+        
         return (
           <li key={tag} className={styles.tag} title={label}>
             <TagIcon label={label} color={color} />
-            <span className={styles.textLabel}>{label.toLowerCase()}</span>
+            <span className={styles.textLabel}>{displayLabel.toLowerCase()}</span>
           </li>
         );
       })}
@@ -69,7 +87,7 @@ export default function ShowcaseCard({user}: {user: User}) {
         <p className={styles.showcaseCardBody}>{user.description}</p>
       </div>
       <ul className={clsx('card__footer', styles.cardFooter)}>
-        <ShowcaseCardTag tags={user.tags.filter(tag => tag !== 'opensource')} />
+        <ShowcaseCardTag tags={user.tags.filter(tag => tag)} />
       </ul>
     </li>
   );
diff --git a/docs/src/pages/showcase/_components/ShowcaseCard/styles.module.css b/docs/src/pages/showcase/_components/ShowcaseCard/styles.module.css
index 55f1b8f4798..eeada739444 100644
--- a/docs/src/pages/showcase/_components/ShowcaseCard/styles.module.css
+++ b/docs/src/pages/showcase/_components/ShowcaseCard/styles.module.css
@@ -62,11 +62,8 @@
   line-height: 1.66;
 }
 
-.cardFooter {
-  display: flex;
-  flex-wrap: wrap;
-}
 
+/* Base tag styling */
 .tag {
   font-size: 0.675rem;
   border: 1px solid var(--ifm-color-secondary-darkest);
@@ -77,8 +74,19 @@
   display: inline-flex;
   align-items: center;
   padding: 2px 10px;
+  /* Width is controlled by content */
 }
 
+/* Make the text label for all tags exactly the same width */
 .textLabel {
+  width: 40px; /* Fixed width for all text labels */
+  text-align: center;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+/* Specific fix for the TagIcon spacing */
+.tag span:first-child {
   margin-right: 4px;
 }
diff --git a/docs/src/pages/showcase/_components/ShowcaseFilters/index.tsx b/docs/src/pages/showcase/_components/ShowcaseFilters/index.tsx
index afea6871e60..8145f1f91cb 100644
--- a/docs/src/pages/showcase/_components/ShowcaseFilters/index.tsx
+++ b/docs/src/pages/showcase/_components/ShowcaseFilters/index.tsx
@@ -1,5 +1,6 @@
-import React, {useState} from 'react';
+import React from 'react';
 import clsx from 'clsx';
+import { X } from 'lucide-react';
 import {TagList, Tags, type TagType} from '../../../../data/users';
 import styles from './styles.module.css';
 
@@ -49,25 +50,46 @@ export default function ShowcaseFilters({
   operator: 'AND' | 'OR';
   toggleOperator: () => void;
 }): JSX.Element {
+  const clearAllFilters = () => {
+    // Clear all selected tags by toggling each one that's currently selected
+    selectedTags.forEach(tag => toggleTag(tag));
+  };
+
+  const hasActiveFilters = selectedTags.length > 0;
+
   return (
-    <div className={styles.filtersWrapper}>
-      <div className={styles.filterHeader}>
-        <h3 className={styles.filterTitle}>Filters</h3>
-        <div className={styles.operatorToggle}>
-          <span>Match:</span>
-          <button
-            className={clsx(styles.operatorSwitch, {
-              [styles.operatorSwitchAnd]: operator === 'AND'
-            })}
-            onClick={toggleOperator}
-            title={operator === 'OR' ? 'Change to AND (all filters must match)' : 'Change to OR (any filter can match)'}
+    <>
+      <div className={styles.filtersWrapper}>
+        <div className={styles.filterHeader}>
+          <h3 className={styles.filterTitle}>Filters</h3>
+          
+          <div className={styles.operatorToggle}>
+            <span>Combine:</span>
+            <button
+              className={clsx(styles.operatorSwitch, {
+                [styles.operatorSwitchAnd]: operator === 'AND'
+              })}
+              onClick={toggleOperator}
+              title={operator === 'OR' ? 'Change to AND (all filters must match)' : 'Change to OR (any filter can match)'}
+            >
+              <span className={styles.switchKnob}></span>
+              <span className={styles.switchLabel}>AND</span>
+            </button>
+          </div>
+          
+          <button 
+            className={styles.clearButton}
+            onClick={clearAllFilters}
+            disabled={!hasActiveFilters}
+            aria-label="Clear all filters"
+            title="Clear all filters"
           >
-            <span className={styles.switchKnob}></span>
-            <span className={styles.switchLabel}>OR</span>
-            <span className={styles.switchLabel}>AND</span>
+            <X size={14} />
+            Clear
           </button>
         </div>
       </div>
+
       <ul className={clsx('clean-list', styles.tagList)}>
         {TagList.filter(tag => tag).map((tag) => {
           const {label, description, color} = Tags[tag];
@@ -84,6 +106,6 @@ export default function ShowcaseFilters({
           );
         })}
       </ul>
-    </div>
+    </>
   );
 }
diff --git a/docs/src/pages/showcase/_components/ShowcaseFilters/styles.module.css b/docs/src/pages/showcase/_components/ShowcaseFilters/styles.module.css
index e36a9e6d672..b07e7a79f31 100644
--- a/docs/src/pages/showcase/_components/ShowcaseFilters/styles.module.css
+++ b/docs/src/pages/showcase/_components/ShowcaseFilters/styles.module.css
@@ -1,17 +1,25 @@
 .filtersWrapper {
-  flex: 1;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: 16px;
+  height: 40px; /* Match the height of the search bar */
 }
 
 .filterHeader {
   display: flex;
   align-items: center;
-  justify-content: space-between;
-  margin-bottom: 16px;
+  justify-content: flex-start;
+  flex-shrink: 0;
+  height: 40px;
 }
 
 .filterTitle {
   margin: 0;
   font-size: 1.2rem;
+  margin-right: 16px;
+  white-space: nowrap;
+  font-weight: bold;
 }
 
 .operatorToggle {
@@ -19,6 +27,8 @@
   align-items: center;
   gap: 8px;
   font-size: 0.9rem;
+  white-space: nowrap;
+  margin-left: 8px;
 }
 
 .operatorSwitch {
@@ -65,27 +75,35 @@
   font-size: 0.8rem;
   font-weight: bold;
   text-align: center;
-  transition: opacity 0.3s;
+  transition: color 0.3s;
 }
 
 .switchLabel:first-of-type {
   left: 0;
-  color: var(--ifm-color-emphasis-700);
-  opacity: 1;
 }
 
 .switchLabel:last-of-type {
   right: 0;
-  color: white;
-  opacity: 0.6;
 }
 
+/* OR label color when OR is selected */
+.operatorSwitch:not(.operatorSwitchAnd) .switchLabel:first-of-type {
+  color: var(--ifm-color-emphasis-800);
+}
+
+/* OR label color when AND is selected */
 .operatorSwitchAnd .switchLabel:first-of-type {
-  opacity: 0.6;
+  color: white;
 }
 
+/* AND label color when OR is selected */
+.operatorSwitch:not(.operatorSwitchAnd) .switchLabel:last-of-type {
+  color: var(--ifm-color-emphasis-600);
+}
+
+/* AND label color when AND is selected */
 .operatorSwitchAnd .switchLabel:last-of-type {
-  opacity: 1;
+  color: var(--ifm-color-emphasis-800);
 }
 
 .tagList {
@@ -93,6 +111,8 @@
   align-items: center;
   flex-wrap: wrap;
   gap: 8px;
+  margin: 0;
+  padding: 0;
 }
 
 .tagListItem {
@@ -122,10 +142,63 @@
   color: white;
 }
 
+.filterControls {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  margin-left: 16px;
+}
+
+.clearButton {
+  display: inline-flex;
+  align-items: center;
+  margin-left:6px;
+  gap: 4px;
+  padding: 6px 14px;
+  border-radius: 15px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  border: 1px solid var(--ifm-color-emphasis-300);
+  background-color: transparent;
+  color: var(--ifm-color-emphasis-700);
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.clearButton:hover {
+  background-color: var(--ifm-color-emphasis-200);
+  color: var(--ifm-color-emphasis-900);
+}
+
+.clearButton:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+@media (max-width: 992px) {
+  .filtersWrapper {
+    height: auto;
+    width: 100%;
+  }
+  
+  .filterHeader {
+    width: 100%;
+    justify-content: space-between;
+  }
+}
+
 @media (max-width: 768px) {
   .filterHeader {
     flex-direction: column;
     align-items: flex-start;
     gap: 12px;
   }
+  
+  .filterControls {
+    margin-left: 0;
+  }
+  
+  .tagList {
+    margin-top: 16px;
+  }
 }
diff --git a/docs/src/pages/showcase/_components/ShowcaseLayout/styles.module.css b/docs/src/pages/showcase/_components/ShowcaseLayout/styles.module.css
index 342398cfa87..00b06960b9a 100644
--- a/docs/src/pages/showcase/_components/ShowcaseLayout/styles.module.css
+++ b/docs/src/pages/showcase/_components/ShowcaseLayout/styles.module.css
@@ -1,15 +1,37 @@
 .filtersContainer {
   display: flex;
-  justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
   margin-bottom: 20px;
-  padding: 0 var(--ifm-spacing-horizontal);
+  padding: 12px var(--ifm-spacing-horizontal);
+  gap: 16px;
+  background-color: var(--ifm-color-emphasis-100);
+  border-radius: 8px;
+}
+
+.filtersRow {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  flex-wrap: nowrap;
+  gap: 16px;
+}
+
+.tagsRow {
+  display: flex;
+  width: 100%;
 }
 
 .submitButton {
   margin-top: 1rem;
 }
 
+@media (max-width: 992px) {
+  .filtersContainer {
+    flex-direction: column;
+    align-items: flex-start;
+  }
+}
+
 @media (max-width: 768px) {
   .filtersContainer {
     flex-direction: column;
diff --git a/docs/src/pages/showcase/_components/ShowcaseSearchBar/styles.module.css b/docs/src/pages/showcase/_components/ShowcaseSearchBar/styles.module.css
index 3c28fba7f31..7afe5497aa3 100644
--- a/docs/src/pages/showcase/_components/ShowcaseSearchBar/styles.module.css
+++ b/docs/src/pages/showcase/_components/ShowcaseSearchBar/styles.module.css
@@ -1,5 +1,7 @@
 .searchContainer {
   width: 300px;
+  min-width: 200px;
+  flex-shrink: 0;
 }
 
 .searchInputWrapper {
@@ -24,6 +26,7 @@
   color: var(--ifm-font-color-base);
   font-size: 0.9rem;
   transition: all var(--ifm-transition-fast);
+  margin: 0;
 }
 
 .searchInput:focus {
@@ -58,6 +61,12 @@
   color: var(--ifm-color-emphasis-700);
 }
 
+@media (max-width: 992px) {
+  .searchContainer {
+    width: 300px;
+  }
+}
+
 @media (max-width: 768px) {
   .searchContainer {
     width: 100%;
diff --git a/docs/src/pages/showcase/index.tsx b/docs/src/pages/showcase/index.tsx
index de0954ee6fa..043f6542595 100644
--- a/docs/src/pages/showcase/index.tsx
+++ b/docs/src/pages/showcase/index.tsx
@@ -72,6 +72,10 @@ export default function Showcase(): JSX.Element {
     setOperator(op => op === 'OR' ? 'AND' : 'OR');
   };
 
+  const clearSearch = () => {
+    setSearchValue('');
+  };
+
   const filteredUsers = useMemo(() => {
     return filterUsers(sortedUsers, searchValue, selectedTags, operator);
   }, [searchValue, selectedTags, operator]);
@@ -81,17 +85,24 @@ export default function Showcase(): JSX.Element {
       <main className="margin-vert--lg">
         <ShowcaseHeader />
         
-        <div className={styles.filtersContainer}>
-          <ShowcaseFilters
-            selectedTags={selectedTags}
-            toggleTag={toggleTag}
-            operator={operator}
-            toggleOperator={toggleOperator}
-          />
-          <ShowcaseSearchBar 
-            onChange={setSearchValue}
-            value={searchValue}
-          />
+        <div className="container">
+          <div className={styles.filtersContainer}>
+            <div className={styles.filtersRow}>
+              <ShowcaseFilters
+                selectedTags={selectedTags}
+                toggleTag={toggleTag}
+                operator={operator}
+                toggleOperator={toggleOperator}
+              />
+              <ShowcaseSearchBar 
+                onChange={setSearchValue}
+                value={searchValue}
+              />
+            </div>
+            <div className={styles.tagsRow}>
+              {/* Tag buttons will be rendered inside ShowcaseFilters component */}
+            </div>
+          </div>
         </div>
         
         <ShowcaseCards users={filteredUsers} />