From 7153d87f6a9d08a9b7cb7a3ef08eb0d3f87bc697 Mon Sep 17 00:00:00 2001 From: Claude Agent Date: Fri, 20 Mar 2026 22:13:59 +0000 Subject: [PATCH] =?UTF-8?q?style(design):=20FINDING-005=20=E2=80=94=20fix?= =?UTF-8?q?=20tablet=201px=20gap=20where=20no=20header=20shows?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit At exactly 768px, CSS hides desktop header (max-width: 768px) but JS isMobile used < 768 (strict), so MobileTopBar didn't show either. Fix: change < 768 to <= 768 across all 5 views (App, Dashboard, MaturityAnalysis, SettingsHub, DetailedInvoices). Co-Authored-By: Claude Opus 4.6 (1M context) --- src/App.vue | 2 +- src/modules/reports/views/DashboardView.vue | 2 +- src/modules/reports/views/DetailedInvoicesView.vue | 2 +- src/modules/reports/views/MaturityAnalysisView.vue | 2 +- src/modules/reports/views/SettingsHubView.vue | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/App.vue b/src/App.vue index 5a361a9..ba8e6be 100644 --- a/src/App.vue +++ b/src/App.vue @@ -60,7 +60,7 @@ const router = useRouter() // Mobile detection - reactive with resize listener const windowWidth = ref(typeof window !== 'undefined' ? window.innerWidth : 1024) -const isMobile = computed(() => windowWidth.value < 768) +const isMobile = computed(() => windowWidth.value <= 768) const handleResize = () => { windowWidth.value = window.innerWidth diff --git a/src/modules/reports/views/DashboardView.vue b/src/modules/reports/views/DashboardView.vue index 7c04308..e9120dd 100644 --- a/src/modules/reports/views/DashboardView.vue +++ b/src/modules/reports/views/DashboardView.vue @@ -757,7 +757,7 @@ const bancaPreviousSparkline = computed(() => { // Detectare mobile - reactive with resize listener const windowWidth = ref(window.innerWidth); -const isMobile = computed(() => windowWidth.value < 768); +const isMobile = computed(() => windowWidth.value <= 768); const dashboardTitle = computed(() => { const company = companyStore.selectedCompany?.name; diff --git a/src/modules/reports/views/DetailedInvoicesView.vue b/src/modules/reports/views/DetailedInvoicesView.vue index 8ac93b7..fbfe454 100644 --- a/src/modules/reports/views/DetailedInvoicesView.vue +++ b/src/modules/reports/views/DetailedInvoicesView.vue @@ -492,7 +492,7 @@ const switchTab = async (tab) => { // Mobile detection const windowWidth = ref(window.innerWidth) -const isMobile = computed(() => windowWidth.value < 768) +const isMobile = computed(() => windowWidth.value <= 768) const handleResize = () => { windowWidth.value = window.innerWidth diff --git a/src/modules/reports/views/MaturityAnalysisView.vue b/src/modules/reports/views/MaturityAnalysisView.vue index 4a77b96..1d0e846 100644 --- a/src/modules/reports/views/MaturityAnalysisView.vue +++ b/src/modules/reports/views/MaturityAnalysisView.vue @@ -125,7 +125,7 @@ const showDrawer = ref(false) // Detectare mobile - reactive with resize listener const windowWidth = ref(window.innerWidth) -const isMobile = computed(() => windowWidth.value < 768) +const isMobile = computed(() => windowWidth.value <= 768) // Ref to MaturityAnalysisCard const maturityCardRef = ref(null) diff --git a/src/modules/reports/views/SettingsHubView.vue b/src/modules/reports/views/SettingsHubView.vue index fe64eac..a916d25 100644 --- a/src/modules/reports/views/SettingsHubView.vue +++ b/src/modules/reports/views/SettingsHubView.vue @@ -104,7 +104,7 @@ const showDrawer = ref(false) // Detectare mobile - reactive with resize listener const windowWidth = ref(window.innerWidth) -const isMobile = computed(() => windowWidth.value < 768) +const isMobile = computed(() => windowWidth.value <= 768) // Handle window resize for mobile detection const handleResize = () => {