bleese14/004.erp.generic
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Mobile UX: navbar dropdown, compact KPI, table scrolling, remove test toast

Browse Source 
1. Navbar mobile dropdown
   - Fixed potential clipping: added z-50 and top-full to dropdown panel
   - Added overflow-visible to nav wrapper so dropdown is not cut off
   - Wider panel (min-w-52), larger tap targets (py-2.5 per link)
   - Active route indicated by colored dot + bold text
   - Trigger button now shows hamburger icon + page name

2. KPI cards (section-dashboard)
   - grid-cols-2 on mobile (was single column), sm:3, xl:5
   - Reduced padding px-3 py-2.5 (was p-4) and font text-xl (was text-2xl)
   - flex-col gap-0.5 layout for tighter vertical rhythm

3. Test Toast removed
   - Deleted ToastTrigger.jsx component entirely
   - Removed import and conditional render from Layout.astro
   - Removed unused isDev variable from Layout.astro

4. AnimatedDataTable improvements
   - Replaced plain-text loading placeholder with animated skeleton rows
     (pulse animation with variable-width grey bars per column)
   - Added horizontal scroll fade indicators: left/right gradient overlays
     appear automatically via ResizeObserver + scroll event listener
   - scroll-smooth touch scrolling on mobile (WebkitOverflowScrolling, scrollbarWidth)
   - Added scope=col on th elements and aria-label / aria-busy props
   - Slightly snappier spring config (tension 260, friction 28)
   - leave animation reduced to 4px shift (was 8px) for less jarring removal

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>
This commit is contained in:
mariomitte
2026-08-02 23:17:38 +02:00
parent 1d7d631fbd
commit d49ec15cc7
5 changed files with 133 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
frontend/src/layouts/Layout.astro
View File

@@ -5,7 +5,6 @@ import '../styles/global.css';
import ThemeToggle from '../components/ui/ThemeToggle.jsx';
import ButtonDisplayCounter from '../components/atom/ButtonDisplayCounter.jsx';
import Toast from '../components/ui/Toast.jsx';
import ToastTrigger from '../components/ToastTrigger.jsx';
import NetworkGuard from '../components/ui/NetworkGuard.jsx';
import Navbar from '../components/Navbar.jsx';
import TaskCalendarPortal from '../components/layout/TaskCalendarPortal.jsx';
@@ -18,7 +17,6 @@ interface Props {
const { title, isAuthPage = false, minimalNav = false } = Astro.props as Props;
const isProd = import.meta.env.PROD;
const isDev = import.meta.env.DEV;
---
<!DOCTYPE html>
@@ -57,7 +55,6 @@ const isDev = import.meta.env.DEV;
{!isAuthPage && <NetworkGuard client:only="preact" transition:persist="network-guard" />}
<Toast client:only="preact" transition:persist="toast" />
{!isAuthPage && isDev && <ToastTrigger client:load />}
{!isAuthPage && <Navbar client:only="preact" transition:persist="navbar" minimal={minimalNav} />}
{!isAuthPage && <TaskCalendarPortal client:only="preact" transition:persist="calendar-portal" />}