70 pixels more to test t3

Asset/css/shrink-vertically.css

@@ -13,12 +13,20 @@
  * breathing room). A fixed-px budget is more reliable than a proportional vh value
  * because that chrome is a fixed height regardless of screen size.
  *
- * Tune the single number below (120px) if the scrollbar is still clipped or if you
+ * Tune the single number below (240px) if the scrollbar is still clipped or if you
  * want the columns taller.
  *
  * The selector is intentionally more specific than core's single-class rule, and
  * uses !important, so this override wins even alongside a theme (e.g. Essential).
+ *
+ * The min-height override is essential: Kanboard's drag-and-drop sets an INLINE
+ * min-height on each column equal to its full content height
+ * (BoardDragAndDrop.js: css("min-height", parent().height())). In CSS, min-height
+ * beats max-height, so that inline value keeps tall columns from shrinking and our
+ * max-height alone does nothing. A stylesheet !important overrides the inline
+ * (non-important) min-height, so we reset it to 0 and let max-height win.
  */
 #board td .board-task-list.board-task-list-compact {
-    max-height: calc(100vh - 120px) !important;
+    max-height: calc(100vh - 240px) !important;
+    min-height: 0 !important;
 }

Asset/js/shrink-vertically.js

@@ -0,0 +1,34 @@
+/*
+ * ShrinkVertically -- mark the two vertical-collapse menu items so it is obvious the
+ * behaviour comes from this plugin and not from Kanboard core.
+ *
+ * Core renders these labels in app/Template/project_header/dropdown.php:
+ *   .filter-vert-collapse .filter-vert-toggle-collapse  ->  "Collapse vertically"
+ *   .filter-vert-expand   .filter-vert-toggle-collapse  ->  "Expand vertically"
+ *
+ * We append a "+" to each so they read "Collapse vertically+" / "Expand vertically+".
+ * This is locale-independent (it edits the rendered text, not the translation table).
+ */
+(function () {
+    "use strict";
+
+    function addPlus() {
+        var links = document.querySelectorAll(
+            ".filter-vert-collapse .filter-vert-toggle-collapse, " +
+            ".filter-vert-expand .filter-vert-toggle-collapse"
+        );
+
+        for (var i = 0; i < links.length; i++) {
+            var text = links[i].textContent;
+            if (text.charAt(text.length - 1) !== "+") {
+                links[i].textContent = text + "+";
+            }
+        }
+    }
+
+    if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", addPlus);
+    } else {
+        addPlus();
+    }
+})();

Plugin.php

@@ -13,6 +13,12 @@ class Plugin extends Base
         $this->hook->on('template:layout:css', array(
             'template' => 'plugins/ShrinkVertically/Asset/css/shrink-vertically.css',
         ));
+
+        // Append a "+" to the two vertical-collapse menu labels so it is visible
+        // that the behaviour is modified by this plugin.
+        $this->hook->on('template:layout:js', array(
+            'template' => 'plugins/ShrinkVertically/Asset/js/shrink-vertically.js',
+        ));
     }
 
     public function getPluginName()

README.md

@@ -25,16 +25,23 @@ list:
 
 ```css
 #board td .board-task-list.board-task-list-compact {
-    max-height: calc(100vh - 120px) !important;
+    max-height: calc(100vh - 240px) !important;
 }
 ```
 
-The `120px` reserves room for the page header, the board column header, the horizontal
+The `240px` reserves room for the page header, the board column header, the horizontal
 scrollbar, and a little breathing space. A fixed-pixel budget is more reliable than a
 proportional value because that chrome is a fixed height regardless of screen size.
 
-It changes nothing else: no data, no JavaScript, no database migration. The override only
-applies while columns are collapsed (when core adds the `board-task-list-compact` class).
+The override only applies while columns are collapsed (when core adds the
+`board-task-list-compact` class). It changes no data and runs no database migration.
+
+## Menu labels
+
+So it is obvious the collapsed behaviour comes from this plugin and not from core, a
+small script (via `template:layout:js`) appends a `+` to the two gear-menu items, so they
+read "Collapse vertically+" and "Expand vertically+". It only edits the rendered link
+text, so it works in any locale.
 
 ## Requirements
 
@@ -48,7 +55,7 @@ from the folder name). Reload the board; no build step, no configuration.
 
 ## Tuning
 
-Edit the single `120px` value in `Asset/css/shrink-vertically.css`. Increase it if the
+Edit the single `240px` value in `Asset/css/shrink-vertically.css`. Increase it if the
 scrollbar is still clipped (for example with a taller theme header); decrease it to make
 the collapsed columns taller.