feat: make image lists resizable (#2823)

Adds resizable columns and consistent sorting behavior to image list tables

This PR enhances the user experience of image list tables by:
- Making columns resizable in both CustomizedImageList and ImageList components
- Adding consistent sort directions (descend -> ascend -> descend) for sortable columns
- Removing sorter tooltips for cleaner UI
- Setting fixed initial width for image name columns based on screen size
- Converting standard antd Tables to BAITable components for consistency

**Screenshots:**

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/2HueYSdFvL8pOB5mgrUQ/53c64bff-61e1-4d9d-adf8-c95a0abdae83.png)

**Checklist:**

- [ ] Mention to the original issue
- [ ] Documentation
- [ ] Minium required manager version
- [ ] Specific setting for review (eg., KB link, endpoint or how to setup)
- [ ] Minimum requirements to check during review
- [ ] Test case(s) to demonstrate the difference of before/after

To verify:
1. Check that columns can be resized by dragging their borders
2. Verify sort behavior cycles through: descending -> ascending -> descending
3. Confirm image name columns have appropriate initial widths
4. Ensure sorting works without tooltips appearing

react/src/components/BAITable.tsx

@@ -145,6 +145,8 @@ const BAITable: React.FC<BAITableProps> = ({
 
   return (
     <Table
+      sortDirections={['descend', 'ascend', 'descend']}
+      showSorterTooltip={false}
       className={resizable ? styles.resizableTable : ''}
       components={
         resizable

react/src/components/CustomizedImageList.tsx

@@ -12,6 +12,7 @@ import {
   useUpdatableState,
 } from '../hooks';
 import AliasedImageDoubleTags from './AliasedImageDoubleTags';
+import BAITable from './BAITable';
 import { ImageTags } from './ImageTags';
 import TextHighlighter from './TextHighlighter';
 import { CustomizedImageListForgetAndUntagMutation } from './__generated__/CustomizedImageListForgetAndUntagMutation.graphql';
@@ -26,7 +27,7 @@ import {
   SettingOutlined,
 } from '@ant-design/icons';
 import { useLocalStorageState } from 'ahooks';
-import { App, Button, Input, Popconfirm, Table, theme, Typography } from 'antd';
+import { App, Button, Input, Popconfirm, theme, Typography } from 'antd';
 import { AnyObject } from 'antd/es/_util/type';
 import { ColumnsType, ColumnType } from 'antd/es/table';
 import graphql from 'babel-plugin-relay/macro';
@@ -209,6 +210,7 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
         </Typography.Text>
       ),
       sorter: (a, b) => localeCompare(getImageFullName(a), getImageFullName(b)),
+      width: token.screenXS,
     },
     {
       title: t('environment.Registry'),
@@ -433,7 +435,8 @@ const CustomizedImageList: React.FC<PropsWithChildren> = ({ children }) => {
             {t('button.Refresh')}
           </Button>
         </Flex>
-        <Table
+        <BAITable
+          resizable
           loading={isPendingSearchTransition}
           columns={
             columns.filter((column) =>

react/src/components/ImageList.tsx

@@ -11,6 +11,7 @@ import {
   useSuspendedBackendaiClient,
   useUpdatableState,
 } from '../hooks';
+import BAITable from './BAITable';
 import DoubleTag from './DoubleTag';
 import ImageInstallModal from './ImageInstallModal';
 import { ImageTags } from './ImageTags';
@@ -31,7 +32,7 @@ import {
   VerticalAlignBottomOutlined,
 } from '@ant-design/icons';
 import { useLocalStorageState } from 'ahooks';
-import { App, Button, Input, Table, Tag, theme, Typography } from 'antd';
+import { App, Button, Input, Tag, theme, Typography } from 'antd';
 import { ColumnsType, ColumnType } from 'antd/es/table';
 import graphql from 'babel-plugin-relay/macro';
 import _ from 'lodash';
@@ -152,6 +153,7 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
         </Typography.Text>
       ),
       sorter: (a, b) => localeCompare(getImageFullName(a), getImageFullName(b)),
+      width: token.screenXS,
     },
     {
       title: t('environment.Registry'),
@@ -518,7 +520,8 @@ const ImageList: React.FC<{ style?: React.CSSProperties }> = ({ style }) => {
             {t('environment.Install')}
           </Button>
         </Flex>
-        <Table<EnvironmentImage>
+        <BAITable
+          resizable
           rowKey="id"
           scroll={{ x: 'max-content' }}
           pagination={{