Fix flickering and column sizes.

* Avoid flickering in default view mode, by properly setting the default (horizontal-scroll) layout
directly in CSS. This flickering was introduced with #675 pull request. This also fixes the layout
of the public board. Javascript is now used only to activate the 'compact' mode, thus still causing
a slight flickering, but in that mode only.
* Use fixed-layout on the table to improve layout and rendering speed.
* Slightly reduce the width of the swimlane header column, and make it fixed-width.
* Slightly simplify the Javascript/jQuery code for activating compact mode.

This is replaces pull request #688, with only the table layout fix, since I have no proper solution
for the scrolling problem.

1 files changed, 13 insertions, 12 deletions

diff --git a/assets/css/src/board.css b/assets/css/src/board.css
index f4aefa95..4309b178 100644
--- a/assets/css/src/board.css
+++ b/assets/css/src/board.css
@@ -21,26 +21,27 @@
 /* board table */
 #board-container {
     padding-bottom: 180px; /* Space to avoid dropdown menu truncated */
-}
-
-/* Board container classes for wide/compact view */
-.board-container-wide {
     overflow-x: scroll;
 }
 
 .board-container-compact {
-    overflow-x: hidden;
+    overflow-x: initial;
+}
+
+#board {
+    table-layout: fixed;
+}
+
+#board th {
+    width: 120px; /* Width of swimlane column */
 }
 
-/* Board table column for wide/compact view */
-.board-column-wide {
-    min-width: 240px;
-    max-width: 240px;
+#board th.board-column {
+    width: 240px; /* Width of other columns, in default [horizontal scrolling] view mode */
 }
 
-.board-column-compact {
-    min-width: 0px;
-    max-width: 0px;
+#board th.board-column.board-column-compact {
+    width: initial; /* Do not force the width of the columns in compact view mode */
 }
 
 #board th a {