[cros] Polishing avatar picker layout.

*) Set min-width to prevent broken layout in narrow windows.
*) Reduce spacing to 8px.
*) Add border-radius to preview image.


BUG=138599
TEST=Manual


Review URL: https://chromiumcodereview.appspot.com/10805079

git-svn-id: svn://svn.chromium.org/chrome/trunk/src@148044 0039d316-1c4b-4281-b951-d872f2087c98

chrome/browser/resources/chromeos/login/oobe.css

@@ -529,7 +529,6 @@ html[oobe=old] #user-image {
  */
 
 #user-image-preview {
-  border-radius: 4px;
   float: right;
   margin: 4px;
   max-width: 220px;
@@ -552,6 +551,8 @@ html[camera=webrtc] .camera.live #user-image-preview-img {
 .default-image #user-image-preview-img {
   background: white;
   border: solid 1px #cacaca;
+  border-radius: 4px;
+  padding: 2px;
 }
 
 .user-image-stream-area {

chrome/browser/resources/options2/chromeos/change_picture_options.css

@@ -2,6 +2,10 @@
  * Use of this source code is governed by a BSD-style license that can be
  * found in the LICENSE file. */
 
+#change-picture-page .content-area {
+  min-width: 800px;
+}
+
 #user-image-grid {
   -webkit-user-drag: none;
   -webkit-user-select: none;
@@ -11,7 +15,7 @@
   /* Necessary for correct metrics calculation by grid.js. */
   overflow: hidden;
   padding: 0;
-  width: 562px;
+  width: 538px;
 }
 
 #user-image-grid * {
@@ -30,7 +34,7 @@
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   display: inline-block;
-  margin: 10px;
+  margin: 8px;
   padding: 3px;
 }
 
@@ -50,7 +54,6 @@
  */
 
 #user-image-preview {
-  border-radius: 4px;
   display: inline-block;
   margin-right: 10px;
   margin-top: 20px;
@@ -79,6 +82,8 @@ html[dir=rtl] #user-image-preview {
 .default-image .user-image-preview-img {
   background: white;
   border: solid 1px #cacaca;
+  border-radius: 4px;
+  padding: 2px;
 }
 
 .user-image-stream-area {