feat: responsive UI overhaul and HTTPS auth fix#241
Open
MydsiIversen wants to merge 19 commits intobetafrom
Open
feat: responsive UI overhaul and HTTPS auth fix#241MydsiIversen wants to merge 19 commits intobetafrom
MydsiIversen wants to merge 19 commits intobetafrom
Conversation
- Hide desktop sidebar on screens below lg breakpoint - Add mobile top bar with hamburger menu and VyManager branding - Open sidebar as a slide-out Sheet drawer on mobile - Close drawer automatically when navigating to a page
- Add mobile header with horizontal section tabs (Sites/Users/Auth) - Replace 3-pane layout with drill-down pattern on mobile: site list → tap site → instance view with back button - Hide desktop left nav and middle pane on mobile - Keep desktop 3-pane layout unchanged on lg+ screens
Apply mobile-friendly grid breakpoints across 9 feature pages: - Dashboard, NAT, Static Routes, PKI, Firewall Groups, Firewall Global Options, L2TP, IPsec, WireGuard - Grids now stack on small screens and expand on larger ones
Apply mobile-friendly grid breakpoints across 19 component files: - Form grids in modals stack to 1 column on mobile (sm:grid-cols-3) - Stat grids in content views start at 2 columns (sm:grid-cols-4/5) - Covers VXLAN, tunnels, OSPF, BGP, HA, bonding, VRF, L2TP, failover, NAT64 modals and content pages
When BETTER_AUTH_SECURE_COOKIES=true (HTTPS deployments), better-auth prefixes cookies with __Secure-. The proxy routes now check for the prefixed cookie first, falling back to the non-prefixed name. This fixes "Authentication required" errors on HTTPS deployments.
- Apply glassmorphism card style matching the login page - Add animated gradient background for visual consistency - Add step labels below progress indicators (Account/Site/Instance) - Place password fields side-by-side on desktop, stack on mobile - Stack step 3 buttons vertically on mobile, horizontal on desktop - Style inputs consistently with login page (h-11, bg-background/50) - Remove redundant step headers, let progress indicator speak - Improve skip button text to "Skip, add later" for clarity
Change p-6 to p-4 sm:p-6 on page-level containers across 18 pages: NAT, NAT64, NAT66, interfaces, static routes, all policy pages, IPsec, L2TP, WireGuard, PKI, and firewall policies. Gives content more breathing room on small screens.
Add mobile tab bars to 4 pages with fixed-width sidebars: - routing/unicast-protocols (BGP, OSPF, etc.) - routing/infrastructure (BFD, MPLS, etc.) - routing/multicast (IGMP, PIM, etc.) - network/vrf (VRF instances) Sidebars hidden on mobile, replaced with horizontal scrollable pill tabs. Desktop layout unchanged.
Policy pages (8): bgp-extended-community, bgp-large-community, bgp-community, access-list, route-map, bgp-as, prefix-list, route - Add mobile Select dropdown for item selection Network pages (3): interfaces, nat, nat64 - Add mobile Select dropdown for section/rule selection Routing: static-failover layout - Add mobile Select dropdown for static routes/failover Also fix monitoring page overflows (command selector, filter bar) and WireGuard public key truncation on mobile.
Jarnster
reviewed
Apr 12, 2026
Member
There was a problem hiding this comment.
Backend currently accepts both.
In: https://github.com/Community-VyProjects/VyManager/blob/feat/responsive-ui/backend/middleware/auth.py
Should we remove "session_token2" in there?
Jarnster
added
UI/UX
Replace the neutral-only primary color with a blue accent (oklch 258°) for primary actions and active states. Add success and warning status color tokens for semantic UI indicators. Update ring and sidebar tokens to match the new accent.
Add PageHeader, PageContainer, LoadingState, ErrorState, EmptyState, and StatusBadge components. These standardize page titles, padding, loading/error/empty states, and semantic status indicators across all pages.
Sidebar now collapses to a 64px icon-only rail with smooth width transition animation. Collapsed state is persisted to localStorage via a new Zustand store. Icons show tooltips on hover when collapsed. Mobile sheet drawer always renders expanded. Active nav items now use a primary/10 background tint for clearer visual feedback.
Desktop layout now includes a thin breadcrumb bar above the main content area. Breadcrumbs are derived from the navigation config and current pathname. Last segment is highlighted as the active page.
Page content now fades in with a slight upward slide (200ms ease-out) on mount, replacing the hard-cut feel when navigating between pages.
…rBanner Replace FirewallReorderBanner, BridgeReorderBanner, NATReorderBanner, and 9 policy reorder banners with a single ReorderBanner component supporting inline and floating variants. Delete all 12 old files.
…rrorState Replace inline h1/subtitle headers with PageHeader across 30+ pages. Replace inline Loader2 spinners with LoadingState and inline error blocks with ErrorState. Replace padding wrappers with PageContainer on applicable pages. Remove unused imports (LoadingSpinner, AlertCircle, Loader2, etc.) across migrated files. Net reduction of ~300 lines.
Member
Author
UI Componentization & Design System UpdateThis push adds the component architecture refactor on top of the responsive work. Here's what changed: New Shared Components (7)
Layout Enhancements
Design System
Code Consolidation
What's NOT touched
Testing
|
![github-code-quality[bot]](https://avatars.githubusercontent.com/u/9919?s=60&v=4){kind=small}
| actions={ | ||
| <div className="flex items-center gap-2"> | ||
| <Button variant="outline" size="sm" onClick={() => loadData()} disabled={saving}> | ||
| <RefreshCw className={cn("h-4 w-4 mr-1.5", loading && "animate-spin")} /> |
|
|
||
| import { Button } from "@/components/ui/button"; | ||
| import { RefreshCw, X, Check, AlertCircle } from "lucide-react"; | ||
| import { cn } from "@/lib/utils"; |
The sidebar was rendering at w-64 inside the w-72 sheet drawer, leaving a visible gap. Now uses w-full in mobile mode and drops the right border since the sheet provides the boundary.
… pages Firewall policies, bridge, DHCP, and WireGuard pages had inner sidebars (w-72) visible on all screen sizes, making them unusable on phones. Now hidden on mobile with horizontal pill selectors for chain/network/tunnel selection matching the pattern used by routing and policy pages.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
3 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
__Secure-prefixed cookies used whenBETTER_AUTH_SECURE_COOKIES=trueTest plan