}
+ >,
sorter: (a, b) => strcmp(a.title, b.title),
sortOrder: tableState.sortOrder("name"),
filteredValue: tableState.filteredValue("name"),
@@ -131,28 +159,14 @@ export default function PluginsPage() {
{
title: "Versions",
key: "versions",
- render: (_, plugin) => <>
- {plugin.status
- ?
- : plugin.meta?.version}
- {plugin.webError && }
- >,
+ responsive: ["md"],
+ render: (_, plugin) => versions(plugin),
},
{
key: "actions",
align: "right",
- render: (_, plugin) => (plugin.status
- // Keep clicks on the update action from opening the plugin
- ? { event.stopPropagation(); }}>
-
-
- : null
- ),
+ responsive: ["md"],
+ render: (_, plugin) => updateAction(plugin),
},
]}
dataSource={tableContents}
diff --git a/packages/web_ui/src/components/SiteLayout.tsx b/packages/web_ui/src/components/SiteLayout.tsx
index 03e183e3..ed03e0ad 100644
--- a/packages/web_ui/src/components/SiteLayout.tsx
+++ b/packages/web_ui/src/components/SiteLayout.tsx
@@ -169,8 +169,10 @@ export default function SiteLayout() {
/>;
let accountMenu =
- } style={{ marginInlineStart: "auto" }}>
- {account.name}
+ } style={{ marginInlineStart: "auto" }}
+ aria-label={`Account menu for ${account.name}`}
+ >
+ {account.name};
@@ -228,7 +230,7 @@ export default function SiteLayout() {
-
+ Clusterio a {
+ font-weight: 600;
+ overflow-wrap: anywhere;
+ }
+}
+
+.plugin-mobile-details {
+ display: flex;
+ flex-direction: column;
+ align-items: flex-start;
+ gap: 12px;
+ margin-top: 8px;
+ overflow-wrap: anywhere;
+}
+
+.plugin-version {
+ display: flex;
+ flex-wrap: wrap;
+ align-items: baseline;
+ column-gap: 12px;
+}
+
/* Keep the sidebar fixed in place (below the header) while content scrolls. */
.site-layout-sider {
position: sticky;
diff --git a/test/manual/README.md b/test/manual/README.md
index 3b24dc23..977b1b4d 100644
--- a/test/manual/README.md
+++ b/test/manual/README.md
@@ -2,6 +2,21 @@
This folder contains files used for performing manual tests that are non-trivial to automate.
+
+## Plugins page on small screens
+
+Use a cluster with several plugins, including one with different running and installed versions and one with a web load error.
+Compare the Plugins page at 390px and 1440px viewport widths, and check the 768px breakpoint.
+
+1. On phones, check that each row shows its name, versions, machine counts, status and update action vertically, without clipping or breaking ordinary words.
+2. Check that a long plugin name wraps and the header branding stays on one line.
+3. Search and sort by name, reload, and check that the selected filter and sort order remain applied.
+4. Open an update or restart checklist, then cancel it; update actions must not navigate to the plugin page.
+5. Open a plugin by its name and by clicking elsewhere in its row.
+6. Open the account menu using the user icon on mobile; the full account name should appear in the menu.
+7. On desktop, check that the name, versions and update action remain separate columns.
+
+
## Setup test mod
Run `node packages/lib/dist/node/build_mod.js --source-dir test/manual/test_mod/ --output-dir mods/` to create the test mod.