fix: finish reverting oversized mobile UI (#6426) + fix page dragscroll

#6426: the first revert only cleaned boardsList.css. The same forced
"2x/3x bigger on mobile" rules remained in header.css (#header-quick-access
logo/quick-access bar) and boardBody.css (#content — which the All Boards
list and the board view render inside) plus the iPhone card-details body
text. All neutralized to normal size; the iPhone-12-mini header blocks that
had grown tall/wrapped to fit 3x text are back to a compact single row. The
#6419 mobile touch-target icon sizes in the card-details header are kept.

dragscroll: enablePageDragscroll/disablePageDragscroll tagged only <body>,
but on phones body.mobile-mode is position:fixed and the real scroll
container becomes #content, so Login/Register/All Boards could not drag-
scroll. Now tag whichever element actually scrolls — both <body> and
#content when present — so only the overflowing one scrolls. The touch
helper already prefers the nearer #content.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

CHANGELOG.md

@@ -41,6 +41,27 @@ them up next.
   [#3823](https://github.com/wekan/wekan/issues/3823), [#3138](https://github.com/wekan/wekan/issues/3138),
   [#2204](https://github.com/wekan/wekan/issues/2204) (restrict permanent delete to the Admin role).
 
+# Upcoming WeKan ® release
+
+This release fixes the following bugs:
+
+- [Mobile UI still too large at All Boards / iPhone 12 mini](https://github.com/wekan/wekan/issues/6426),
+  [#6426](https://github.com/wekan/wekan/issues/6426): the first revert only cleaned
+  `boardsList.css`, leaving the same forced "2x/3x bigger on mobile" rules in `header.css`
+  (`#header-quick-access` logo/quick-access bar) and `boardBody.css` (`#content` — which the
+  All Boards list and popups render inside) and the iPhone card-details body text. Those are now
+  neutralized to normal size too, and the iPhone-12-mini header blocks that had grown tall and
+  wrapped (to fit the 3x text) are back to a compact single row. The #6419 mobile touch-target
+  icon sizes in the card-details header are intentionally kept.
+- Drag-to-scroll (dragscroll) not working on the Login, Register and All Boards pages: the page
+  helper tagged `<body>` with the `dragscroll` class, but on phones `body.mobile-mode` is
+  `position: fixed` and the real scroll container becomes `#content`, so tagging only `<body>`
+  could never scroll on those pages (Login/Register have no `#content` and correctly use
+  `<body>`). `enablePageDragscroll`/`disablePageDragscroll` now tag whichever element actually
+  scrolls — both `<body>` and `#content` when present — so only the overflowing one scrolls (no
+  double-scroll). Touch one-finger scrolling (`dragscrollTouch.js`) already picks the nearest
+  scrollable `.dragscroll` ancestor, so `#content` wins over `<body>` when both are tagged.
+
 # v9.72 2026-06-26 WeKan ® release
 
 This release fixes the following bugs:

client/components/boards/boardBody.css

@@ -107,17 +107,17 @@
       overflow-y: scroll !important;
     }
 
-    /* Mobile - make all text 2x bigger inside #content by default (icons stay same size) */
+    /* Mobile - keep #content text at normal size (reverted #6426 oversizing) */
     @media screen and (max-width: 800px),
            screen and (max-device-width: 800px),
            screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
            screen and (max-width: 800px) and (orientation: portrait),
            screen and (max-width: 800px) and (orientation: landscape) {
       #content {
-        font-size: 2em !important; /* 2x bigger base font size for content area */
+        font-size: 1em !important; /* Normal size (reverted #6426 oversizing) */
       }
 
-      /* Make all text elements 2x bigger */
+      /* Keep all text elements at normal size */
       #content h1, #content h2, #content h3, #content h4, #content h5, #content h6,
       #content p, #content span, #content div, #content a, #content button,
       #content .minicard, #content .list-header-name, #content .board-header-btn,
@@ -186,7 +186,7 @@
 
     /* Fallback for iPhone devices using JavaScript detection */
     .iphone-device #content {
-      font-size: 2em !important; /* 2x bigger base font size for content area */
+      font-size: 1em !important; /* Normal size (reverted #6426 oversizing) */
     }
 
     .iphone-device #content h1, .iphone-device #content h2, .iphone-device #content h3, .iphone-device #content h4, .iphone-device #content h5, .iphone-device #content h6,
@@ -231,9 +231,9 @@
       font-size: 1em !important; /* Keep original icon size */
     }
 
-/* Mobile iPhone: scale card details text and icons to 2x */
+/* Mobile iPhone: keep card details text/icons at normal size (reverted #6426 oversizing) */
 body.mobile-mode.iphone-device .card-details {
-  font-size: 2em !important;
+  font-size: 1em !important;
 }
 body.mobile-mode.iphone-device .card-details .fa,
 body.mobile-mode.iphone-device .card-details .icon,

client/components/main/header.css

@@ -558,7 +558,7 @@ body:not(.board-view) #header #header-main-bar h1 {
     }
   }
 
-  /* Mobile - make all text and icons 2x bigger above #content by default */
+  /* Mobile - keep header text/icons at normal size (reverted #6426 oversizing) */
   @media screen and (max-width: 800px),
          screen and (max-device-width: 800px),
          screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
@@ -573,7 +573,7 @@ body:not(.board-view) #header #header-main-bar h1 {
       overflow: hidden !important; /* Prevent content overflow */
     }
     #header-quick-access {
-      font-size: 2em !important; /* 2x bigger base font size */
+      font-size: 1em !important; /* Normal size (reverted #6426 oversizing) */
     }
 
     #header-quick-access * {
@@ -582,7 +582,7 @@ body:not(.board-view) #header #header-main-bar h1 {
 
     #header-quick-access .fa,
     #header-quick-access .icon {
-      font-size: 2em !important; /* 2x bigger icons */
+      font-size: 1em !important; /* Normal icon size (reverted #6426 oversizing) */
     }
 
     #header-quick-access .home-icon a {
@@ -652,7 +652,7 @@ body:not(.board-view) #header #header-main-bar h1 {
     }
   }
 
-  /* Mobile All Boards page - make logo row elements 2x bigger */
+  /* Mobile All Boards page - keep logo row at normal size (reverted #6426 oversizing) */
   @media screen and (max-width: 800px),
          screen and (max-device-width: 800px),
          screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 800px),
@@ -660,16 +660,16 @@ body:not(.board-view) #header #header-main-bar h1 {
          screen and (max-width: 800px) and (orientation: landscape) {
     .wrapper ~ #header-quick-access,
     body:not(.board-view) #header-quick-access {
-      font-size: 2em !important; /* 2x bigger base font size for logo row */
+      font-size: 1em !important; /* Normal size (reverted #6426 oversizing) */
     }
 
-    /* iPhone 12 Mini specific - 3x bigger for All Boards page */
+    /* iPhone 12 Mini specific - keep All Boards logo row at normal size (reverted #6426) */
     @media screen and (device-width: 375px) and (device-height: 812px), /* iPhone 12 Mini exact */
            screen and (max-width: 375px) and (max-height: 812px), /* iPhone 12 Mini viewport */
            screen and (-webkit-min-device-pixel-ratio: 3) and (max-width: 375px) /* iPhone 12 Mini Retina */ {
       .wrapper ~ #header-quick-access,
       body:not(.board-view) #header-quick-access {
-        font-size: 3em !important; /* 3x bigger base font size for iPhone 12 Mini All Boards page */
+        font-size: 1em !important; /* Normal size (reverted #6426 oversizing) */
       }
     }
 
@@ -682,7 +682,7 @@ body:not(.board-view) #header #header-main-bar h1 {
     .wrapper ~ #header-quick-access .icon,
     body:not(.board-view) #header-quick-access .fa,
     body:not(.board-view) #header-quick-access .icon {
-      font-size: 2em !important; /* 2x bigger icons in logo row */
+      font-size: 1em !important; /* Normal icon size (reverted #6426 oversizing) */
     }
 
     .wrapper ~ #header-quick-access .home-icon a,
@@ -741,19 +741,19 @@ body:not(.board-view) #header #header-main-bar h1 {
     }
   }
 
-  /* iPhone 12 Mini specific - make header elements 3x bigger */
+  /* iPhone 12 Mini specific - keep the header a normal compact single row */
   @media screen and (device-width: 375px) and (device-height: 812px), /* iPhone 12 Mini exact */
          screen and (max-width: 375px) and (max-height: 812px), /* iPhone 12 Mini viewport */
          screen and (-webkit-min-device-pixel-ratio: 3) and (max-width: 375px), /* iPhone 12 Mini Retina */
          screen and (max-width: 375px) and (orientation: portrait), /* iPhone 12 Mini portrait */
          screen and (max-width: 375px) and (orientation: landscape) /* iPhone 12 Mini landscape */ {
     #header-quick-access {
-      font-size: 3em !important; /* 3x bigger base font size for iPhone 12 Mini */
-      height: auto !important; /* Allow height to grow */
-      min-height: 84px !important; /* Much taller minimum height for iPhone 12 Mini */
-      flex-wrap: wrap !important; /* Force wrapping */
-      align-items: flex-start !important; /* Align to top when wrapping */
-      padding: 18px 0px !important; /* More padding for iPhone 12 Mini */
+      font-size: 1em !important; /* Normal size (reverted #6426 oversizing) */
+      height: 48px !important;
+      min-height: 48px !important;
+      flex-wrap: nowrap !important;
+      align-items: center !important;
+      padding: 8px 0px !important;
     }
 
     #header-quick-access * {
@@ -762,7 +762,7 @@ body:not(.board-view) #header #header-main-bar h1 {
 
     #header-quick-access .fa,
     #header-quick-access .icon {
-      font-size: 3em !important; /* 3x bigger icons for iPhone 12 Mini */
+      font-size: 1em !important; /* Normal icon size (reverted #6426 oversizing) */
     }
 
     #header-quick-access .home-icon a {
@@ -848,7 +848,7 @@ body:not(.board-view) #header #header-main-bar h1 {
     }
   }
 
-  /* iPhone 12 Mini and very small screens - make header elements much larger */
+  /* iPhone 12 Mini and very small screens - header element sizing */
   @media screen and (max-width: 400px) and (max-height: 900px),
          screen and (max-device-width: 400px) and (max-device-height: 900px),
          screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 400px),
@@ -912,12 +912,12 @@ body:not(.board-view) #header #header-main-bar h1 {
 
   /* Fallback for iPhone devices using JavaScript detection */
   .iphone-device #header-quick-access {
-    font-size: 2em !important; /* 2x bigger base font size */
-    height: auto !important; /* Allow height to grow */
-    min-height: 48px !important; /* Minimum height for mobile */
-    flex-wrap: wrap !important; /* Force wrapping */
-    align-items: flex-start !important; /* Align to top when wrapping */
-    padding: 8px 0px !important; /* Adjust padding for mobile */
+    font-size: 1em !important; /* Normal size (reverted #6426 oversizing) */
+    height: 48px !important;
+    min-height: 48px !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    padding: 8px 0px !important;
   }
 
   .iphone-device #header-quick-access * {
@@ -926,7 +926,7 @@ body:not(.board-view) #header #header-main-bar h1 {
 
   .iphone-device #header-quick-access .fa,
   .iphone-device #header-quick-access .icon {
-    font-size: 2em !important; /* 2x bigger icons */
+    font-size: 1em !important; /* Normal icon size (reverted #6426 oversizing) */
   }
 
   .iphone-device #header-quick-access .home-icon a {
@@ -995,14 +995,14 @@ body:not(.board-view) #header #header-main-bar h1 {
     width: auto !important;
   }
 
-  /* iPhone 12 Mini specific - JavaScript detection fallback */
+  /* iPhone 12 Mini specific - JavaScript detection fallback (normal compact row) */
   .iphone-device #header-quick-access {
-    font-size: 3em !important; /* 3x bigger base font size for iPhone 12 Mini */
-    height: auto !important; /* Allow height to grow */
-    min-height: 84px !important; /* Much taller minimum height for iPhone 12 Mini */
-    flex-wrap: wrap !important; /* Force wrapping */
-    align-items: flex-start !important; /* Align to top when wrapping */
-    padding: 18px 0px !important; /* More padding for iPhone 12 Mini */
+    font-size: 1em !important; /* Normal size (reverted #6426 oversizing) */
+    height: 48px !important;
+    min-height: 48px !important;
+    flex-wrap: nowrap !important;
+    align-items: center !important;
+    padding: 8px 0px !important;
   }
 
   .iphone-device #header-quick-access * {
@@ -1011,7 +1011,7 @@ body:not(.board-view) #header #header-main-bar h1 {
 
   .iphone-device #header-quick-access .fa,
   .iphone-device #header-quick-access .icon {
-    font-size: 3em !important; /* 3x bigger icons for iPhone 12 Mini */
+    font-size: 1em !important; /* Normal icon size (reverted #6426 oversizing) */
   }
 
   .iphone-device #header-quick-access .home-icon a {
@@ -1096,10 +1096,10 @@ body:not(.board-view) #header #header-main-bar h1 {
     width: auto !important;
   }
 
-  /* iPhone 12 Mini All Boards page - make logo row elements 3x bigger */
+  /* iPhone 12 Mini All Boards page - keep logo row at normal size (reverted #6426) */
   .iphone-device .wrapper ~ #header-quick-access,
   .iphone-device body:not(.board-view) #header-quick-access {
-    font-size: 3em !important; /* 3x bigger base font size for logo row */
+    font-size: 1em !important; /* Normal size (reverted #6426 oversizing) */
   }
 
   .iphone-device .wrapper ~ #header-quick-access *,
@@ -1111,7 +1111,7 @@ body:not(.board-view) #header #header-main-bar h1 {
   .iphone-device .wrapper ~ #header-quick-access .icon,
   .iphone-device body:not(.board-view) #header-quick-access .fa,
   .iphone-device body:not(.board-view) #header-quick-access .icon {
-    font-size: 2em !important; /* 2x bigger icons in logo row */
+    font-size: 1em !important; /* Normal icon size (reverted #6426 oversizing) */
   }
 
   .iphone-device .wrapper ~ #header-quick-access .home-icon a,

client/lib/pageDragscroll.js

@@ -1,27 +1,45 @@
 import dragscroll from '@wekanteam/dragscroll';
 import '/client/lib/dragscrollTouch';
 
-// Enable / disable mouse drag-to-scroll for whole-page layouts.
+// Enable / disable mouse drag-to-scroll for whole-page layouts (All Boards,
+// My Cards, Login, Register).
 //
-// On pages like All Boards, Login and Register the scroll container is the
-// <body> element itself (it has `overflow-y: auto; height: 100vh`), not an
-// inner board canvas or swimlane. The dragscroll library scrolls whichever
-// element carries the `dragscroll` class and has a dedicated `el ==
-// document.body` branch that also scrolls document.documentElement, so tagging
-// <body> makes dragging empty page space scroll the page — the same gesture
-// that already works on the board swimlanes view.
+// The dragscroll library scrolls whichever element carries the `dragscroll`
+// class AND is the actual scroll container. Which element that is depends on
+// the layout and on mobile vs desktop mode:
 //
-// The class is toggled per template (onRendered / onDestroyed) so it only
-// applies on those pages; dragscroll.reset() re-scans the DOM and (re)binds the
-// mouse listeners after the class is added or removed. Touch (one-finger)
-// scrolling is handled separately by client/lib/dragscrollTouch.js.
+//   * Login / Register (userFormsLayout) have no `#content`; the page scroll
+//     container is `<body>` in both modes (it has `overflow-y: auto` and a
+//     `100vh` height).
+//   * All Boards / My Cards (defaultLayout) render inside `#content`. On
+//     desktop the scroll container is `<body>`; in mobile mode `<body>` becomes
+//     `position: fixed` and `#content` becomes the scroller
+//     (`overflow-y: auto; height: calc(100vh - 48px)`), so tagging only
+//     `<body>` would never scroll on a phone.
+//
+// To cover every case we tag BOTH `<body>` and `#content` (when present). Only
+// the element that actually overflows scrolls, so there is no double-scroll:
+// on desktop `<body>` scrolls and `#content` (no vertical overflow) is a no-op;
+// in mobile mode `#content` scrolls and `<body>` (fixed, no overflow) is a
+// no-op. dragscroll has a dedicated `el == document.body` branch for the body
+// case. dragscroll.reset() re-scans the DOM and (re)binds the mouse listeners.
+// One-finger touch scrolling is handled by client/lib/dragscrollTouch.js, which
+// picks the nearest scrollable `.dragscroll` ancestor (so `#content` wins over
+// `<body>` when both are tagged).
+
+function pageScrollEls() {
+  const els = [document.body];
+  const content = document.getElementById('content');
+  if (content) els.push(content);
+  return els;
+}
 
 export function enablePageDragscroll() {
-  document.body.classList.add('dragscroll');
+  pageScrollEls().forEach(el => el.classList.add('dragscroll'));
   dragscroll.reset();
 }
 
 export function disablePageDragscroll() {
-  document.body.classList.remove('dragscroll');
+  pageScrollEls().forEach(el => el.classList.remove('dragscroll'));
   dragscroll.reset();
 }