Refine admin content flow and improve Q&A mobile UX

src/components/QASection.tsx

@@ -89,6 +89,12 @@ export default function QASection() {
     setPage(0)
   }
 
+  const clearFilters = () => {
+    setSelectedTopic(null)
+    setSearchQuery('')
+    setPage(0)
+  }
+
   const getRelatedQuestions = (current: PublicQuestion) => {
     const currentTokens = new Set(tokenizeForRelated(`${current.question} ${current.answer}`))
 
@@ -125,6 +131,7 @@ export default function QASection() {
             <div className="qa-filters">
               <div className="qa-topics">
                 <button
+                  type="button"
                   className={`qa-topic-btn${selectedTopic === null ? ' qa-topic-btn--active' : ''}`}
                   onClick={() => handleTopic(null)}
                 >
@@ -132,6 +139,7 @@ export default function QASection() {
                 </button>
                 {topics.map(topic => (
                   <button
+                    type="button"
                     key={topic}
                     className={`qa-topic-btn${selectedTopic === topic ? ' qa-topic-btn--active' : ''}`}
                     onClick={() => handleTopic(topic)}
@@ -151,6 +159,11 @@ export default function QASection() {
                   />
                 </label>
               </div>
+              {(searchQuery || selectedTopic) && (
+                <div className="qa-filter-actions">
+                  <button type="button" className="qa-clear-btn" onClick={clearFilters}>Clear filters</button>
+                </div>
+              )}
             </div>
 
             {filteredQuestions.length === 0 ? (
@@ -160,7 +173,9 @@ export default function QASection() {
             ) : (
               <>
                 <div className="qa-cards">
-                  {pagedQuestions.map(question => (
+                  {pagedQuestions.map(question => {
+                    const relatedQuestions = getRelatedQuestions(question)
+                    return (
                     <div key={question.id} className="qa-card-scene">
                       <div
                         className={`qa-card-inner ${expanded[question.id] ? 'flipped' : ''}`}
@@ -181,11 +196,11 @@ export default function QASection() {
                         <div className="qa-card-face qa-card-back">
                           <span className="qa-face-label">A</span>
                           <div className="qa-answer-text">{renderTextWithLinks(question.answer)}</div>
-                          {getRelatedQuestions(question).length > 0 && (
+                          {relatedQuestions.length > 0 && (
                             <div className="qa-related-wrap">
                               <p className="qa-related-label">Related questions</p>
                               <div className="qa-related-list">
-                                {getRelatedQuestions(question).map(related => (
+                                {relatedQuestions.map(related => (
                                   <button
                                     key={related.id}
                                     type="button"
@@ -209,7 +224,7 @@ export default function QASection() {
                         </div>
                       </div>
                     </div>
-                  ))}
+                  )})}
                 </div>
 
                 {totalPages > 1 && (