Apply consistent table sorting to Package page

Remove SortDropdown in favor of clickable table headers for consistency
with Home and Project pages. Add responsive wrapper for horizontal scroll.

CHANGELOG.md

@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Adjusted dark mode color palette to use lighter background tones for better readability and reduced eye strain (#52)
 - Replaced project card grid with sortable data table on Home page for better handling of large project lists
 - Replaced package card grid with sortable data table on Project page for consistency
+- Replaced SortDropdown with table header sorting on Package page for consistency
 - Improved pod naming: Orchard pods now named `orchard-{env}-server-*` for clarity (#51)
 
 ### Fixed

frontend/src/pages/PackagePage.tsx

@@ -5,7 +5,6 @@ import { listTags, getDownloadUrl, getPackage, getMyProjectAccess, UnauthorizedE
 import { Breadcrumb } from '../components/Breadcrumb';
 import { Badge } from '../components/Badge';
 import { SearchInput } from '../components/SearchInput';
-import { SortDropdown, SortOption } from '../components/SortDropdown';
 import { FilterChip, FilterChipGroup } from '../components/FilterChip';
 import { DataTable } from '../components/DataTable';
 import { Pagination } from '../components/Pagination';
@@ -14,11 +13,6 @@ import { useAuth } from '../contexts/AuthContext';
 import './Home.css';
 import './PackagePage.css';
 
-const SORT_OPTIONS: SortOption[] = [
-  { value: 'name', label: 'Name' },
-  { value: 'created_at', label: 'Created' },
-];
-
 function formatBytes(bytes: number): string {
   if (bytes === 0) return '0 B';
   const k = 1024;
@@ -164,8 +158,9 @@ function PackagePage() {
     updateParams({ search: value, page: '1' });
   };
 
-  const handleSortChange = (newSort: string, newOrder: 'asc' | 'desc') => {
-    updateParams({ sort: newSort, order: newOrder, page: '1' });
+  const handleSortChange = (columnKey: string) => {
+    const newOrder = columnKey === sort ? (order === 'asc' ? 'desc' : 'asc') : 'asc';
+    updateParams({ sort: columnKey, order: newOrder, page: '1' });
   };
 
   const handlePageChange = (newPage: number) => {
@@ -376,7 +371,6 @@ function PackagePage() {
           placeholder="Filter tags..."
           className="list-controls__search"
         />
-        <SortDropdown options={SORT_OPTIONS} value={sort} order={order} onChange={handleSortChange} />
       </div>
 
       {hasActiveFilters && (
@@ -385,25 +379,21 @@ function PackagePage() {
         </FilterChipGroup>
       )}
 
-      <DataTable
-        data={tags}
-        columns={columns}
-        keyExtractor={(t) => t.id}
-        emptyMessage={
-          hasActiveFilters
-            ? 'No tags match your filters. Try adjusting your search.'
-            : 'No tags yet. Upload an artifact with a tag to create one!'
-        }
-        onSort={(key) => {
-          if (key === sort) {
-            handleSortChange(key, order === 'asc' ? 'desc' : 'asc');
-          } else {
-            handleSortChange(key, 'asc');
+      <div className="data-table--responsive">
+        <DataTable
+          data={tags}
+          columns={columns}
+          keyExtractor={(t) => t.id}
+          emptyMessage={
+            hasActiveFilters
+              ? 'No tags match your filters. Try adjusting your search.'
+              : 'No tags yet. Upload an artifact with a tag to create one!'
           }
-        }}
-        sortKey={sort}
-        sortOrder={order}
-      />
+          onSort={handleSortChange}
+          sortKey={sort}
+          sortOrder={order}
+        />
+      </div>
 
       {pagination && pagination.total_pages > 1 && (
         <Pagination