client/src/components/BoardPage/BoardPage.tsx

@@ -185,6 +185,12 @@ export class BoardPage extends React.Component<BoardPageProps> {
             <h3 className="level-item is-size-5">
               {lane.title}
             </h3>
+            <button className="button is-light level-item is-small expand"
+              onClick={(e) => { console.log(e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode.classList.toggle('minimized'))}}>
+              <span className="icon">
+                <i className="fas fa-chevron-right" aria-hidden="true"></i>
+              </span>
+            </button>
           </div>
           <div className="level-right">
             <button className="button is-light level-item is-small"
@@ -194,7 +200,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
               </span>
             </button>
             <button className="button is-light level-item is-small"
-              onClick={this.onNewCardClick.bind(this, lane.id)}>
+              onClick={(e) => { console.log(e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode.classList.toggle('minimized'))}}>
               <span className="icon">
                 <i className="fas fa-chevron-left" aria-hidden="true"></i>
               </span>

client/src/components/BoardPage/IssueCard.tsx

@@ -39,14 +39,14 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
                     }
                   </div>
                 </nav>
-                <span>{card.issue.title}</span>
+                <span>{card.issue.title ? card.issue.title : ''}</span>
               </div>
               {
                 <nav className="level">
                   <div className="level-left"></div>
                   <div className="level-right">
                     <div className="level-item is-size-7">
-                      {card.issue.milestone.title}
+                      {card.issue.milestone ? card.issue.milestone.title : ''}
                     </div>
                   </div>
                 </nav>

client/src/sass/_kanboard.scss

@@ -45,9 +45,11 @@
     .kanboard-lane {
         margin-bottom: $size-small;
         background: $white;
-        position: sticky;
-        position: -webkit-sticky;
         top: 0;
+
+        .expand {
+            display: none;
+        }
     }
 }
 
@@ -87,6 +89,7 @@
 }
 
 .react-kanban-column {
+    transition: width ease .2s;
     max-width: 305px;
     min-width: 305px;
     position: relative;
@@ -99,8 +102,30 @@
     scrollbar-width: 5px;
 
     &.minimized {
-        max-width: 30px;
+        max-width: 40px;
-        min-width: 30px;
+        min-width: 40px;
+        
+        writing-mode: vertical-rl;
+        text-orientation: sideways-right;
+
+        .kanboard-lane {
+            margin-right: -1em;
+
+            h3 {
+                margin-top: .5em;
+                margin-right: -.5em;
+            }
+
+            .tag {
+                margin-right: -1em;
+            }
+
+            .expand {
+                display: block !important;
+                margin-top: .5em;
+            }
+        }
+        
     }
 
     &::-webkit-scrollbar {