From e6b06cade45a13d3c26ab9178037b3b791ec2020 Mon Sep 17 00:00:00 2001
From: Naomi Guyer <naomi@silverstripe.com>
Date: Tue, 20 Aug 2013 11:35:22 +1200
Subject: [PATCH] BUG: Context menu too long - CSS only (Fixes CMS #811)

---
 admin/css/screen.css  |  6 ++++++
 admin/scss/_tree.scss | 19 +++++++++++++++++++
 2 files changed, 25 insertions(+)

diff --git a/admin/css/screen.css b/admin/css/screen.css
index 36acef0eb..5222c9ceb 100644
--- a/admin/css/screen.css
+++ b/admin/css/screen.css
@@ -789,6 +789,12 @@ form.import-form label.left { width: 250px; }
 .cms #vakata-contextmenu .right, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .right { right: 100%; left: auto; }
 .cms #vakata-contextmenu .bottom, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu .bottom { bottom: -1px; top: auto; }
 .cms #vakata-contextmenu li ul, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li ul { display: none; position: absolute; top: -2px; left: 100%; background: #FFF; border: 1px solid silver; -webkit-box-shadow: 0 0 10px #cccccc; -moz-box-shadow: 0 0 10px #cccccc; box-shadow: 0 0 10px #cccccc; }
+.cms #vakata-contextmenu li ul.col-2, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li ul.col-2 { width: 360px; }
+.cms #vakata-contextmenu li ul.col-2 li, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li ul.col-2 li { width: 50%; }
+.cms #vakata-contextmenu li ul.col-3, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li ul.col-3 { width: 540px; }
+.cms #vakata-contextmenu li ul.col-3 li, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li ul.col-3 li { width: 33%; }
+.cms #vakata-contextmenu li ul li, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li ul li { min-width: 180px; float: left; }
+.cms #vakata-contextmenu li ul li a, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li ul li a { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -o-text-overflow: ellipsis; }
 .cms #vakata-contextmenu li.vakata-separator, .TreeDropdownField .treedropdownfield-panel #vakata-contextmenu li.vakata-separator { min-height: 0; height: 1px; line-height: 1px; font-size: 1px; overflow: hidden; margin: 0 2px; background: #ccc; padding: 0; }
 .cms #vakata-dragged, .TreeDropdownField .treedropdownfield-panel #vakata-dragged { display: block; margin: 0 0 0 0; padding: 4px 4px 4px 24px; position: absolute; top: -2000px; line-height: 16px; z-index: 10000; }
 .cms #vakata-dragged ins, .TreeDropdownField .treedropdownfield-panel #vakata-dragged ins { display: block; text-decoration: none; width: 16px; height: 16px; margin: 0 0 0 0; padding: 0; position: absolute; top: 4px; left: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-border-radius: 4px; }
diff --git a/admin/scss/_tree.scss b/admin/scss/_tree.scss
index ad2749277..df8098c14 100644
--- a/admin/scss/_tree.scss
+++ b/admin/scss/_tree.scss
@@ -337,6 +337,25 @@
 			background: #FFF;
 			border: 1px solid silver;
 			@include box-shadow(0 0 10px #CCC);
+			&.col-2{
+				width:180px * 2; // 2x the size of the original ul
+				li{
+					width:50%;
+				}
+			}
+			&.col-3{
+				width:180px * 3; // 3x the size of the original ul
+				li{
+					width:33%;
+				}
+			}
+			li{
+				min-width:180px; 
+				float:left;
+				a{
+					@include hide-text-overflow;
+				}
+			}
 		}
 		li{
 			&.vakata-separator {