fix(ui): preserve shared tag actions and product styling fallbacks

Author: Bill Leoutsakos

apps/sim/app/_styles/globals.css

@@ -1358,6 +1358,10 @@ input[type="search"]::-ms-clear {
     background-color: transparent !important;
     color: var(--text-tertiary) !important;
   }
+
+  html[data-panel-active-tab] .panel-container [data-tab-button] span {
+    color: inherit !important;
+  }
 }
 
 /**

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/[documentId]/components/document-tags-modal/document-tags-modal.tsx

@@ -12,7 +12,6 @@ import {
   ChipModalField,
   ChipModalFooter,
   ChipModalHeader,
-  handleKeyboardActivation,
   Label,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
@@ -386,13 +385,8 @@ export function DocumentTagsModal({
             {documentTags.map((tag, index) => (
               <div key={tag.displayName} className='space-y-2'>
                 <KnowledgeTagRow
-                  role='button'
-                  tabIndex={0}
-                  onClick={() => startEditingTag(index)}
-                  onKeyDown={(event) => {
-                    if (event.target !== event.currentTarget) return
-                    handleKeyboardActivation(event, () => startEditingTag(index))
-                  }}
+                  onActivate={() => startEditingTag(index)}
+                  activateLabel={`Edit ${tag.displayName}`}
                   name={tag.displayName}
                   typeLabel={FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
                   detail={formatValueForDisplay(tag.value, tag.fieldType)}

apps/sim/app/workspace/[workspaceId]/knowledge/[id]/components/base-tags-modal/base-tags-modal.tsx

@@ -12,7 +12,6 @@ import {
   ChipModalFooter,
   ChipModalHeader,
   type ComboboxOption,
-  handleKeyboardActivation,
 } from '@sim/emcn'
 import { createLogger } from '@sim/logger'
 import { getDocumentIcon } from '@/components/icons/document-icons'
@@ -272,13 +271,8 @@ export function BaseTagsModal({ open, onOpenChange, knowledgeBaseId }: BaseTagsM
                 return (
                   <KnowledgeTagRow
                     key={tag.id}
-                    role='button'
-                    tabIndex={0}
-                    onClick={() => handleViewDocuments(tag)}
-                    onKeyDown={(event) => {
-                      if (event.target !== event.currentTarget) return
-                      handleKeyboardActivation(event, () => handleViewDocuments(tag))
-                    }}
+                    onActivate={() => handleViewDocuments(tag)}
+                    activateLabel={`View documents for ${tag.displayName}`}
                     name={tag.displayName}
                     typeLabel={FIELD_TYPE_LABELS[tag.fieldType] || tag.fieldType}
                     detail={

apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row.test.tsx

@@ -0,0 +1,52 @@
+/** @vitest-environment jsdom */
+import { act } from 'react'
+import { createRoot, type Root } from 'react-dom/client'
+import { afterEach, describe, expect, it, vi } from 'vitest'
+import { KnowledgeTagRow } from './knowledge-tag-row'
+
+let root: Root | undefined
+let container: HTMLDivElement | undefined
+
+afterEach(() => {
+  act(() => root?.unmount())
+  container?.remove()
+})
+
+describe('KnowledgeTagRow actions', () => {
+  it('keeps activation and removal as separate keyboard-accessible buttons', () => {
+    Object.assign(globalThis, { IS_REACT_ACT_ENVIRONMENT: true })
+    container = document.createElement('div')
+    document.body.appendChild(container)
+    root = createRoot(container)
+    const onActivate = vi.fn()
+    const onRemove = vi.fn()
+
+    act(() =>
+      root?.render(
+        <KnowledgeTagRow
+          name='Customer'
+          typeLabel='Text'
+          detail='3 documents'
+          activateLabel='View documents for Customer'
+          removeLabel='Delete tag'
+          onActivate={onActivate}
+          onRemove={onRemove}
+        />
+      )
+    )
+
+    const buttons = container.querySelectorAll('button')
+    expect(buttons).toHaveLength(2)
+    expect(buttons[0].contains(buttons[1])).toBe(false)
+    expect(buttons[0].getAttribute('type')).toBe('button')
+    expect(buttons[0].getAttribute('aria-label')).toBe('View documents for Customer')
+
+    act(() => buttons[0].click())
+    expect(onActivate).toHaveBeenCalledTimes(1)
+    expect(onRemove).not.toHaveBeenCalled()
+
+    act(() => buttons[1].click())
+    expect(onActivate).toHaveBeenCalledTimes(1)
+    expect(onRemove).toHaveBeenCalledTimes(1)
+  })
+})

apps/sim/app/workspace/[workspaceId]/knowledge/components/knowledge-tag-row.tsx

@@ -1,14 +1,15 @@
-import type { HTMLAttributes, MouseEventHandler, ReactNode } from 'react'
+import type { MouseEventHandler, ReactNode } from 'react'
 import { Button, cn } from '@sim/emcn'
 import { Trash } from '@sim/emcn/icons'
 
-interface KnowledgeTagRowProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className'> {
+interface KnowledgeTagRowProps {
   name: string
   typeLabel: string
   detail: ReactNode
   truncateDetail?: boolean
+  activateLabel: string
   removeLabel: string
+  onActivate: MouseEventHandler<HTMLButtonElement>
   onRemove: MouseEventHandler<HTMLButtonElement>
 }
 
@@ -18,38 +19,45 @@ export function KnowledgeTagRow({
   typeLabel,
   detail,
   truncateDetail = false,
+  activateLabel,
   removeLabel,
+  onActivate,
   onRemove,
-  ...props
 }: KnowledgeTagRowProps) {
   return (
-    <div
-      {...props}
-      className='flex cursor-pointer items-center gap-2 rounded-sm border p-2 hover-hover:bg-[var(--surface-2)]'
-    >
-      <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>{name}</span>
-      <span className='rounded-sm bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
-        {typeLabel}
-      </span>
-      <div className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]' />
-      <span
-        className={cn(
-          'min-w-0 flex-1 text-[var(--text-muted)] text-caption',
-          truncateDetail && 'truncate'
-        )}
+    <div className='flex items-center rounded-sm border hover-hover:bg-[var(--surface-2)]'>
+      <button
+        type='button'
+        onClick={onActivate}
+        aria-label={activateLabel}
+        className='flex min-w-0 flex-1 cursor-pointer items-center gap-2 p-2 text-left'
       >
-        {detail}
-      </span>
-      <div className='flex shrink-0 items-center gap-1'>
-        <Button
-          aria-label={removeLabel}
-          variant='ghost-destructive-muted'
-          onClick={onRemove}
-          size='icon'
+        <span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>{name}</span>
+        <span className='rounded-sm bg-[var(--surface-3)] px-1.5 py-0.5 text-[var(--text-muted)] text-micro'>
+          {typeLabel}
+        </span>
+        <span
+          aria-hidden='true'
+          className='mb-[-1.5px] h-[14px] w-[1.25px] shrink-0 rounded-full bg-[var(--border-1)]'
+        />
+        <span
+          className={cn(
+            'min-w-0 flex-1 text-[var(--text-muted)] text-caption',
+            truncateDetail && 'truncate'
+          )}
         >
-          <Trash className='size-3' />
-        </Button>
-      </div>
+          {detail}
+        </span>
+      </button>
+      <Button
+        aria-label={removeLabel}
+        variant='ghost-destructive-muted'
+        onClick={onRemove}
+        size='icon'
+        className='mr-2'
+      >
+        <Trash className='size-3' />
+      </Button>
     </div>
   )
 }

apps/sim/app/workspace/[workspaceId]/logs/logs.tsx

@@ -1585,7 +1585,13 @@ function LogsFilterPanel({ searchQuery, onSearchQueryChange }: LogsFilterPanelPr
       </div>
 
       {filtersActive && (
-        <Chip variant='border-shadow' fullWidth onClick={handleClearFilters} align='center'>
+        <Chip
+          variant='border-shadow'
+          fullWidth
+          onClick={handleClearFilters}
+          align='center'
+          className='h-[32px]'
+        >
           Clear All Filters
         </Chip>
       )}

apps/sim/components/auth/public-auth-header.module.css

@@ -0,0 +1,9 @@
+.description {
+  color: var(--text-muted);
+}
+
+@supports (color: color-mix(in srgb, red, blue)) {
+  .description {
+    color: color-mix(in srgb, var(--text-muted) 60%, transparent);
+  }
+}

apps/sim/components/auth/public-auth-header.tsx

@@ -1,4 +1,5 @@
 import type { ReactNode } from 'react'
+import styles from './public-auth-header.module.css'
 
 interface PublicAuthHeaderProps {
   title: ReactNode
@@ -12,7 +13,7 @@ export function PublicAuthHeader({ title, description }: PublicAuthHeaderProps)
       <h1 className='text-balance text-[var(--text-primary)] text-display leading-[110%] tracking-[-0.02em]'>
         {title}
       </h1>
-      <p className='text-[color-mix(in_srgb,var(--text-muted)_60%,transparent)] text-lg leading-[125%] tracking-[0.02em]'>
+      <p className={`${styles.description} text-lg leading-[125%] tracking-[0.02em]`}>
         {description}
       </p>
     </div>