adjust mobile hitboxes/disable overscroll
Hunter
Wednesday, October 22nd, 2025 at 6:01 PM
122 align-items: flex-start;
123 min-height: 100vh;
124 padding: 20px;
- overflow-x: hidden;
125 }
126
127 .page {
167 }
168
169 @media (max-width: 680px) {
170 + html, body {
171 + overflow: hidden;
172 + height: 100%;
173 + position: fixed;
174 + width: 100%;
175 + }
176 +
177 body {
178 padding: 0;
179 }
365 background: transparent;
366 }
367
368 +/* Desktop: Original 10px hitboxes */
369 .resize-handle.n { top: -5px; left: 5px; right: 5px; height: 10px; cursor: n-resize; }
370 .resize-handle.s { bottom: -5px; left: 5px; right: 5px; height: 10px; cursor: s-resize; }
371 .resize-handle.e { right: -5px; top: 5px; bottom: 5px; width: 10px; cursor: e-resize; }
383 .resize-handle.sw { bottom: -5px; left: -5px; cursor: sw-resize; }
384 .resize-handle.sw::before { bottom: 0; left: 0; }
385
386 +/* Mobile: Larger 12px hitboxes for easier touch interaction */
387 +@media (pointer: coarse), (hover: none) {
388 + html {
389 + overscroll-behavior: none;
390 + }
391 +
392 + .resize-handle.corner {
393 + width: 12px;
394 + height: 12px;
395 + }
396 +
397 + .resize-handle.corner::before {
398 + /* Center the visual dot within the larger hitbox */
399 + top: 50%;
400 + left: 50%;
401 + transform: translate(-50%, -50%);
402 + }
403 +
404 + /* Edge handles with 12px hitboxes */
405 + .resize-handle.n { top: -6px; height: 12px; }
406 + .resize-handle.s { bottom: -6px; height: 12px; }
407 + .resize-handle.e { right: -6px; width: 12px; }
408 + .resize-handle.w { left: -6px; width: 12px; }
409 +
410 + /* Corner handles with 12px hitboxes, centered on the visual corner */
411 + .resize-handle.ne { top: -6px; right: -6px; }
412 + .resize-handle.nw { top: -6px; left: -6px; }
413 + .resize-handle.se { bottom: -6px; right: -6px; }
414 + .resize-handle.sw { bottom: -6px; left: -6px; }
415 +}
416 +
417 @media print {
418 * {
419 -webkit-print-color-adjust: exact !important;
539 @media (pointer: coarse), (hover: none) {
540 .add-images-btn {
541 display: block;
542 + bottom: 0;
543 + margin-bottom: 24px;
544 }
545
546 /* On touch devices, don't change opacity when dragging */