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:
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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(() => {
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user