From 3ef3a6df99ea554342e4e41e28b24543454b83f1 Mon Sep 17 00:00:00 2001
From: Ingo Schommer <ingo@silverstripe.com>
Date: Tue, 27 Mar 2012 16:11:05 +0200
Subject: [PATCH] MINOR Shrinking GridField button column to fit, rather than
 hardcoding a width for it that depends on the amount and styling of buttons
 in the table

---
 admin/css/ie7.css   |  1 +
 admin/scss/ie7.scss | 14 ++++++++++----
 css/GridField.css   |  5 +++--
 scss/GridField.scss | 16 +++++++++++-----
 4 files changed, 25 insertions(+), 11 deletions(-)

diff --git a/admin/css/ie7.css b/admin/css/ie7.css
index aaf3eef74..555b52021 100644
--- a/admin/css/ie7.css
+++ b/admin/css/ie7.css
@@ -20,6 +20,7 @@ html { overflow: hidden; }
 
 .jstree li a .ui-icon { text-indent: 0px !important; }
 
+.cms table.ss-gridfield-table tbody td { width: auto; }
 .cms table.ss-gridfield-table tr th.extra span input { height: 23px; }
 
 .ss-gridfield-button-filter.ss-ui-button { margin: -1px -5px; background: #e6e6e6 url(../images/filter-icons.png) no-repeat -40px 6px; filter: none; }
diff --git a/admin/scss/ie7.scss b/admin/scss/ie7.scss
index b25afb383..1f7e9b434 100644
--- a/admin/scss/ie7.scss
+++ b/admin/scss/ie7.scss
@@ -68,10 +68,16 @@ html {
 	text-indent: 0px !important;
 }
 
-//fix for filter and reset icons on datagrid 
-
-.cms table.ss-gridfield-table tr th.extra span input {
-	height:23px;
+.cms table.ss-gridfield-table {
+	tbody td {
+		// Overrule width: 100% setting to trigger "shrink fit"
+		// of button row, which IE7 doesn't support
+		width: auto;
+	}
+	tr th.extra span input {
+		//fix for filter and reset icons on datagrid 
+		height:23px;
+	}
 }
 
 .ss-gridfield-button-filter.ss-ui-button {
diff --git a/css/GridField.css b/css/GridField.css
index f118ada8f..8d8d74f78 100644
--- a/css/GridField.css
+++ b/css/GridField.css
@@ -12,11 +12,12 @@
 .cms table.ss-gridfield-table thead { color: #1d2224; background: transparent; }
 .cms table.ss-gridfield-table thead tr.filter-header .fieldgroup { max-width: 512px; }
 .cms table.ss-gridfield-table tbody { background: #FFF; }
+.cms table.ss-gridfield-table tbody td { width: 100%; }
+.cms table.ss-gridfield-table tbody td.col-buttons { width: auto; text-align: right; white-space: nowrap; }
 .cms table.ss-gridfield-table tbody td button { border: none; background: none; margin: 0 0 0 2px; padding: 0; width: auto; text-shadow: none; }
 .cms table.ss-gridfield-table tbody td button.ui-state-hover { background: none; -moz-box-shadow: none; -webkit-box-shadow: none; box-shadow: none; }
 .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 a.edit-link { display: inline-block; width: 16px; height: 20px; text-indent: -9999em; background: url(../images/icons/document--pencil.png) no-repeat 0 1px; }
-.cms table.ss-gridfield-table tbody td.col-buttons { white-space: nowrap; }
+.cms table.ss-gridfield-table tbody td a.edit-link { display: inline-block; width: 16px; height: 20px; text-indent: 9999em; background: url(../images/icons/document--pencil.png) no-repeat 0 1px; }
 .cms table.ss-gridfield-table tfoot { color: #1d2224; }
 .cms table.ss-gridfield-table tfoot tr td { background: #95a5ab; padding: .7em; border-bottom: 1px solid rgba(0, 0, 0, 0.1); }
 .cms table.ss-gridfield-table tr.title { -moz-border-radius-topleft: 7px; -webkit-border-top-left-radius: 7px; -o-border-top-left-radius: 7px; -ms-border-top-left-radius: 7px; -khtml-border-top-left-radius: 7px; border-top-left-radius: 7px; -moz-border-radius-topright: 7px; -webkit-border-top-right-radius: 7px; -o-border-top-right-radius: 7px; -ms-border-top-right-radius: 7px; -khtml-border-top-right-radius: 7px; border-top-right-radius: 7px; }
diff --git a/scss/GridField.scss b/scss/GridField.scss
index 06980d37d..c3cea9f9e 100644
--- a/scss/GridField.scss
+++ b/scss/GridField.scss
@@ -98,6 +98,16 @@ $gf_grid_x:	16px;
 		tbody {
 			background: #FFF;
 			td {
+				// Give browser some hints on which cols take priority:
+				// The last column (buttons) should always shrink to fit.
+				// Overwritten for IE7, which doesn't support this.
+				width: 100%;
+				&.col-buttons {
+					width: auto;
+					text-align: right;
+					white-space: nowrap;
+				}
+
 				button {
 					border: none;
 					background: none;
@@ -118,13 +128,9 @@ $gf_grid_x:	16px;
 					display:inline-block;
 					width:$gf_grid_x;
 					height:20px; //min height to fit the edit icon
-					text-indent:-9999em;
+					text-indent:9999em;
 					background: url(../images/icons/document--pencil.png) no-repeat 0 1px;
 				}				
-
-				&.col-buttons {
-					white-space: nowrap;
-				}
 			}			
 		}