mirror of
https://github.com/MHSanaei/3x-ui.git
synced 2026-08-31 15:37:14 +00:00
fix(ui): polish across routing, groups, inbounds, mobile sidebar
A bundle of small UI fixes that surfaced together while reviewing the panel. Routing rules — stale Edit after drag: - Dragging a rule and then clicking its Edit button used to open the modal with the *previous* rule's content. Root cause: desktopColumns was memoized with [t, isMobile, rows.length] (rows.length doesn't change on reorder), so the cached render function kept handing AntD the openEdit closure that captured the pre-drag rules array. Fix is a rulesRef updated each render and read inside openEdit, so even the cached closure sees the live array. - Mobile rule cards on the same page were hard to tell apart: bumped the inter-card gap, slightly stronger border, soft shadow, and a small centered divider line between adjacent cards. Mobile drawer (dark / ultra): - The AntD Menu inside the mobile drawer was rendering with its own darkItemBg (#15161a / #050507) while the drawer body used the lighter colorBgElevated, producing visible two-tone seams. Force the drawer-content / drawer-body to the same dark color that the desktop sider uses, and make the menus transparent so they inherit. Row menus — visual grouping: - Groups page row menu: moved Rename above the divider so the ordering reads safe → divider → destructive (Remove from group, Delete clients, Delete group only) instead of mixing the two groups. - Inbounds page row menu: inserted a divider before delAllClients / delete so the destructive items sit visually separated from the earlier safe actions. Dropdown affordances: - Non-danger dropdown items had no perceivable hover state (default colorBgTextHover is too subtle, especially under the light theme). Apply the same primary-tint pattern the sider/drawer menu uses: 14% primary background and primary color on label + icon. - ant-dropdown-menu-item-divider now uses var(--ant-color-border) (and an explicit rgba in dark) so the separator is actually visible in the light theme. Clients toolbar — narrow-desktop wrap: - Between 769px and 920px, the bulk-action bar (Attach / Detach / Add to group / Ungroup / more + Delete) wrapped to two rows with Delete stranded alone on the right. In that range, switch the toolbar buttons to icon-only, tighten gap to 6px and inline padding to 8px so everything stays on one line.
This commit is contained in:
@@ -77,6 +77,19 @@
|
||||
padding: 6px 0;
|
||||
}
|
||||
|
||||
@media (min-width: 769px) and (max-width: 920px) {
|
||||
.card-toolbar {
|
||||
gap: 6px;
|
||||
}
|
||||
.card-toolbar .ant-btn .ant-btn-icon + span,
|
||||
.card-toolbar .ant-btn > span:not(.ant-btn-icon):not(.ant-tag):not(.anticon) {
|
||||
display: none;
|
||||
}
|
||||
.card-toolbar .ant-btn {
|
||||
padding-inline: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
.email-cell {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user