fix(modal): enable smooth desktop vertical scrolling on camera detail modal (v19)

This commit is contained in:
2026-09-12 11:23:19 -07:00
parent 2785782f7d
commit 5da020d563
4 changed files with 66 additions and 27 deletions
+44 -8
View File
@@ -2018,8 +2018,34 @@ body {
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
max-height: 90vh;
overflow-y: auto;
max-height: 88vh;
max-height: 88dvh;
overflow-y: auto !important;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.agency-dialog::-webkit-scrollbar,
.hardware-proof-dialog::-webkit-scrollbar {
width: 8px;
}
.agency-dialog::-webkit-scrollbar-track,
.hardware-proof-dialog::-webkit-scrollbar-track {
background: rgba(15, 23, 42, 0.6);
border-radius: 4px;
}
.agency-dialog::-webkit-scrollbar-thumb,
.hardware-proof-dialog::-webkit-scrollbar-thumb {
background: rgba(56, 189, 248, 0.35);
border-radius: 4px;
}
.agency-dialog::-webkit-scrollbar-thumb:hover,
.hardware-proof-dialog::-webkit-scrollbar-thumb:hover {
background: rgba(56, 189, 248, 0.65);
}
.agency-dialog::backdrop {
@@ -2034,11 +2060,12 @@ body {
display: flex;
align-items: flex-start;
justify-content: space-between;
background: rgba(7, 9, 14, 0.5);
background: rgba(10, 15, 29, 0.94);
position: sticky;
top: 0;
z-index: 10;
backdrop-filter: blur(8px);
z-index: 20;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
}
.modal-agency-name {
@@ -2659,6 +2686,10 @@ body {
padding-bottom: max(20px, env(safe-area-inset-bottom)) !important;
box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.85) !important;
animation: sheet-slide-up 0.28s cubic-bezier(0.16, 1, 0.3, 1) !important;
overflow-y: auto !important;
overflow-x: hidden !important;
overscroll-behavior: contain !important;
-webkit-overflow-scrolling: touch !important;
}
@keyframes sheet-slide-up {
@@ -2946,15 +2977,20 @@ body {
========================================================================== */
.hardware-proof-dialog {
max-width: 580px;
max-width: 620px;
width: 92vw;
background: rgba(15, 23, 42, 0.95);
max-height: 88vh;
max-height: 88dvh;
background: rgba(15, 23, 42, 0.96);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border: 1px solid rgba(56, 189, 248, 0.25);
border-radius: var(--radius-xl);
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(6, 182, 212, 0.15);
overflow: hidden;
overflow-y: auto !important;
overflow-x: hidden;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.cam-verification-badge {
+6 -6
View File
@@ -54,7 +54,7 @@
<meta name="apple-mobile-web-app-title" content="FlockRadar">
<!-- Main Stylesheet -->
<link rel="stylesheet" href="css/styles.css?v=18">
<link rel="stylesheet" href="css/styles.css?v=19">
</head>
<body>
@@ -1299,11 +1299,11 @@
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<!-- Data & Application Logic with Cache Busting -->
<script src="data/portals.js?v=18"></script>
<script src="js/icons.js?v=18"></script>
<script src="js/auth.js?v=18"></script>
<script src="js/radar.js?v=18"></script>
<script src="js/app.js?v=18"></script>
<script src="data/portals.js?v=19"></script>
<script src="js/icons.js?v=19"></script>
<script src="js/auth.js?v=19"></script>
<script src="js/radar.js?v=19"></script>
<script src="js/app.js?v=19"></script>
<!-- Service Worker Instant Cache Invalidation -->
<script>
+3
View File
@@ -1625,6 +1625,8 @@
window.history.replaceState({}, document.title, window.location.pathname);
} else if (urlParams.get('modal') === 'support' || window.location.hash === '#support') {
setTimeout(openSupportModal, 300);
} else if (urlParams.get('cam')) {
setTimeout(() => openCameraHardwareProof(urlParams.get('cam')), 350);
}
}
@@ -1902,6 +1904,7 @@
// Show modal
if (el.cameraDetailModal) {
el.cameraDetailModal.scrollTop = 0;
if (typeof el.cameraDetailModal.showModal === 'function') {
el.cameraDetailModal.showModal();
} else {
+13 -13
View File
@@ -1,20 +1,20 @@
// Service Worker for FlockRadar Offline Driving & Live Updates
const CACHE_NAME = 'flockradar-v18';
const CACHE_NAME = 'flockradar-v19';
const ASSETS_TO_CACHE = [
'./',
'./index.html',
'./css/styles.css?v=18',
'./js/icons.js?v=18',
'./js/app.js?v=18',
'./js/auth.js?v=18',
'./js/radar.js?v=18',
'./data/portals.js?v=18',
'./favicon.svg?v=18',
'./favicon.ico?v=18',
'./apple-touch-icon.png?v=18',
'./icon-192.png?v=18',
'./icon-512.png?v=18',
'./og-image.png?v=18',
'./css/styles.css?v=19',
'./js/icons.js?v=19',
'./js/app.js?v=19',
'./js/auth.js?v=19',
'./js/radar.js?v=19',
'./data/portals.js?v=19',
'./favicon.svg?v=19',
'./favicon.ico?v=19',
'./apple-touch-icon.png?v=19',
'./icon-192.png?v=19',
'./icon-512.png?v=19',
'./og-image.png?v=19',
'./assets/img/logo.svg',
'./assets/img/flock_pole_cam_palmdale.jpg',
'./manifest.json'