@flamingo-stack/openframe-frontend-core 0.0.492-1506.3956.1 → 0.0.492

package/src/components/ui/data-table/data-table-column-filter.tsx

@@ -68,7 +68,13 @@ export function DataTableColumnFilter({
       triggerElement={
         <div
           className={cn(
-            'group flex w-full items-center gap-[var(--spacing-system-xsf)] py-[var(--spacing-system-sf)] rounded-sm cursor-pointer transition-colors duration-200 select-none',
+            // Fixed 48px per design, same as the plain header cell next to it —
+            // NOT padding around the label. The two were drifting: 12px+20px+12px
+            // came out 44px here while the sibling was pinned to 48, so in a
+            // header mixing filterable and plain columns the labels sat on
+            // different centre lines and the filter's hit area was 4px short of
+            // the row it belongs to.
+            'group flex w-full items-center gap-[var(--spacing-system-xsf)] h-12 rounded-sm cursor-pointer transition-colors duration-200 select-none',
             alignJustify(align),
           )}
           aria-label={`Filter by ${label}`}

package/src/components/ui/data-table/data-table-header.tsx

@@ -97,7 +97,10 @@ export function DataTableHeader({
               {rightSlot}
             </div>
           ) : (
-            <div className="ml-auto flex items-center py-[var(--spacing-system-sf)]">
+            // In-flow fallback: with no visible header cell this slot is the
+            // only thing giving the row height, so it carries the same fixed 48
+            // rather than padding out to 44.
+            <div className="ml-auto flex items-center h-12">
               {rightSlot}
             </div>
           ))}

package/src/components/ui/data-table/data-table-skeleton.tsx

@@ -2,6 +2,7 @@
 
 import { cn } from '../../../utils/cn'
 import { useDataTableContext } from './data-table'
+import { getHideClasses } from './utils'
 
 /**
  * Consistent INNER row heights. The row card wraps these in a 1px border on
@@ -51,6 +52,12 @@ export function DataTableSkeleton({
                   className={cn(
                     'flex flex-col justify-center shrink-0',
                     meta?.width || 'flex-1',
+                    // Same responsive hiding the real header and row apply.
+                    // Without it a `hideAt` column was drawn in the skeleton and
+                    // absent from the loaded table, so below that breakpoint the
+                    // remaining columns were sized against a different total and
+                    // the whole row re-laid-out the moment data arrived.
+                    getHideClasses(meta?.hideAt),
                   )}
                 >
                   <div className="h-5 bg-ods-bg-surface rounded-sm w-3/4 mb-[var(--spacing-system-xxs)]" />

package/src/components/ui/index.ts

@@ -176,6 +176,7 @@ export * from './ticket-attachments-list'
 export * from './ticket-note-card'
 export * from './ticket-notes-section'
 export * from './marquee-wall'
-export * from './markdown'
+export * from './simple-markdown-renderer'
+export { RichMarkdownRenderer, type RichMarkdownRendererProps } from './rich-markdown-renderer'
 export * from './filter-pill-row'
 

package/src/components/ui/release-changelog-section.tsx

@@ -4,7 +4,7 @@ import React, { useState } from 'react';
 import { Badge } from './badge';
 import { ChevronDown } from 'lucide-react';
 import { FadePreview } from './fade-preview';
-import { RichMarkdownRenderer } from './markdown';
+import { RichMarkdownRenderer } from './rich-markdown-renderer';
 import type { ChangelogEntry } from '../../types/product-release';
 
 interface ReleaseChangelogSectionProps {