fix: resolve DataTable pagination dropdown sync and AppShell border styling issues (#63)

* fix: resolve DataTable pagination dropdown sync and AppShell border styling issues

* fix: improve pagination dropdown sync with enhanced deduplication logic

---------

Co-authored-by: Developer <developer@example.com>

Author: christoph2806

packages/ui-kit/src/components/data-display/DataTable/DataTable.tsx

@@ -160,19 +160,39 @@ export const DataTable = React.memo(
     // Smart pagination defaults based on data size
     const smartPaginationConfig = useMemo((): PaginationConfig | false => {
       if (pagination === false) return false;
-      if (pagination) return pagination;
+      if (pagination) {
+        // Ensure pageSize is in pageSizeOptions to prevent dropdown sync issues
+        const configPageSize = pagination.pageSize ?? pageSize;
+        const defaultOptions = [10, 25, 50, 100];
+        const options = pagination.pageSizeOptions ?? defaultOptions;
+
+        // Deduplicate and ensure pageSize is in options
+        const uniqueOptions = [...new Set([...options, configPageSize])];
+        const pageSizeOptions = uniqueOptions.sort((a, b) => a - b);
+
+        return {
+          ...pagination,
+          pageSize: configPageSize,
+          pageSizeOptions,
+        };
+      }
 
       // Auto-detect pagination strategy
       if (data.length <= 15) {
         return false; // No pagination for small datasets
       }
 
+      // Ensure default pageSize is in options and deduplicate
+      const defaultOptions = [10, 25, 50, 100];
+      const uniqueOptions = [...new Set([...defaultOptions, pageSize])];
+      const pageSizeOptions = uniqueOptions.sort((a, b) => a - b);
+
       return {
         pageSize: pageSize,
         showSizeSelector: true,
         showPageInfo: true,
         showNavigation: true,
-        pageSizeOptions: [10, 25, 50, 100],
+        pageSizeOptions,
         enableFastNavigation: data.length > 100,
         enableJumpToPage: data.length > 200,
       };

packages/ui-kit/src/components/primitives/MarkdownEditor/MarkdownEditor.tsx

@@ -112,7 +112,9 @@ export function MarkdownEditor({
     <div className={baseClasses} data-testid={dataTestId}>
       {/* Toolbar */}
       <div className={toolbarClasses}>
-        <span style={disabled ? { color: "#000000" } : undefined}>
+        <span
+          style={disabled ? { color: "hsl(var(--foreground))" } : undefined}
+        >
           {isPreview ? "Preview" : "Edit"}
         </span>
         <button

packages/ui-kit/src/layout/AppShell/AppShell.tsx

@@ -123,7 +123,10 @@ export const AppShell: React.FC<AppShellProps> = ({
 
       {/* Footer */}
       {footer && (
-        <div className="mt-auto p-4 bg-background border-t border-gray-200">
+        <div
+          className="mt-auto p-4 bg-background border-t border-border"
+          style={{ borderColor: "hsl(var(--border))" }}
+        >
           {footer}
         </div>
       )}

packages/ui-kit/src/layout/AppShell/AppShellTopBar.tsx

@@ -320,6 +320,7 @@ export const AppShellTopBar: React.FC<AppShellTopBarProps> = ({
         fixed && "sticky top-0 z-40",
         className,
       )}
+      style={{ borderColor: "hsl(var(--border))" }}
       role="banner"
       aria-label="Top navigation bar"
       data-testid={dataTestId}

packages/ui-kit/src/layout/AppShell/ContentWrapper.tsx

@@ -48,14 +48,22 @@ export const ContentWrapper: React.FC<ContentWrapperProps> = ({
     <main className={cn("flex flex-col flex-1 overflow-auto", className)}>
       {/* Breadcrumbs section */}
       {breadcrumbs && breadcrumbs.length > 0 && (
-        <div className={cn("py-2 px-4 border-b border-border", "bg-muted/40")}>
+        <div
+          className={cn("py-2 px-4 border-b bg-muted/40", "border-border")}
+          style={{ borderColor: "hsl(var(--border))" }}
+        >
           <AppShellBreadcrumbs items={breadcrumbs} />
         </div>
       )}
 
       {/* Custom header if provided */}
       {header && (
-        <div className="content-header border-b border-border">{header}</div>
+        <div
+          className="content-header border-b border-border"
+          style={{ borderColor: "hsl(var(--border))" }}
+        >
+          {header}
+        </div>
       )}
 
       {/* Main content */}
@@ -70,7 +78,10 @@ export const ContentWrapper: React.FC<ContentWrapperProps> = ({
 
       {/* Custom footer if provided */}
       {footer && (
-        <div className="content-footer border-t border-border mt-auto">
+        <div
+          className="content-footer border-t border-border mt-auto"
+          style={{ borderColor: "hsl(var(--border))" }}
+        >
           {footer}
         </div>
       )}