fix: improve DataTable pagination layout responsiveness

[christoph2806]

DataTable Pagination Layout Fix

🎯 Objective

Fix the DataTable pagination layout to ensure proper responsive behavior and alignment across all screen sizes.

🔍 Problem

The pagination elements were vertically stacked on all screen sizes, making it difficult to use on desktop. Additionally, the alignment of elements wasn't optimal for different viewport widths.

🛠️ Solution

Implemented a responsive layout with proper breakpoints and alignment:

Mobile Layout (default)

• Elements stack vertically for better usability on small screens
• Each section (page size selector, navigation, info) takes full width
• Proper spacing between sections

Desktop Layout (sm breakpoint and above)

• Elements arranged horizontally
• Page size selector left-aligned
• Navigation controls and info right-aligned
• Proper spacing between sections

📝 Changes

1. DataTablePagination.tsx

   • Added responsive flex layout with breakpoints
   • Improved container structure for better alignment
   • Added proper spacing classes

2. Pagination.tsx

   • Enhanced PaginationContent component with better alignment
   • Added justify-center for consistent centering

🧪 Testing

• Verified layout on multiple viewport sizes:
  • Mobile (< 640px)
  • Tablet (640px - 1024px)
  • Desktop (> 1024px)
• All tests passing (1041 tests)
• Build successful
• No linting errors (only fast refresh warnings)

📸 Screenshots

Please test the changes on different screen sizes to verify the layout improvements.

🔄 Migration

No migration needed. This is a layout-only change that doesn't affect the component's API or behavior.

📚 Documentation

The changes maintain the existing documentation as they only affect the visual presentation of the pagination controls.

🎨 Design Considerations

• Follows mobile-first design principles
• Maintains consistent spacing and alignment
• Preserves all functionality while improving usability
• Aligns with the UI Kit's responsive design patterns

✅ Checklist

• Responsive layout implemented
• All tests passing
• No linting errors
• Build successful
• Documentation reviewed
• Design patterns followed