From c5cfe3467c038f5cd338175fac1b3298b55e4609 Mon Sep 17 00:00:00 2001 From: Claude Agent Date: Fri, 20 Mar 2026 22:41:17 +0000 Subject: [PATCH] fix(design): standardize mobile breakpoint to <= 768 across all views Align remaining 12 files with the corrected breakpoint from FINDING-005. Using < 768 caused a 1px inconsistency at exactly 768px where CSS media queries (max-width: 768px) triggered mobile but JS did not. Co-Authored-By: Claude Opus 4.6 (1M context) --- src/modules/data-entry/views/OCRMetricsView.vue | 4 ++-- .../data-entry/views/receipts/ReceiptCreateUnifiedView.vue | 4 ++-- src/modules/data-entry/views/receipts/ReceiptsListView.vue | 4 ++-- src/modules/reports/views/BankCashRegisterView.vue | 4 ++-- src/modules/reports/views/BankView.vue | 4 ++-- src/modules/reports/views/CacheStatsView.vue | 4 ++-- src/modules/reports/views/CashView.vue | 4 ++-- src/modules/reports/views/FinancialIndicatorsView.vue | 4 ++-- src/modules/reports/views/InvoicesView.vue | 4 ++-- src/modules/reports/views/ServerLogsView.vue | 4 ++-- src/modules/reports/views/TelegramView.vue | 4 ++-- src/modules/reports/views/TrialBalanceView.vue | 4 ++-- 12 files changed, 24 insertions(+), 24 deletions(-) diff --git a/src/modules/data-entry/views/OCRMetricsView.vue b/src/modules/data-entry/views/OCRMetricsView.vue index 359aad8..1171b4f 100644 --- a/src/modules/data-entry/views/OCRMetricsView.vue +++ b/src/modules/data-entry/views/OCRMetricsView.vue @@ -449,7 +449,7 @@ const daysOptions = [ ] // Mobile detection -const isMobile = ref(window.innerWidth < 768) +const isMobile = ref(window.innerWidth <= 768) const showFilters = ref(false) // History filters @@ -736,7 +736,7 @@ const clearFilters = () => { // Handle resize const handleResize = () => { - isMobile.value = window.innerWidth < 768 + isMobile.value = window.innerWidth <= 768 if (!isMobile.value) { showFilters.value = false // Reinit charts when switching to desktop diff --git a/src/modules/data-entry/views/receipts/ReceiptCreateUnifiedView.vue b/src/modules/data-entry/views/receipts/ReceiptCreateUnifiedView.vue index 9441424..befb242 100644 --- a/src/modules/data-entry/views/receipts/ReceiptCreateUnifiedView.vue +++ b/src/modules/data-entry/views/receipts/ReceiptCreateUnifiedView.vue @@ -255,12 +255,12 @@ const store = useReceiptsStore() const companyStore = useCompanyStore() // US-041: Mobile detection and keyboard awareness -const isMobile = ref(window.innerWidth < 768) +const isMobile = ref(window.innerWidth <= 768) const keyboardVisible = ref(false) const initialViewportHeight = ref(window.innerHeight) const handleResize = () => { - isMobile.value = window.innerWidth < 768 + isMobile.value = window.innerWidth <= 768 // US-041: Detect virtual keyboard on mobile // When keyboard opens, viewport height decreases significantly diff --git a/src/modules/data-entry/views/receipts/ReceiptsListView.vue b/src/modules/data-entry/views/receipts/ReceiptsListView.vue index e2b91de..a3636cd 100644 --- a/src/modules/data-entry/views/receipts/ReceiptsListView.vue +++ b/src/modules/data-entry/views/receipts/ReceiptsListView.vue @@ -1165,10 +1165,10 @@ const AUTO_REFRESH_INTERVAL_MS = 5000 // 5 seconds between refreshes when proces let isSSEConnected = false // Mobile detection -const isMobile = ref(window.innerWidth < 768) +const isMobile = ref(window.innerWidth <= 768) const showFilters = ref(false) const handleResize = () => { - isMobile.value = window.innerWidth < 768 + isMobile.value = window.innerWidth <= 768 } // US-040: Mobile Android-Native Layout State diff --git a/src/modules/reports/views/BankCashRegisterView.vue b/src/modules/reports/views/BankCashRegisterView.vue index 988af87..70b6d9f 100644 --- a/src/modules/reports/views/BankCashRegisterView.vue +++ b/src/modules/reports/views/BankCashRegisterView.vue @@ -418,7 +418,7 @@ const authStore = useAuthStore(); const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null); // Mobile state -const isMobile = ref(window.innerWidth < 768); +const isMobile = ref(window.innerWidth <= 768); const showFilters = ref(false); const actionsMenu = ref(null); const showDrawer = ref(false); @@ -507,7 +507,7 @@ const handleTopBarAction = (action, event) => { // Handle window resize const handleResize = () => { - isMobile.value = window.innerWidth < 768; + isMobile.value = window.innerWidth <= 768; if (!isMobile.value) { showFilters.value = false; // Reset when switching to desktop } diff --git a/src/modules/reports/views/BankView.vue b/src/modules/reports/views/BankView.vue index 8183093..e9b5386 100644 --- a/src/modules/reports/views/BankView.vue +++ b/src/modules/reports/views/BankView.vue @@ -410,7 +410,7 @@ const authStore = useAuthStore(); const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null); // Mobile state -const isMobile = ref(window.innerWidth < 768); +const isMobile = ref(window.innerWidth <= 768); const showFilters = ref(false); const showDrawer = ref(false); const expandedMeta = ref(new Set()); @@ -503,7 +503,7 @@ const handleTopBarAction = (action, event) => { // Handle window resize const handleResize = () => { - isMobile.value = window.innerWidth < 768; + isMobile.value = window.innerWidth <= 768; if (!isMobile.value) { showFilters.value = false; } diff --git a/src/modules/reports/views/CacheStatsView.vue b/src/modules/reports/views/CacheStatsView.vue index 33c5721..c5d7901 100644 --- a/src/modules/reports/views/CacheStatsView.vue +++ b/src/modules/reports/views/CacheStatsView.vue @@ -231,7 +231,7 @@ const showClearDialog = ref(false); const clearScope = ref("current"); // US-111/US-608: Mobile state -const isMobile = ref(window.innerWidth < 768); +const isMobile = ref(window.innerWidth <= 768); // US-111: Mobile TopBar actions (refresh only for cache stats) const mobileTopBarActions = computed(() => [ @@ -253,7 +253,7 @@ const handleTopBarAction = (action) => { // US-111: Handle window resize const handleResize = () => { - isMobile.value = window.innerWidth < 768; + isMobile.value = window.innerWidth <= 768; }; const responseTimesTable = computed(() => { diff --git a/src/modules/reports/views/CashView.vue b/src/modules/reports/views/CashView.vue index 41e45e2..9c082a5 100644 --- a/src/modules/reports/views/CashView.vue +++ b/src/modules/reports/views/CashView.vue @@ -410,7 +410,7 @@ const authStore = useAuthStore(); const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null); // Mobile state -const isMobile = ref(window.innerWidth < 768); +const isMobile = ref(window.innerWidth <= 768); const showFilters = ref(false); const showDrawer = ref(false); const expandedMeta = ref(new Set()); @@ -503,7 +503,7 @@ const handleTopBarAction = (action, event) => { // Handle window resize const handleResize = () => { - isMobile.value = window.innerWidth < 768; + isMobile.value = window.innerWidth <= 768; if (!isMobile.value) { showFilters.value = false; } diff --git a/src/modules/reports/views/FinancialIndicatorsView.vue b/src/modules/reports/views/FinancialIndicatorsView.vue index 761e8d6..3b00262 100644 --- a/src/modules/reports/views/FinancialIndicatorsView.vue +++ b/src/modules/reports/views/FinancialIndicatorsView.vue @@ -726,7 +726,7 @@ const authStore = useAuthStore(); const router = useRouter(); // Mobile detection -const isMobile = ref(window.innerWidth < 768); +const isMobile = ref(window.innerWidth <= 768); // UI state const showDrawer = ref(false); @@ -856,7 +856,7 @@ const handleServerSwitched = async () => { // Handle window resize const handleResize = () => { - isMobile.value = window.innerWidth < 768; + isMobile.value = window.innerWidth <= 768; }; // Lifecycle diff --git a/src/modules/reports/views/InvoicesView.vue b/src/modules/reports/views/InvoicesView.vue index 01e65ef..14689cd 100644 --- a/src/modules/reports/views/InvoicesView.vue +++ b/src/modules/reports/views/InvoicesView.vue @@ -422,7 +422,7 @@ const authStore = useAuthStore(); const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null); // Mobile state -const isMobile = ref(window.innerWidth < 768); +const isMobile = ref(window.innerWidth <= 768); const showFilters = ref(false); const showDrawer = ref(false); const actionsMenu = ref(null); @@ -511,7 +511,7 @@ const switchTab = async (tab) => { // Handle window resize const handleResize = () => { - isMobile.value = window.innerWidth < 768; + isMobile.value = window.innerWidth <= 768; if (!isMobile.value) { showFilters.value = false; // Reset when switching to desktop } diff --git a/src/modules/reports/views/ServerLogsView.vue b/src/modules/reports/views/ServerLogsView.vue index 8fdfe8f..ff5974f 100644 --- a/src/modules/reports/views/ServerLogsView.vue +++ b/src/modules/reports/views/ServerLogsView.vue @@ -173,7 +173,7 @@ const debugInfo = ref({ let refreshTimer = null // US-110/US-608: Mobile state -const isMobile = ref(window.innerWidth < 768) +const isMobile = ref(window.innerWidth <= 768) // US-110: Mobile TopBar actions (refresh, export) const mobileTopBarActions = computed(() => [ @@ -202,7 +202,7 @@ const handleTopBarAction = (action) => { // US-110: Handle window resize const handleResize = () => { - isMobile.value = window.innerWidth < 768 + isMobile.value = window.innerWidth <= 768 } // US-110: Export logs to text file diff --git a/src/modules/reports/views/TelegramView.vue b/src/modules/reports/views/TelegramView.vue index d5eab8f..ab44992 100644 --- a/src/modules/reports/views/TelegramView.vue +++ b/src/modules/reports/views/TelegramView.vue @@ -117,11 +117,11 @@ const toast = useToast(); const router = useRouter(); // US-302: Mobile state -const isMobile = ref(window.innerWidth < 768); +const isMobile = ref(window.innerWidth <= 768); // Handle window resize const handleResize = () => { - isMobile.value = window.innerWidth < 768; + isMobile.value = window.innerWidth <= 768; }; // State diff --git a/src/modules/reports/views/TrialBalanceView.vue b/src/modules/reports/views/TrialBalanceView.vue index f0ac541..93fcec0 100644 --- a/src/modules/reports/views/TrialBalanceView.vue +++ b/src/modules/reports/views/TrialBalanceView.vue @@ -396,7 +396,7 @@ const authStore = useAuthStore(); const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null); // Mobile state -const isMobile = ref(window.innerWidth < 768); +const isMobile = ref(window.innerWidth <= 768); const showFilters = ref(false); const showDrawer = ref(false); const actionsMenu = ref(null); @@ -484,7 +484,7 @@ const handleTopBarAction = (action, event) => { // Handle window resize const handleResize = () => { - isMobile.value = window.innerWidth < 768; + isMobile.value = window.innerWidth <= 768; if (!isMobile.value) { showFilters.value = false; // Reset when switching to desktop }