Skip to content

Commit 08b46dc

Browse files
robertsLandoclaude
andauthored
feat(ui): move pagination to top of nodes table (#4605)
## Summary - Move the data table pagination controls from the bottom to the top of the nodes table on the Control Panel - On small screens (`mdAndDown`), the toolbar row centers all items horizontally and vertically for better mobile UX - Spacer between action buttons and pagination is hidden on small screens so items wrap naturally Fixes #3603 Supersedes #4488 ## Test plan - [ ] Open Control Panel with multiple pages of nodes - [ ] Verify pagination controls appear at the top of the table - [ ] Resize browser below `md` breakpoint and verify toolbar items center properly - [ ] Verify page navigation works correctly from the top controls 🤖 Generated with [Claude Code](https://claude.com/claude-code) --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
1 parent 1e66ea6 commit 08b46dc

File tree

1 file changed

+9
-1
lines changed

1 file changed

+9
-1
lines changed

src/components/nodes-table/index.vue

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,11 @@
1919
style="margin-bottom: 50px; padding-bottom: 0 !important"
2020
>
2121
<template #top>
22-
<v-row class="my-4 ml-1" justify-start>
22+
<v-row
23+
class="my-4 mx-1"
24+
:justify="$vuetify.display.mdAndDown ? 'center' : 'start'"
25+
:align="$vuetify.display.mdAndDown ? 'center' : undefined"
26+
>
2327
<v-text-field
2428
v-model="search"
2529
clearable
@@ -106,6 +110,10 @@
106110
>
107111
Reset Table
108112
</v-btn>
113+
114+
<v-spacer v-if="!$vuetify.display.mdAndDown"></v-spacer>
115+
116+
<v-data-table-footer />
109117
</v-row>
110118
</template>
111119
<template

0 commit comments

Comments
 (0)