romfast/roa2web-service-auto
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(design): standardize mobile breakpoint to <= 768 across all views

Browse Source 
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) <noreply@anthropic.com>
This commit is contained in:
Claude Agent
2026-03-20 22:41:17 +00:00
parent f05f862a7a
commit c5cfe3467c
12 changed files with 24 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/modules/data-entry/views/OCRMetricsView.vue
View File

@@ -449,7 +449,7 @@ const daysOptions = [
] ]
// Mobile detection // Mobile detection
const isMobile = ref(window.innerWidth < 768) const isMobile = ref(window.innerWidth <= 768)
const showFilters = ref(false) const showFilters = ref(false)
// History filters // History filters
@@ -736,7 +736,7 @@ const clearFilters = () => {
// Handle resize // Handle resize
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768 isMobile.value = window.innerWidth <= 768
if (!isMobile.value) { if (!isMobile.value) {
showFilters.value = false showFilters.value = false
// Reinit charts when switching to desktop // Reinit charts when switching to desktop

4
src/modules/data-entry/views/receipts/ReceiptCreateUnifiedView.vue
View File

@@ -255,12 +255,12 @@ const store = useReceiptsStore()
const companyStore = useCompanyStore() const companyStore = useCompanyStore()
// US-041: Mobile detection and keyboard awareness // US-041: Mobile detection and keyboard awareness
const isMobile = ref(window.innerWidth < 768) const isMobile = ref(window.innerWidth <= 768)
const keyboardVisible = ref(false) const keyboardVisible = ref(false)
const initialViewportHeight = ref(window.innerHeight) const initialViewportHeight = ref(window.innerHeight)
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768 isMobile.value = window.innerWidth <= 768
// US-041: Detect virtual keyboard on mobile // US-041: Detect virtual keyboard on mobile
// When keyboard opens, viewport height decreases significantly // When keyboard opens, viewport height decreases significantly

4
src/modules/data-entry/views/receipts/ReceiptsListView.vue
View File

@@ -1165,10 +1165,10 @@ const AUTO_REFRESH_INTERVAL_MS = 5000 // 5 seconds between refreshes when proces
let isSSEConnected = false let isSSEConnected = false
// Mobile detection // Mobile detection
const isMobile = ref(window.innerWidth < 768) const isMobile = ref(window.innerWidth <= 768)
const showFilters = ref(false) const showFilters = ref(false)
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768 isMobile.value = window.innerWidth <= 768
} }
// US-040: Mobile Android-Native Layout State // US-040: Mobile Android-Native Layout State

4
src/modules/reports/views/BankCashRegisterView.vue
View File

@@ -418,7 +418,7 @@ const authStore = useAuthStore();
const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null); const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
// Mobile state // Mobile state
const isMobile = ref(window.innerWidth < 768); const isMobile = ref(window.innerWidth <= 768);
const showFilters = ref(false); const showFilters = ref(false);
const actionsMenu = ref(null); const actionsMenu = ref(null);
const showDrawer = ref(false); const showDrawer = ref(false);
@@ -507,7 +507,7 @@ const handleTopBarAction = (action, event) => {
// Handle window resize // Handle window resize
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768; isMobile.value = window.innerWidth <= 768;
if (!isMobile.value) { if (!isMobile.value) {
showFilters.value = false; // Reset when switching to desktop showFilters.value = false; // Reset when switching to desktop
} }

4
src/modules/reports/views/BankView.vue
View File

@@ -410,7 +410,7 @@ const authStore = useAuthStore();
const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null); const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
// Mobile state // Mobile state
const isMobile = ref(window.innerWidth < 768); const isMobile = ref(window.innerWidth <= 768);
const showFilters = ref(false); const showFilters = ref(false);
const showDrawer = ref(false); const showDrawer = ref(false);
const expandedMeta = ref(new Set()); const expandedMeta = ref(new Set());
@@ -503,7 +503,7 @@ const handleTopBarAction = (action, event) => {
// Handle window resize // Handle window resize
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768; isMobile.value = window.innerWidth <= 768;
if (!isMobile.value) { if (!isMobile.value) {
showFilters.value = false; showFilters.value = false;
} }

4
src/modules/reports/views/CacheStatsView.vue
View File

@@ -231,7 +231,7 @@ const showClearDialog = ref(false);
const clearScope = ref("current"); const clearScope = ref("current");
// US-111/US-608: Mobile state // 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) // US-111: Mobile TopBar actions (refresh only for cache stats)
const mobileTopBarActions = computed(() => [ const mobileTopBarActions = computed(() => [
@@ -253,7 +253,7 @@ const handleTopBarAction = (action) => {
// US-111: Handle window resize // US-111: Handle window resize
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768; isMobile.value = window.innerWidth <= 768;
}; };
const responseTimesTable = computed(() => { const responseTimesTable = computed(() => {

4
src/modules/reports/views/CashView.vue
View File

@@ -410,7 +410,7 @@ const authStore = useAuthStore();
const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null); const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
// Mobile state // Mobile state
const isMobile = ref(window.innerWidth < 768); const isMobile = ref(window.innerWidth <= 768);
const showFilters = ref(false); const showFilters = ref(false);
const showDrawer = ref(false); const showDrawer = ref(false);
const expandedMeta = ref(new Set()); const expandedMeta = ref(new Set());
@@ -503,7 +503,7 @@ const handleTopBarAction = (action, event) => {
// Handle window resize // Handle window resize
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768; isMobile.value = window.innerWidth <= 768;
if (!isMobile.value) { if (!isMobile.value) {
showFilters.value = false; showFilters.value = false;
} }

4
src/modules/reports/views/FinancialIndicatorsView.vue
View File

@@ -726,7 +726,7 @@ const authStore = useAuthStore();
const router = useRouter(); const router = useRouter();
// Mobile detection // Mobile detection
const isMobile = ref(window.innerWidth < 768); const isMobile = ref(window.innerWidth <= 768);
// UI state // UI state
const showDrawer = ref(false); const showDrawer = ref(false);
@@ -856,7 +856,7 @@ const handleServerSwitched = async () => {
// Handle window resize // Handle window resize
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768; isMobile.value = window.innerWidth <= 768;
}; };
// Lifecycle // Lifecycle

4
src/modules/reports/views/InvoicesView.vue
View File

@@ -422,7 +422,7 @@ const authStore = useAuthStore();
const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null); const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
// Mobile state // Mobile state
const isMobile = ref(window.innerWidth < 768); const isMobile = ref(window.innerWidth <= 768);
const showFilters = ref(false); const showFilters = ref(false);
const showDrawer = ref(false); const showDrawer = ref(false);
const actionsMenu = ref(null); const actionsMenu = ref(null);
@@ -511,7 +511,7 @@ const switchTab = async (tab) => {
// Handle window resize // Handle window resize
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768; isMobile.value = window.innerWidth <= 768;
if (!isMobile.value) { if (!isMobile.value) {
showFilters.value = false; // Reset when switching to desktop showFilters.value = false; // Reset when switching to desktop
} }

4
src/modules/reports/views/ServerLogsView.vue
View File

@@ -173,7 +173,7 @@ const debugInfo = ref({
let refreshTimer = null let refreshTimer = null
// US-110/US-608: Mobile state // 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) // US-110: Mobile TopBar actions (refresh, export)
const mobileTopBarActions = computed(() => [ const mobileTopBarActions = computed(() => [
@@ -202,7 +202,7 @@ const handleTopBarAction = (action) => {
// US-110: Handle window resize // US-110: Handle window resize
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768 isMobile.value = window.innerWidth <= 768
} }
// US-110: Export logs to text file // US-110: Export logs to text file

4
src/modules/reports/views/TelegramView.vue
View File

@@ -117,11 +117,11 @@ const toast = useToast();
const router = useRouter(); const router = useRouter();
// US-302: Mobile state // US-302: Mobile state
const isMobile = ref(window.innerWidth < 768); const isMobile = ref(window.innerWidth <= 768);
// Handle window resize // Handle window resize
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768; isMobile.value = window.innerWidth <= 768;
}; };
// State // State

4
src/modules/reports/views/TrialBalanceView.vue
View File

@@ -396,7 +396,7 @@ const authStore = useAuthStore();
const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null); const selectedCompanyId = ref(companyStore.selectedCompany?.id_firma || null);
// Mobile state // Mobile state
const isMobile = ref(window.innerWidth < 768); const isMobile = ref(window.innerWidth <= 768);
const showFilters = ref(false); const showFilters = ref(false);
const showDrawer = ref(false); const showDrawer = ref(false);
const actionsMenu = ref(null); const actionsMenu = ref(null);
@@ -484,7 +484,7 @@ const handleTopBarAction = (action, event) => {
// Handle window resize // Handle window resize
const handleResize = () => { const handleResize = () => {
isMobile.value = window.innerWidth < 768; isMobile.value = window.innerWidth <= 768;
if (!isMobile.value) { if (!isMobile.value) {
showFilters.value = false; // Reset when switching to desktop showFilters.value = false; // Reset when switching to desktop
} }