css fix

css/base.css

@@ -762,8 +762,8 @@ i.search {
   display: flex;
   flex-direction: column;
   justify-content: space-around;
-  width: inherit;
+  font-size: 2.4rem;
-  height: inherit;
+  line-height: 3rem;
 }
 .contact-box .text-box {
   display: flex;
@@ -885,8 +885,6 @@ i.search {
 
 .avatar-upload .avatar-box > .material-icons {
   position: relative;
-  width: 7rem;
-  height: 7rem;
   font-size: 4rem;
   line-height: 7rem;
   vertical-align: middle;
@@ -986,6 +984,11 @@ i.search {
   margin-right: 0.35rem;
 }
 
+#topic-caption-panel .avatar-box > .material-icons {
+  font-size: 2.4rem;
+  line-height: 3rem;
+}
+
 #hide-message-view {
   display: block;
   margin-right: 0.35rem;
@@ -1667,10 +1670,8 @@ ul.tabbar li.active > a:after {
   font-size: 2.4rem;
 }
 
-#self-avatar.material-icons {
+#self-avatar .material-icons {
   font-size: 2.4rem;
-  width: 3rem;
-  height: 3rem;
   line-height: 3rem;
 }
 .avatar-box .material-icons {
@@ -1763,7 +1764,8 @@ ul.tabbar li.active > a:after {
 }
 
 .chip .avatar-box .material-icons {
-  font-size: 1.8rem;
+  font-size: 1.4rem;
+  line-height: 1.8rem;
 }
 
 .chip .spacer {

src/widgets/in-place-edit.jsx

@@ -54,7 +54,12 @@ export default class InPlaceEdit extends React.Component {
     }
   }
 
-  handleEditingFinished() {
+  handleEditingFinished(event) {
+    if (this.props.required && !event.target.checkValidity()) {
+      // Empty input
+      this.setState({value: this.props.value, active: false});
+      return;
+    }
     this.setState({active: false});
     let value = this.state.value.trim();
     if ((value || this.props.value) && (value !== this.props.value)) {

umd/index.dev.js

@@ -1760,6 +1760,8 @@ var InfoView = function (_React$Component) {
   }, {
     key: "handleFullNameUpdate",
     value: function handleFullNameUpdate(fn) {
+      fn = fn.trim();
+
       if (this.state.fullName !== fn) {
         this.setState({
           fullName: fn
@@ -2052,6 +2054,7 @@ var InfoView = function (_React$Component) {
         placeholder: this.state.groupTopic ? "Group name" : react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("i", null, "Unknown"),
         readOnly: !this.state.owner,
         value: this.state.fullName,
+        required: true,
         onFinished: this.handleFullNameUpdate
       })), react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("div", null, react__WEBPACK_IMPORTED_MODULE_0___default.a.createElement("label", {
         className: "small"
@@ -7860,7 +7863,15 @@ var InPlaceEdit = function (_React$Component) {
     }
   }, {
     key: "handleEditingFinished",
-    value: function handleEditingFinished() {
+    value: function handleEditingFinished(event) {
+      if (this.props.required && !event.target.checkValidity()) {
+        this.setState({
+          value: this.props.value,
+          active: false
+        });
+        return;
+      }
+
       this.setState({
         active: false
       });