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) <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

View File

@@ -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

View File

@@ -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

View File

@@ -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

View File

@@ -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
}

View File

@@ -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;
}

View File

@@ -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(() => {

View File

@@ -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;
}

View File

@@ -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

View File

@@ -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
}

View File

@@ -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

View File

@@ -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

View File

@@ -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
}