fix: UI issues

Author: jackdomleo7

src/components/Features/AuditContent.vue

@@ -48,7 +48,7 @@
         >. Patterns detected:
         <strong>{{ patternsFound.join(', ') }}</strong>
       </div>
-      <div class="results-list">
+      <div class="audit-content__results-list">
         <Card
           v-for="(result, index) in results"
           :key="index"
@@ -241,7 +241,6 @@ const issuesSummary = computed(() => {
 
 <style lang="scss" scoped>
 .audit-content {
-  // Info banner
   &__info {
     margin-bottom: var(--space-6);
 
@@ -254,7 +253,6 @@ const issuesSummary = computed(() => {
     }
   }
 
-  // Loading skeleton
   &__loading {
     display: flex;
     flex-direction: column;
@@ -281,7 +279,6 @@ const issuesSummary = computed(() => {
     margin-bottom: var(--space-6);
   }
 
-  // Result cards
   &__result-card {
     margin-bottom: var(--space-4);
     border-left: 3px solid var(--accent-blue);
@@ -323,11 +320,15 @@ const issuesSummary = computed(() => {
     word-break: break-all;
   }
 
+  &__results-list {
+    display: flex;
+    flex-direction: column;
+  }
+
   &__issue-count {
     flex-shrink: 0;
   }
 
-  // Issues list
   &__issues-list {
     display: flex;
     flex-direction: column;
@@ -380,14 +381,8 @@ const issuesSummary = computed(() => {
     }
   }
 
-  // No issues message
   &__no-issues {
     margin-top: var(--space-6);
   }
 }
-
-.results-list {
-  display: flex;
-  flex-direction: column;
-}
 </style>

src/components/Features/SearchContent.vue

@@ -64,12 +64,16 @@
       class="search-content__results-container"
     >
       <div class="search-content__summary" aria-live="polite" aria-atomic="true">
-        Found {{ matchesSummary }} {{ negateSearch ? 'NOT' : '' }} containing "<strong>{{
-          searchTerm
-        }}</strong
-        >"
+        <template v-if="negateSearch">
+          Found {{ matchesSummary }} NOT containing "<strong>{{ searchTerm }}</strong
+          >"
+        </template>
+        <template v-else>
+          Found {{ matchesSummary }} containing "<strong>{{ searchTerm }}</strong
+          >"
+        </template>
       </div>
-      <div class="results-list">
+      <div class="search-content__results-list">
         <Card
           v-for="(result, index) in results"
           :key="index"
@@ -304,8 +308,11 @@ const matchesByScope = computed(() => {
 
   results.value.forEach((result) => {
     const sourceType = result.sourceType || 'Unknown'
-    const matchCount = result.matches.reduce((sum, m) => sum + (m.count || 1), 0)
-    scopeMap.set(sourceType, (scopeMap.get(sourceType) || 0) + matchCount)
+    // For exclusive search, count items; for inclusive search, count matches
+    const count = negateSearch.value
+      ? 1
+      : result.matches.reduce((sum, m) => sum + (m.count || 1), 0)
+    scopeMap.set(sourceType, (scopeMap.get(sourceType) || 0) + count)
   })
 
   return Array.from(scopeMap.entries())
@@ -314,14 +321,18 @@ const matchesByScope = computed(() => {
 })
 
 const matchesSummary = computed(() => {
-  const total = totalMatches.value
+  const total = negateSearch.value ? results.value.length : totalMatches.value
   if (matchesByScope.value.length === 0) return ''
 
   const scopeBreakdown = matchesByScope.value
     .map(({ scope, count }) => `${count} in ${scope}`)
     .join(', ')
 
-  return `${total} ${pluralize(total, 'match', 'matches')}: ${scopeBreakdown}`
+  const unit = negateSearch.value
+    ? pluralize(total, 'item', 'items')
+    : pluralize(total, 'match', 'matches')
+
+  return `${total} ${unit}: ${scopeBreakdown}`
 })
 
 function getResultMatchCount(
@@ -378,7 +389,7 @@ function getResultMatchCount(
   }
 
   // Results list
-  .results-list {
+  &__results-list {
     display: flex;
     flex-direction: column;
     gap: var(--space-5);