Improve table design consistency across the dashboard

.changeset/bumpy-jobs-clean.md

@@ -2,4 +2,4 @@
 "saleor-dashboard": patch
 ---
 
-Update lodash version to `4.17.23`
+Improve table design consistency across the dashboard with unified styling for ResponsiveTable components, better loading states, and improved scroll behavior for variant navigation

AGENTS.md

@@ -127,6 +127,21 @@ The codebase follows a feature-based architecture with shared components:
 - Implement proper form validation with React Hook Form
 - Add internationalization support for user-facing text
 
+### UI Design Guidelines
+
+**Before redesigning any component that displays a list, ask: "What happens with 50+ items?"**
+
+If the list could be long:
+
+- Add scrollable container with `max-height`
+- Keep headers outside the scroll area
+- Auto-scroll to active item on load
+
+Other considerations:
+
+- Loading states: Show skeletons
+- Empty states: Handle zero items gracefully
+
 ### Testing Requirements
 
 - Write unit tests for utility functions and complex components

locale/defaultMessages.json

@@ -500,6 +500,9 @@
     "context": "sum of all pending refunds inside an order",
     "string": "Pending refunds"
   },
+  "0xMUfd": {
+    "string": "No results found for \"{query}\""
+  },
   "1+ROfp": {
     "string": "Transaction"
   },
@@ -1972,6 +1975,10 @@
     "context": "replaced event title",
     "string": "Products were replaced"
   },
+  "AWyKB7": {
+    "context": "card header title",
+    "string": "Channel list"
+  },
   "AY7Tuz": {
     "string": "The same object cannot be in both lists"
   },
@@ -3237,6 +3244,10 @@
     "context": "table column header, sold units preorder quantity",
     "string": "Sold units"
   },
+  "Hd3E1g": {
+    "context": "table header column",
+    "string": "Channel name"
+  },
   "Hgz44z": {
     "context": "dialog header",
     "string": "Delete Voucher"
@@ -5482,10 +5493,6 @@
   "VEext+": {
     "string": "Are you sure you want to delete this image?"
   },
-  "VHuzgq": {
-    "context": "table actions",
-    "string": "Actions"
-  },
   "VIABHy": {
     "context": "error message",
     "string": "Default shipping zone already exists"
@@ -5651,10 +5658,6 @@
   "WHgdsk": {
     "string": "Out of stock"
   },
-  "WIxSDm": {
-    "context": "card header",
-    "string": "{country} class rates"
-  },
   "WK62MN": {
     "string": "Fulfillment"
   },
@@ -7029,6 +7032,10 @@
   "eRqx44": {
     "string": "Search collections..."
   },
+  "eS8xZ6": {
+    "context": "card header",
+    "string": "Tax class rates: {country}"
+  },
   "eUjFjW": {
     "string": "Permission group created"
   },
@@ -7330,10 +7337,6 @@
   "gTr0qE": {
     "string": "Shipping Settings"
   },
-  "gVD1os": {
-    "context": "empty list message",
-    "string": "You haven’t assigned any member to this permission group yet."
-  },
   "gVqSnA": {
     "string": "Assign and save"
   },
@@ -8089,6 +8092,10 @@
     "context": "order return error title when cannot refund",
     "string": "Couldn't refund products"
   },
+  "lCEp2/": {
+    "context": "save button disabled tooltip",
+    "string": "Set prices for all channels to save"
+  },
   "lCPxtT": {
     "context": "resend code label",
     "string": "Resend code"
@@ -9353,6 +9360,10 @@
     "context": "voucher status",
     "string": "Expired"
   },
+  "t84lbb": {
+    "context": "empty list message",
+    "string": "You haven't assigned any member to this permission group yet."
+  },
   "tCLTCb": {
     "context": "tab name",
     "string": "All products"
@@ -9700,6 +9711,9 @@
   "v3WWK+": {
     "string": "Status is invalid"
   },
+  "v8UngX": {
+    "string": "Search warehouses..."
+  },
   "v8e93p": {
     "context": "hint for order total option",
     "string": "Matches what customer owes"
@@ -9811,6 +9825,9 @@
     "context": "default product variant indicator",
     "string": "Default"
   },
+  "vaFjs6": {
+    "string": "No warehouses available to add"
+  },
   "vbop3G": {
     "string": "Create new model"
   },
@@ -9940,9 +9957,6 @@
     "context": "refund amounts were settled",
     "string": "Settled"
   },
-  "wL7VAE": {
-    "string": "Actions"
-  },
   "wL850U": {
     "context": "draft order lines, section header",
     "string": "Order lines"
@@ -10231,10 +10245,6 @@
     "context": "discount value",
     "string": "discount"
   },
-  "yLfbSh": {
-    "context": "support label",
-    "string": "Channel name"
-  },
   "yOaNWB": {
     "context": "delete shipping method",
     "string": "Are you sure you want to delete {name}?"
@@ -10368,10 +10378,6 @@
   "zCb8fX": {
     "string": "Weight"
   },
-  "zD7/M6": {
-    "context": "empty list message",
-    "string": "Please use Assign Members button to do so."
-  },
   "zDvDnG": {
     "context": "modal header",
     "string": "Media from the URL you supply will be shown in the media gallery. You will be able to define the order of the gallery."

src/attributes/components/AttributeListDatagrid/AttributeListDatagrid.tsx

@@ -6,13 +6,12 @@ import {
   DatagridChangeStateContext,
   useDatagridChangeState,
 } from "@dashboard/components/Datagrid/hooks/useDatagridChange";
-import { TablePaginationWithContext } from "@dashboard/components/TablePagination";
+import { DatagridPagination } from "@dashboard/components/TablePagination";
 import { AttributeFragment } from "@dashboard/graphql";
 import { getPrevLocationState } from "@dashboard/hooks/useBackLinkWithState";
 import useNavigator from "@dashboard/hooks/useNavigator";
 import { ListProps, SortPage } from "@dashboard/types";
 import { Item } from "@glideapps/glide-data-grid";
-import { Box } from "@saleor/macaw-ui-next";
 import { useCallback, useMemo } from "react";
 import { useIntl } from "react-intl";
 import { useLocation } from "react-router";
@@ -122,14 +121,12 @@ export const AttributeListDatagrid = ({
         navigatorOpts={{ state: getPrevLocationState(location) }}
       />
 
-      <Box paddingX={6}>
-        <TablePaginationWithContext
-          component="div"
-          settings={settings}
-          disabled={disabled}
-          onUpdateListSettings={onUpdateListSettings}
-        />
-      </Box>
+      <DatagridPagination
+        component="div"
+        settings={settings}
+        disabled={disabled}
+        onUpdateListSettings={onUpdateListSettings}
+      />
     </DatagridChangeStateContext.Provider>
   );
 };