fixes issue #500

css/helios.css

@@ -78,11 +78,29 @@ html[xmlns] .clearfix {
 #helios .state.modified {
   background: transparent url('../images/modified.png') 50% 50% no-repeat;
 }
+#helios .editor {
+  position: absolute;
+  top: 0;
+  bottom: 23px;
+  left: 0;
+  right: 0;
+}
 #helios .buttons_bar {
   position: absolute;
-  bottom: 8px;
-  right: 20px;
+  bottom: 0;
+  right: 0;
+  left: 0;
   z-index: 2;
+  padding: 0px 25px;
+  height: 21px;
+  line-height: 18px;
+  border-top: 1px solid #999;
+  text-align: right;
+}
+#helios .buttons_bar .button {
+  height: 17px;
+  font-size: 12px;
+  min-width: 0;
 }
 #helios .btn,
 #helios .btn-group > .btn,
@@ -409,11 +427,17 @@ html[xmlns] .clearfix {
   width: 100%;
   height: 16px;
   bottom: 0;
-  background: #dadada;
-  border-top: 1px solid #666;
   padding: 0;
   margin: 0;
+}
+#helios .tool_container .pane_actions,
+#helios .tool_container .buttons_bar {
+  background: #dadada;
+  border-top: 1px solid #666;
   background-image: -webkit-linear-gradient(top, #dadada, #bdbdbd);
+  background-image: -moz-linear-gradient(top, #dadada, #bdbdbd);
+  background-image: -o-linear-gradient(top, #dadada, #bdbdbd);
+  background-image: linear-gradient(top, #dadada, #bdbdbd);
 }
 #helios .tool_container .panes .pane .pane_actions .info {
   padding: 10px 5px 5px;

css/helios.less

@@ -97,11 +97,31 @@ html[xmlns] .clearfix {
 	background: transparent url('../images/modified.png') 50% 50% no-repeat;
     }
 
+    .editor {
+	position: absolute;
+	top: 0;
+	bottom: 23px;
+	left: 0;
+	right: 0;
+    }
+
     .buttons_bar {
 	position: absolute;
-	bottom: 8px;
-	right: 20px;
+	bottom: 0;
+	right: 0;
+	left: 0;
 	z-index: 2;
+	padding: 0px 25px;
+	height: 21px;
+	line-height: 18px;
+	border-top: 1px solid #999;
+	text-align: right;
+
+	.button {
+	    height: 17px;
+	    font-size: 12px;
+	    min-width: 0;
+	}
     }
 
     .btn, .btn-group > .btn, .btn-group > .dropdown-menu {
@@ -482,11 +502,17 @@ html[xmlns] .clearfix {
 	width: 100%;
 	height: 16px;
 	bottom: 0;
-	background: #dadada;
-	border-top: 1px solid #666;
 	padding: 0;
 	margin: 0;
+    }
+
+    .tool_container .pane_actions, .tool_container .buttons_bar {
+	background: #dadada;
+	border-top: 1px solid #666;
 	background-image: -webkit-linear-gradient(top, #dadada, #bdbdbd);
+	background-image: -moz-linear-gradient(top, #dadada, #bdbdbd);
+	background-image: -o-linear-gradient(top, #dadada, #bdbdbd);
+	background-image: linear-gradient(top, #dadada, #bdbdbd);
     }
 
     .tool_container .panes .pane .pane_actions .info {

js/Helios-Workspace.deploy.js

@@ -553,21 +553,27 @@ selector: "renderContentOn:",
 fn: function (html){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-var $1,$2,$3,$4;
-self["@code"]=_st(html)._textarea();
-self["@state"]=_st(_st(html)._div())._class_("state");
+var $1,$2,$3,$4,$5,$6;
 $1=_st(html)._div();
-_st($1)._class_("buttons_bar");
+_st($1)._class_("editor");
 $2=_st($1)._with_((function(){
 return smalltalk.withContext(function($ctx2) {
+self["@code"]=_st(html)._textarea();
+return self["@code"];
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1)})}));
+self["@state"]=_st(_st(html)._div())._class_("state");
+$3=_st(html)._div();
+_st($3)._class_("buttons_bar");
+$4=_st($3)._with_((function(){
+return smalltalk.withContext(function($ctx2) {
 return _st(self)._renderButtonsOn_(html);
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1)})}));
-$3=self;
-_st($3)._setEditorOn_(_st(self["@code"])._element());
-_st($3)._configureEditor();
-$4=_st($3)._updateState();
+$5=self;
+_st($5)._setEditorOn_(_st(self["@code"])._element());
+_st($5)._configureEditor();
+$6=_st($5)._updateState();
 return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},smalltalk.HLCodeWidget)})},
-messageSends: ["textarea", "class:", "div", "with:", "renderButtonsOn:", "setEditorOn:", "element", "configureEditor", "updateState"]}),
+messageSends: ["class:", "div", "with:", "textarea", "renderButtonsOn:", "setEditorOn:", "element", "configureEditor", "updateState"]}),
 smalltalk.HLCodeWidget);
 
 smalltalk.addMethod(

js/Helios-Workspace.js

@@ -739,23 +739,29 @@ category: 'rendering',
 fn: function (html){
 var self=this;
 return smalltalk.withContext(function($ctx1) { 
-var $1,$2,$3,$4;
-self["@code"]=_st(html)._textarea();
-self["@state"]=_st(_st(html)._div())._class_("state");
+var $1,$2,$3,$4,$5,$6;
 $1=_st(html)._div();
-_st($1)._class_("buttons_bar");
+_st($1)._class_("editor");
 $2=_st($1)._with_((function(){
 return smalltalk.withContext(function($ctx2) {
+self["@code"]=_st(html)._textarea();
+return self["@code"];
+}, function($ctx2) {$ctx2.fillBlock({},$ctx1)})}));
+self["@state"]=_st(_st(html)._div())._class_("state");
+$3=_st(html)._div();
+_st($3)._class_("buttons_bar");
+$4=_st($3)._with_((function(){
+return smalltalk.withContext(function($ctx2) {
 return _st(self)._renderButtonsOn_(html);
 }, function($ctx2) {$ctx2.fillBlock({},$ctx1)})}));
-$3=self;
-_st($3)._setEditorOn_(_st(self["@code"])._element());
-_st($3)._configureEditor();
-$4=_st($3)._updateState();
+$5=self;
+_st($5)._setEditorOn_(_st(self["@code"])._element());
+_st($5)._configureEditor();
+$6=_st($5)._updateState();
 return self}, function($ctx1) {$ctx1.fill(self,"renderContentOn:",{html:html},smalltalk.HLCodeWidget)})},
 args: ["html"],
-source: "renderContentOn: html\x0a\x09code := html textarea.\x0a\x09state := html div class: 'state'.\x0a\x09\x0a\x09html div \x0a\x09\x09class: 'buttons_bar';\x0a\x09\x09with: [ self renderButtonsOn: html ].\x0a\x09\x0a\x09self \x0a\x09\x09setEditorOn: code element;\x0a\x09\x09configureEditor;\x0a\x09\x09updateState",
-messageSends: ["textarea", "class:", "div", "with:", "renderButtonsOn:", "setEditorOn:", "element", "configureEditor", "updateState"],
+source: "renderContentOn: html\x0a\x09html div class: 'editor'; with: [\x0a\x09\x09code := html textarea ].\x0a\x09state := html div class: 'state'.\x0a\x09\x0a\x09html div \x0a\x09\x09class: 'buttons_bar';\x0a\x09\x09with: [ self renderButtonsOn: html ].\x0a\x09\x0a\x09self \x0a\x09\x09setEditorOn: code element;\x0a\x09\x09configureEditor;\x0a\x09\x09updateState",
+messageSends: ["class:", "div", "with:", "textarea", "renderButtonsOn:", "setEditorOn:", "element", "configureEditor", "updateState"],
 referencedClasses: []
 }),
 smalltalk.HLCodeWidget);

st/Helios-Workspace.st

@@ -269,7 +269,8 @@ renderButtonsOn: html
 !
 
 renderContentOn: html
-	code := html textarea.
+	html div class: 'editor'; with: [
+		code := html textarea ].
 	state := html div class: 'state'.
 	
 	html div