@eventcatalog/core 3.29.1 → 3.30.0

package/eventcatalog/src/components/FieldsExplorer/FieldsExplorer.tsx

@@ -1,5 +1,5 @@
-import { useState, useEffect, useCallback, useRef } from 'react';
-import { ChevronLeft, ChevronRight, Lock, X } from 'lucide-react';
+import { useState, useEffect, useCallback, useRef, useMemo } from 'react';
+import { ChevronLeft, ChevronRight, Lock, Search, X, AlertTriangle } from 'lucide-react';
 import FieldFilters from './FieldFilters';
 import FieldsTable from './FieldsTable';
 import type { FieldResult } from './FieldsTable';
@@ -398,104 +398,157 @@ export default function FieldsExplorer({ isScaleEnabled = false }: FieldsExplore
       }
     : null;
 
+  const conflictingFieldCount = useMemo(() => {
+    return new Set(fields.filter((field) => field.conflicts && field.conflicts.length > 1).map((field) => field.path)).size;
+  }, [fields]);
+
   return (
-    <div className="flex h-full">
-      {/* Filter Sidebar */}
-      <div className="w-[320px] flex-shrink-0 flex flex-col bg-[rgb(var(--ec-page-bg))] bg-gradient-to-bl from-[rgb(var(--ec-page-bg))] via-[rgb(var(--ec-page-bg))] to-[rgb(var(--ec-accent)/0.08)] border-r border-[rgb(var(--ec-page-border))]">
-        <div className="flex-1 overflow-y-auto px-4 pt-4 pb-4">
-          <FieldFilters
-            searchQuery={searchQuery}
-            onSearchChange={setSearchQuery}
-            selectedFormats={selectedFormats}
-            onFormatsChange={setSelectedFormats}
-            selectedMessageTypes={selectedMessageTypes}
-            onMessageTypesChange={setSelectedMessageTypes}
-            sharedOnly={sharedOnly}
-            onSharedOnlyChange={setSharedOnly}
-            conflictingOnly={conflictingOnly}
-            onConflictingOnlyChange={setConflictingOnly}
-            facets={filterFacets}
-            isScaleEnabled={isScaleEnabled}
-          />
-        </div>
-      </div>
+    <div className="flex h-full min-h-0 flex-col overflow-hidden">
+      <div className="flex flex-1 min-h-0 gap-0 overflow-hidden">
+        {/* Filter Sidebar */}
+        <div
+          className="fixed top-0 z-20 flex h-screen w-[320px] flex-shrink-0 flex-col overflow-hidden border-r border-[rgb(var(--ec-page-border))] bg-linear-to-bl from-[rgb(var(--ec-page-bg))] via-[rgb(var(--ec-page-bg))] to-[rgb(var(--ec-accent)/0.08)]"
+          style={{ left: 'var(--ec-vertical-nav-width)', width: 'var(--ec-fields-sidebar-width, 320px)' }}
+        >
+          <div className="flex h-[60px] flex-shrink-0 items-center border-b border-[rgb(var(--ec-page-border))] px-4">
+            <div className="relative min-w-0 flex-1">
+              <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
+                <Search className="h-4 w-4 text-[rgb(var(--ec-icon-color))]" />
+              </div>
+              <input
+                type="text"
+                value={searchQuery}
+                onChange={(e) => setSearchQuery(e.target.value)}
+                placeholder="Search fields..."
+                className="block w-full rounded-md border-0 bg-[rgb(var(--ec-header-bg))] py-1.5 pl-10 pr-8 text-[rgb(var(--ec-header-text))] shadow-xs ring-1 ring-inset ring-[rgb(var(--ec-dropdown-border))] placeholder:text-[rgb(var(--ec-icon-color))] font-light sm:text-sm sm:leading-6 focus:outline-hidden focus:ring-1 focus:ring-inset focus:ring-[rgb(var(--ec-accent))]"
+              />
+              {searchQuery && (
+                <button
+                  onClick={() => setSearchQuery('')}
+                  className="absolute right-2 top-1/2 -translate-y-1/2 p-0.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))]"
+                >
+                  <X className="h-3.5 w-3.5" />
+                </button>
+              )}
+            </div>
+          </div>
 
-      {/* Main Content */}
-      <div className="flex-1 min-w-0 flex flex-col overflow-hidden">
-        {/* Header */}
-        <div className="flex items-center justify-between px-6 py-4">
-          <h2 className="text-lg font-semibold text-[rgb(var(--ec-page-text))]">
-            Fields <span className="text-sm text-[rgb(var(--ec-page-text-muted))] font-normal ml-1">({total})</span>
-          </h2>
+          <div className="flex-1 overflow-y-auto px-4 pt-4 pb-4">
+            <FieldFilters
+              searchQuery={searchQuery}
+              onSearchChange={setSearchQuery}
+              selectedFormats={selectedFormats}
+              onFormatsChange={setSelectedFormats}
+              selectedMessageTypes={selectedMessageTypes}
+              onMessageTypesChange={setSelectedMessageTypes}
+              sharedOnly={sharedOnly}
+              onSharedOnlyChange={setSharedOnly}
+              conflictingOnly={conflictingOnly}
+              onConflictingOnlyChange={setConflictingOnly}
+              facets={filterFacets}
+              isScaleEnabled={isScaleEnabled}
+            />
+          </div>
         </div>
 
-        {/* Error state */}
-        {error && (
-          <div className="mx-6 mb-4 px-4 py-3 rounded-lg border border-red-300 bg-red-50 text-red-700 text-sm">{error}</div>
-        )}
+        {/* Main Content */}
+        <div
+          className="flex-1 min-h-0 min-w-0 flex flex-col overflow-hidden bg-[rgb(var(--ec-page-bg))]"
+          style={{ marginLeft: 'var(--ec-fields-sidebar-width, 320px)' }}
+        >
+          {/* Header */}
+          <div className="flex items-center justify-between px-6 py-4">
+            <h2 className="text-lg font-semibold text-[rgb(var(--ec-page-text))]">
+              Fields <span className="text-sm text-[rgb(var(--ec-page-text-muted))] font-normal ml-1">({total})</span>
+            </h2>
+          </div>
 
-        {/* Table */}
-        <FieldsTable fields={fields} onSelectField={handleSelectField} isLoading={isLoading} isScaleEnabled={isScaleEnabled} />
-
-        {/* Pagination */}
-        <div className="flex-shrink-0 flex items-center justify-between px-6 py-3 border-t border-[rgb(var(--ec-page-border))]">
-          <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">
-            {total > 0 && (
-              <>
-                <span className="font-medium text-[rgb(var(--ec-page-text))]">{fields.length}</span> of{' '}
-                <span className="font-medium text-[rgb(var(--ec-page-text))]">{total}</span> fields
-              </>
-            )}
-          </span>
-          <div className="flex items-center gap-1.5">
-            <button
-              className="p-1.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-              onClick={handlePrevPage}
-              disabled={currentPageIndex === 0}
-              title="Previous page"
-            >
-              <ChevronLeft className="w-4 h-4" />
-            </button>
-            <span className="text-xs tabular-nums text-[rgb(var(--ec-page-text-muted))] min-w-[40px] text-center">
-              <span className="font-medium text-[rgb(var(--ec-page-text))]">{currentPageIndex + 1}</span>
+          {/* Error state */}
+          {error && (
+            <div className="mx-6 mb-4 px-4 py-3 rounded-lg border border-red-300 bg-red-50 text-red-700 text-sm">{error}</div>
+          )}
+
+          {conflictingFieldCount > 0 && (
+            <div className="mx-6 mb-4 rounded-lg border border-amber-500/25 bg-amber-500/8 px-4 py-3 text-sm text-[rgb(var(--ec-page-text))]">
+              <div className="flex items-start gap-2.5">
+                <AlertTriangle className="mt-0.5 h-4 w-4 flex-shrink-0 text-amber-500" />
+                <div>
+                  <p className="font-medium text-[rgb(var(--ec-page-text))]">
+                    {conflictingFieldCount} conflicting {conflictingFieldCount === 1 ? 'property' : 'properties'} found
+                  </p>
+                  <p className="mt-1 text-[0.8rem] text-[rgb(var(--ec-page-text-muted))]">
+                    These properties are used with more than one type across the current results.
+                  </p>
+                </div>
+              </div>
+            </div>
+          )}
+
+          {/* Table */}
+          <FieldsTable fields={fields} onSelectField={handleSelectField} isLoading={isLoading} isScaleEnabled={isScaleEnabled} />
+
+          {/* Pagination */}
+          <div className="flex-shrink-0 flex items-center justify-between px-6 py-3 border-t border-[rgb(var(--ec-page-border))]">
+            <span className="text-xs text-[rgb(var(--ec-page-text-muted))]">
+              {total > 0 && (
+                <>
+                  <span className="font-medium text-[rgb(var(--ec-page-text))]">{fields.length}</span> of{' '}
+                  <span className="font-medium text-[rgb(var(--ec-page-text))]">{total}</span> fields
+                </>
+              )}
             </span>
-            <button
-              className="p-1.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
-              onClick={handleNextPage}
-              disabled={!cursor}
-              title="Next page"
-            >
-              <ChevronRight className="w-4 h-4" />
-            </button>
+            <div className="flex items-center gap-1.5">
+              <button
+                className="p-1.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                onClick={handlePrevPage}
+                disabled={currentPageIndex === 0}
+                title="Previous page"
+              >
+                <ChevronLeft className="w-4 h-4" />
+              </button>
+              <span className="text-xs tabular-nums text-[rgb(var(--ec-page-text-muted))] min-w-[60px] text-center">
+                <span className="font-medium text-[rgb(var(--ec-page-text))]">{currentPageIndex + 1}</span>
+                {' / '}
+                <span>{Math.max(cursorHistory.length + (cursor ? 2 : 1), currentPageIndex + 1)}</span>
+              </span>
+              <button
+                className="p-1.5 text-[rgb(var(--ec-icon-color))] hover:text-[rgb(var(--ec-page-text))] disabled:opacity-30 disabled:cursor-not-allowed transition-colors"
+                onClick={handleNextPage}
+                disabled={!cursor}
+                title="Next page"
+              >
+                <ChevronRight className="w-4 h-4" />
+              </button>
+            </div>
           </div>
         </div>
-      </div>
 
-      {/* Field Detail Modal with Node Graph */}
-      {selectedField && !isScaleEnabled && (
-        <FieldLineageUpgradeModal fieldPath={selectedField.path} onClose={() => setSelectedField(null)} />
-      )}
-      {selectedField && isScaleEnabled && (
-        <FieldNodeGraph
-          fieldPath={selectedField.path}
-          fieldType={selectedField.type}
-          fieldDescription={selectedField.description}
-          fieldRequired={selectedField.required}
-          fieldConflicts={selectedField.conflicts}
-          occurrences={selectedField.occurrences.map((f) => ({
-            messageId: f.messageId,
-            messageVersion: f.messageVersion,
-            messageType: f.messageType,
-            messageName: f.messageName,
-            messageSummary: f.messageSummary,
-            messageOwners: f.messageOwners,
-            fieldType: f.type,
-            producers: f.producers,
-            consumers: f.consumers,
-          }))}
-          onClose={() => setSelectedField(null)}
-        />
-      )}
+        {/* Field Detail Modal with Node Graph */}
+        {selectedField && !isScaleEnabled && (
+          <FieldLineageUpgradeModal fieldPath={selectedField.path} onClose={() => setSelectedField(null)} />
+        )}
+        {selectedField && isScaleEnabled && (
+          <FieldNodeGraph
+            fieldPath={selectedField.path}
+            fieldType={selectedField.type}
+            fieldDescription={selectedField.description}
+            fieldRequired={selectedField.required}
+            fieldConflicts={selectedField.conflicts}
+            occurrences={selectedField.occurrences.map((f) => ({
+              messageId: f.messageId,
+              messageVersion: f.messageVersion,
+              messageType: f.messageType,
+              messageName: f.messageName,
+              messageSummary: f.messageSummary,
+              messageOwners: f.messageOwners,
+              fieldType: f.type,
+              producers: f.producers,
+              consumers: f.consumers,
+            }))}
+            onClose={() => setSelectedField(null)}
+          />
+        )}
+      </div>
     </div>
   );
 }

package/eventcatalog/src/components/FieldsExplorer/FieldsTable.tsx

@@ -56,13 +56,12 @@ function MessageBadge({ id, name, version, type }: { id: string; name?: string;
     <a
       href={messageUrl}
       onClick={(e) => e.stopPropagation()}
-      className="group/msg inline-flex items-center gap-1.5 text-xs hover:text-[rgb(var(--ec-accent))] transition-colors"
+      className="group/msg inline-flex items-center gap-1.5 text-[0.8rem] text-[rgb(var(--ec-page-text-muted))] hover:text-[rgb(var(--ec-accent))] transition-colors"
     >
       <Icon className={`h-3.5 w-3.5 ${colorClasses[color] || 'text-gray-500'} flex-shrink-0`} />
-      <span className="truncate max-w-[160px] text-[rgb(var(--ec-page-text))] group-hover/msg:text-[rgb(var(--ec-accent))]">
+      <span className="truncate max-w-[160px] text-[rgb(var(--ec-page-text-muted))] group-hover/msg:text-[rgb(var(--ec-accent))]">
         {name || id}
       </span>
-      <span className="text-[rgb(var(--ec-icon-color))]">v{version}</span>
     </a>
   );
 }
@@ -92,7 +91,7 @@ function FieldPathCell({ path }: { path: string }) {
 export default function FieldsTable({ fields, onSelectField, isLoading, isScaleEnabled = false }: FieldsTableProps) {
   if (isLoading) {
     return (
-      <div className="flex-1 flex items-center justify-center">
+      <div className="flex-1 flex items-center justify-center px-6 pb-5">
         <div className="flex flex-col items-center gap-3">
           <div className="w-8 h-8 border-2 border-[rgb(var(--ec-accent))] border-t-transparent rounded-full animate-spin" />
           <span className="text-sm text-[rgb(var(--ec-page-text-muted))]">Loading fields...</span>
@@ -103,7 +102,7 @@ export default function FieldsTable({ fields, onSelectField, isLoading, isScaleE
 
   if (fields.length === 0) {
     return (
-      <div className="flex-1 flex items-center justify-center">
+      <div className="flex-1 flex items-center justify-center px-6 pb-5">
         <div className="flex flex-col items-center justify-center text-[rgb(var(--ec-page-text-muted))]">
           <SearchX className="w-10 h-10 text-[rgb(var(--ec-icon-color))] mb-3 opacity-50" />
           <p className="text-sm font-medium text-[rgb(var(--ec-page-text-muted))]">No schema fields found</p>
@@ -117,122 +116,126 @@ export default function FieldsTable({ fields, onSelectField, isLoading, isScaleE
   }
 
   return (
-    <div className="flex-1 overflow-auto px-6">
-      <table className="min-w-full divide-y divide-[rgb(var(--ec-page-border))]">
-        <thead className="sticky top-0 z-10 bg-[rgb(var(--ec-page-bg))]">
-          <tr>
-            <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
-              Field Path
-            </th>
-            <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
-              Type
-            </th>
-            <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
-              Message
-            </th>
-            <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
-              Format
-            </th>
-            <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
-              Required
-            </th>
-            {isScaleEnabled && (
+    <div className="min-h-0 flex-1 overflow-auto px-6 pb-5">
+      <div className="overflow-hidden rounded-xl border border-[rgb(var(--ec-page-border)/0.72)] dark:border-white/10 bg-[rgb(var(--ec-dropdown-bg)/0.66)]">
+        <table className="min-w-full divide-y divide-[rgb(var(--ec-page-border)/0.62)] dark:divide-white/10">
+          <thead className="sticky top-0 z-10 bg-[rgb(var(--ec-content-hover)/0.45)]">
+            <tr>
               <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
-                Consistency
+                Property
               </th>
-            )}
-            {isScaleEnabled && (
               <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
-                Used In
+                Type
               </th>
-            )}
-            <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
-              Owners
-            </th>
-          </tr>
-        </thead>
-        <tbody className="divide-y divide-[rgb(var(--ec-page-border)/0.5)]">
-          {fields.map((field, index) => {
-            const rowKey = `${field.path}-${field.messageId}-${field.messageVersion}-${index}`;
-            const owners = field.messageOwners || [];
+              <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
+                Message
+              </th>
+              <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
+                Format
+              </th>
+              <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
+                Required
+              </th>
+              {isScaleEnabled && (
+                <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
+                  Consistency
+                </th>
+              )}
+              {isScaleEnabled && (
+                <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
+                  Used In
+                </th>
+              )}
+              <th className="px-4 py-2.5 text-left text-[11px] font-medium text-[rgb(var(--ec-page-text-muted))] uppercase tracking-wider">
+                Owners
+              </th>
+            </tr>
+          </thead>
+          <tbody className="divide-y divide-[rgb(var(--ec-page-border)/0.5)] dark:divide-white/8">
+            {fields.map((field, index) => {
+              const rowKey = `${field.path}-${field.messageId}-${field.messageVersion}-${index}`;
+              const owners = field.messageOwners || [];
 
-            return (
-              <tr
-                key={rowKey}
-                className="group cursor-pointer transition-colors hover:bg-[rgb(var(--ec-content-hover))]"
-                onClick={() => onSelectField(field.path)}
-              >
-                <td className="px-4 py-3 text-sm max-w-[300px]">
-                  <div className="overflow-x-auto">
-                    <FieldPathCell path={field.path} />
-                  </div>
-                </td>
-                <td className="px-4 py-3 text-sm font-mono text-[rgb(var(--ec-page-text-muted))]">{field.type}</td>
-                <td className="px-4 py-3 text-sm">
-                  <MessageBadge
-                    id={field.messageId}
-                    name={field.messageName}
-                    version={field.messageVersion}
-                    type={field.messageType}
-                  />
-                </td>
-                <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">{field.schemaFormat}</td>
-                <td className="px-4 py-3 text-sm">
-                  {field.required && (
-                    <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-red-500/10 text-red-500 border border-red-500/20">
-                      Required
-                    </span>
-                  )}
-                </td>
-                {isScaleEnabled && (
-                  <td className="px-4 py-3 text-sm">
-                    {field.conflicts && field.conflicts.length > 1 ? (
-                      <div
-                        className="flex items-center gap-1.5"
-                        title={field.conflicts.map((c) => `${c.type} (${c.count})`).join(', ')}
-                      >
-                        <AlertTriangle className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
-                        <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-500/10 text-amber-600 border border-amber-500/20">
-                          {field.conflicts.length} types
-                        </span>
-                      </div>
+              return (
+                <tr
+                  key={rowKey}
+                  className="group cursor-pointer bg-transparent transition-colors hover:bg-[rgb(var(--ec-content-hover)/0.38)]"
+                  onClick={() => onSelectField(field.path)}
+                >
+                  <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text))] max-w-[300px]">
+                    <div className="overflow-x-auto">
+                      <FieldPathCell path={field.path} />
+                    </div>
+                  </td>
+                  <td className="px-4 py-3 text-sm font-mono text-[rgb(var(--ec-page-text-muted))]">{field.type}</td>
+                  <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text))]">
+                    <MessageBadge
+                      id={field.messageId}
+                      name={field.messageName}
+                      version={field.messageVersion}
+                      type={field.messageType}
+                    />
+                  </td>
+                  <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">{field.schemaFormat}</td>
+                  <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                    {field.required ? (
+                      <Check className="h-4 w-4 text-green-500" />
                     ) : (
-                      <span className="text-[10px] text-green-500 font-medium">Consistent</span>
+                      <span className="text-[0.8rem] text-[rgb(var(--ec-page-text-muted))]">-</span>
                     )}
                   </td>
-                )}
-                {isScaleEnabled && (
-                  <td className="px-4 py-3 text-sm">
-                    <span className="inline-flex items-center px-2 py-0.5 rounded-full text-[11px] font-medium bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))]">
-                      {field.usedInCount || 1} {(field.usedInCount || 1) === 1 ? 'schema' : 'schemas'}
-                    </span>
-                  </td>
-                )}
-                <td className="px-4 py-3 text-sm">
-                  {owners.length > 0 ? (
-                    <div className="flex items-center gap-1 flex-wrap">
-                      {owners.slice(0, 2).map((owner) => (
-                        <span
-                          key={owner}
-                          className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))] truncate max-w-[100px]"
-                          title={owner}
+                  {isScaleEnabled && (
+                    <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                      {field.conflicts && field.conflicts.length > 1 ? (
+                        <div
+                          className="flex items-center gap-1.5"
+                          title={field.conflicts.map((c) => `${c.type} (${c.count})`).join(', ')}
                         >
-                          {owner}
+                          <AlertTriangle className="w-3.5 h-3.5 text-amber-500 flex-shrink-0" />
+                          <span className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-semibold bg-amber-500/10 text-amber-600 border border-amber-500/20">
+                            {field.conflicts.length} types
+                          </span>
+                        </div>
+                      ) : (
+                        <span className="inline-flex items-center" title="All usages of this field match the same type">
+                          <Check className="h-4 w-4 text-green-500" />
                         </span>
-                      ))}
-                      {owners.length > 2 && (
-                        <span className="text-[10px] text-[rgb(var(--ec-page-text-muted))]">+{owners.length - 2}</span>
                       )}
-                    </div>
-                  ) : (
-                    <span className="text-[rgb(var(--ec-page-text-muted))] text-xs">-</span>
+                    </td>
+                  )}
+                  {isScaleEnabled && (
+                    <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                      <span className="text-[0.8rem] text-[rgb(var(--ec-page-text-muted))]">
+                        {field.usedInCount || 1} {(field.usedInCount || 1) === 1 ? 'schema' : 'schemas'}
+                      </span>
+                    </td>
                   )}
-                </td>
-              </tr>
-            );
-          })}
-        </tbody>
-      </table>
+                  <td className="px-4 py-3 text-sm text-[rgb(var(--ec-page-text-muted))]">
+                    {owners.length > 0 ? (
+                      <div className="flex items-center gap-1 flex-wrap">
+                        {owners.slice(0, 2).map((owner) => (
+                          <span
+                            key={owner}
+                            className="inline-flex items-center px-1.5 py-0.5 rounded text-[10px] font-medium bg-[rgb(var(--ec-accent)/0.1)] text-[rgb(var(--ec-accent))] truncate max-w-[100px]"
+                            title={owner}
+                          >
+                            {owner}
+                          </span>
+                        ))}
+                        {owners.length > 2 && (
+                          <span className="text-[10px] text-[rgb(var(--ec-page-text-muted))]">+{owners.length - 2}</span>
+                        )}
+                      </div>
+                    ) : (
+                      <span className="text-[0.8rem] text-[rgb(var(--ec-page-text-muted))]">-</span>
+                    )}
+                  </td>
+                </tr>
+              );
+            })}
+          </tbody>
+        </table>
+      </div>
     </div>
   );
 }

package/eventcatalog/src/components/Header.astro

@@ -9,6 +9,8 @@ import { EnvironmentDropdown } from './EnvironmentDropdown';
 import ChatPanelButton from './ChatPanel/ChatPanelButton';
 import ThemeToggle from './ThemeToggle';
 
+const { showNestedSideBar = true } = Astro.props;
+
 let session = null;
 if (isAuthEnabled()) {
   session = await getSession(Astro.request);
@@ -25,26 +27,14 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
 
 <nav
   id="eventcatalog-header"
-  class="fixed top-0 left-0 right-0 h-header bg-[rgb(var(--ec-header-bg))] border-b border-[rgb(var(--ec-header-border))] py-3 font-bold text-xl z-10 text-[rgb(var(--ec-header-text))]"
+  class="fixed top-0 right-0 h-[60px] bg-[rgb(var(--ec-header-bg))] border-b border-[rgb(var(--ec-header-border))] py-3 font-bold text-xl z-50 text-[rgb(var(--ec-header-text))]"
+  style={showNestedSideBar
+    ? 'left: calc(var(--ec-vertical-nav-width, 14rem) + var(--ec-sidebar-panel-width, 20rem));'
+    : 'left: var(--ec-vertical-nav-width, 14rem);'}
 >
-  <div class="px-4 sm:px-4 lg:px-4">
+  <div class="px-6">
     <div class="flex justify-between items-center">
-      <div class="flex-shrink-0 flex items-center w-3/12 lg:w-[360px]">
-        <a href={buildUrl(catalog.landingPage || '/')} class="flex space-x-2 items-center group">
-          {
-            logo.src && logo.src !== '/' && (
-              <img alt={logo.alt} src={buildUrl(logo.src, true)} class="w-8 h-8 transition-transform group-hover:scale-105" />
-            )
-          }
-          {
-            logo.text && (
-              <span class="hidden sm:inline-block text-[1em] transition-colors group-hover:text-gray-600">{logo.text}</span>
-            )
-          }
-        </a>
-      </div>
-
-      <div class="hidden lg:flex flex-grow -ml-1 items-center">
+      <div class="hidden lg:flex flex-grow items-center">
         <div class="w-full max-w-xl">
           <Search />
         </div>
@@ -211,7 +201,7 @@ const repositoryUrl = catalog?.repositoryUrl || 'https://github.com/event-catalo
   </div>
 </nav>
 
-<div id="eventcatalog-header-spacer" class="h-header"></div>
+<div id="eventcatalog-header-spacer" class="h-[60px]"></div>
 <!-- Spacer to prevent content from being hidden under the fixed header -->
 
 <script>

package/eventcatalog/src/components/MDX/Accordion/Accordion.tsx

@@ -1,6 +1,5 @@
 import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
-import { MinusIcon } from '@heroicons/react/16/solid';
-import { PlusIcon } from '@heroicons/react/24/outline';
+import { ChevronDownIcon } from '@heroicons/react/20/solid';
 import { useEffect } from 'react';
 
 declare global {
@@ -12,8 +11,8 @@ declare global {
 
 export default function Example({ title, children }: any) {
   return (
-    <div className="border border-[rgb(var(--ec-page-border))] rounded-md px-4 shadow-xs py-2 accordion bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))]">
-      <Disclosure as="div" key={title} className="">
+    <div className="accordion border border-[rgb(var(--ec-page-border))] rounded-lg bg-[rgb(var(--ec-card-bg,var(--ec-page-bg)))] my-3">
+      <Disclosure as="div" key={title}>
         {({ open }) => {
           useEffect(() => {
             if (open) {
@@ -30,17 +29,16 @@ export default function Example({ title, children }: any) {
 
           return (
             <div>
-              <DisclosureButton className="flex w-full items-start justify-between text-left text-[rgb(var(--ec-page-text))]">
-                <span className="text-base font-semibold leading-7">{title}</span>
-                <span className="ml-6 flex h-7 items-center">
-                  {open ? (
-                    <MinusIcon className="h-6 w-6" aria-hidden="true" />
-                  ) : (
-                    <PlusIcon className="h-6 w-6" aria-hidden="true" />
-                  )}
-                </span>
+              <DisclosureButton className="group flex w-full items-center gap-3 px-5 py-4 text-left text-[rgb(var(--ec-page-text))] hover:bg-[rgb(var(--ec-page-text)/0.03)] transition-colors">
+                <ChevronDownIcon
+                  className={`h-5 w-5 shrink-0 text-[rgb(var(--ec-page-text-muted))] transition-transform duration-200 ${
+                    open ? 'rotate-0' : '-rotate-90'
+                  }`}
+                  aria-hidden="true"
+                />
+                <span className="text-base font-semibold leading-6">{title}</span>
               </DisclosureButton>
-              <DisclosurePanel as="dd" className="pr-12 py-4 prose prose-sm max-w-none">
+              <DisclosurePanel as="dd" className="px-5 pb-5 pt-1 pl-12 prose prose-sm max-w-none">
                 <div className="text-base leading-7 text-[rgb(var(--ec-page-text-muted))]">{children}</div>
               </DisclosurePanel>
             </div>