From 9152387c9225f801784677254cd2dab7ab8b65c1 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Thu, 6 Dec 2012 14:50:27 +0100
Subject: [PATCH] Fixed GridField button alignment (regression from a9cbea34)

The text-indent: 9999px was relying on text-align: right to function. Because it was left-aligned, text showed below the icon graphic.
The width of the button column was constrainted to 40px,
which first of all didn't fit the two icons properly,
but also made the big assumption that we never have more than two.
The new width: auto setting means that the column might be a bit
longer than desired, but at least it doesn't cut off icons
or wrap them into multiple lines unnecessarily.

Thanks to ARNHOE for starting this patch.
---
 css/GridField.css   | 6 +++---
 scss/GridField.scss | 8 +++++---
 2 files changed, 8 insertions(+), 6 deletions(-)

diff --git a/css/GridField.css b/css/GridField.css
index e09446362..e524c4a70 100644
--- a/css/GridField.css
+++ b/css/GridField.css
@@ -35,10 +35,10 @@
 .cms table.ss-gridfield-table tbody { background: #FFF; }
 .cms table.ss-gridfield-table tbody tr { cursor: pointer; }
 .cms table.ss-gridfield-table tbody td { width: auto; max-width: 500px; word-wrap: break-word; }
-.cms table.ss-gridfield-table tbody td.col-buttons { width: 40px; padding: 0 8px; text-align: left; }
+.cms table.ss-gridfield-table tbody td.col-buttons { width: auto; padding: 0 8px; text-align: right; white-space: nowrap; }
 .cms table.ss-gridfield-table tbody td.col-listChildrenLink { width: 16px; border-right: none; text-indent: -9999em; padding: 0; }
 .cms table.ss-gridfield-table tbody td.col-listChildrenLink .list-children-link { background: transparent url(../images/sitetree_ss_default_icons.png) no-repeat 3px -4px; display: block; }
-.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.item { color: #0073c1; }
+.cms table.ss-gridfield-table tbody td.col-getTreeTitle span.item { color: #1556b2; }
 .cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge { clear: both; text-transform: uppercase; display: inline-block; padding: 0px 3px; font-size: 0.75em; line-height: 1em; margin-left: 10px; margin-right: 6px; margin-top: -1px; -webkit-border-radius: 2px 2px; -moz-border-radius: 2px / 2px; border-radius: 2px / 2px; }
 .cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.modified { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; }
 .cms table.ss-gridfield-table tbody td.col-getTreeTitle span.badge.addedtodraft { color: #7E7470; border: 1px solid #C9B800; background-color: #FFF0BC; }
@@ -50,7 +50,7 @@
 .cms table.ss-gridfield-table tbody td button.ui-state-active { border: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
 .cms table.ss-gridfield-table tbody td button.gridfield-button-delete { width: 20px; margin: 0; }
 .cms table.ss-gridfield-table tbody td button.gridfield-button-delete span.btn-icon-decline { left: 2px; }
-.cms table.ss-gridfield-table tbody td a.view-link, .cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; width: 20px; height: 20px; text-indent: 9999em; overflow: hidden; vertical-align: middle; }
+.cms table.ss-gridfield-table tbody td a.view-link, .cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; width: 20px; height: 20px; text-align: left; text-indent: -9999em; overflow: hidden; vertical-align: middle; }
 .cms table.ss-gridfield-table tbody td a.view-link { background: url(../admin/images/btn-icon/magnifier.png) no-repeat 0 1px; }
 .cms table.ss-gridfield-table tbody td a.edit-link { background: url(../admin/images/btn-icon/document--pencil.png) no-repeat 2px 0px; }
 .cms table.ss-gridfield-table tfoot { color: #323e46; }
diff --git a/scss/GridField.scss b/scss/GridField.scss
index f1be7465f..37243feaa 100644
--- a/scss/GridField.scss
+++ b/scss/GridField.scss
@@ -164,9 +164,10 @@ $gf_grid_x:	16px;
 				// The last column (buttons) should always shrink to fit.
 				// Overwritten for IE7, which doesn't support this.			
 				&.col-buttons {
-					width: 40px;
+					width: auto;
 					padding:0 $gf_grid_x/2;
-					text-align: left;
+					text-align: right;
+					white-space: nowrap;
 				}
 				&.col-listChildrenLink {
 					width:$gf_grid_x;
@@ -254,7 +255,8 @@ $gf_grid_x:	16px;
 					display:inline-block;
 					width:20px;
 					height:20px; //min height to fit the edit icon
-					text-indent:9999em;
+					text-align: left;
+					text-indent:-9999em;
 					overflow: hidden;
 					vertical-align: middle;
 				}