Mobile mode: the swimlane resize bar sits under the last list, not under empty grey.

The blue resize bar is pinned to the bottom edge of the swimlane's lists container, so
any height that container has BEYOND its content shows as a band of empty grey between
the last list and the bar. On a phone there was a lot of it.

Two things gave it that extra height, and both are desktop assumptions:

  * the container carries an INLINE `height` from the stored swimlane height - a height
    the user chose for the DESKTOP layout, where lists sit side by side. Stacked full
    width in mobile mode the same lists need a completely different height, so the
    difference showed as dead space (and made the container scroll vertically on its
    own, which is the second scrollbar in the screenshot);
  * `min-height: 150px` on .swimlane.js-lists.js-swimlane held a short swimlane open
    even when its content was smaller.

In mobile mode the container takes its content height instead, so the bar lands
directly under the last list - which is also directly above the next swimlane. Both
need !important: an inline style loses to nothing less.

Also removes the gap between a swimlane's header and its OWN lists. The 2rem bottom
margin is meant to separate one swimlane from the next, but `.mobile-mode .swimlane`
matches the header wrapper too, so the same 32px band sat between a header and the
lists belonging to it.

Tests: 1342 passing.

Thanks to xet7 !

client/components/boards/boardHeader.css

@@ -191,6 +191,27 @@
   float: none !important;
 }
 
+/* The lists container takes the height of the lists in it, so the blue resize bar -
+   which is pinned to its bottom edge - sits directly under the last list, with no
+   band of empty grey above it.
+   Two things made that gap. The container carries an INLINE `height` from the stored
+   swimlane height, which is a height chosen for the desktop layout where lists sit
+   side by side; stacked full-width in mobile mode the content is a different height
+   entirely, and the leftover showed as dead space. And `min-height: 150px` held a
+   short swimlane open even when its content was smaller. An inline style only loses
+   to !important, hence these. */
+.mobile-mode .swimlane.js-lists {
+  height: auto !important;
+  min-height: 0 !important;
+}
+
+/* No gap between a swimlane's header and its own lists either: the 2rem above is
+   meant to separate one swimlane from the NEXT, but it applies to the header wrapper
+   too, which put the same 32px band between a header and the lists belonging to it. */
+.mobile-mode .swimlane.nodragscroll {
+  margin-bottom: 0 !important;
+}
+
 .mobile-mode .swimlane-header {
   width: 100% !important;
   min-width: 100% !important;

tests/mobileBoardFit.test.cjs

@@ -136,4 +136,40 @@ test('the board title itself is centred, not just its box', () => {
     'a tall line box would leave the text high inside a centred element');
 });
 
+test('the swimlane resize bar sits directly under the last list', () => {
+  // The bar is pinned to the bottom edge of the lists container, so any height that
+  // container has BEYOND its content shows as a band of empty grey above the bar.
+  const handle = rule(read('client/components/swimlanes/swimlanes.css'),
+    '.swimlane-resize-handle');
+  assert.ok(/bottom:\s*0/.test(handle), 'the bar is pinned to the bottom edge');
+  const lists = rule(boardHeader, '.mobile-mode .swimlane.js-lists');
+  // Two things gave it extra height: an inline height carrying the swimlane height
+  // chosen for the DESKTOP layout, where lists sit side by side rather than stacked...
+  assert.ok(/height:\s*auto !important/.test(lists),
+    'the container takes its content height');
+  // ...and a floor that held a short swimlane open.
+  assert.ok(/min-height:\s*0 !important/.test(lists), 'with no minimum holding it open');
+  // !important is required: an inline style loses to nothing else.
+  const base = read('client/components/swimlanes/swimlanes.css');
+  assert.ok(/\.swimlane\.js-lists\.js-swimlane \{[^}]*min-height:\s*150px/.test(base),
+    'the 150px floor this overrides must still be the desktop behaviour');
+  const jade = read('client/components/swimlanes/swimlanes.jade');
+  assert.ok(/style="height:\{\{swimlaneHeight\}\};"/.test(jade),
+    'the inline height being overridden is really there');
+});
+
+test('no gap between a swimlane header and its own lists', () => {
+  // The 2rem separates one swimlane from the NEXT, but it lands on the header wrapper
+  // too, which put the same band between a header and the lists belonging to it.
+  const all = rule(boardHeader, '.mobile-mode .swimlane');
+  assert.ok(/margin-bottom:\s*2rem/.test(all), 'swimlanes are still separated');
+  const headerWrap = rule(boardHeader, '.mobile-mode .swimlane.nodragscroll');
+  assert.ok(/margin-bottom:\s*0 !important/.test(headerWrap),
+    'but not between a header and its own lists');
+  // .nodragscroll is what the header-only swimlane element carries.
+  const jade = read('client/components/swimlanes/swimlanes.jade');
+  assert.ok(/\.swimlane\.nodragscroll\n\s*\+swimlaneHeader/.test(jade),
+    'the header wrapper is the .nodragscroll one');
+});
+
 console.log(`\nmobileBoardFit: ${passed} tests passed`);