minor visual fixes

css/base.css

@@ -69,8 +69,8 @@ a.gray:focus {
   height: 1.4em;
   line-height: 1.4em;
   text-transform: none;
-  padding-left: .35rem;
-  padding-right: .35rem;
+  padding: 0 .35rem;
+  margin: 0.15rem;
   border: 1px solid #999;
   border-radius: 3px;
   background-color: #eee;
@@ -939,6 +939,12 @@ i.search {
   font-weight: lighter;
 }
 
+.contact-box .contact-comment > span {
+  overflow-x: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
 .contact-box .contact-comment b {
   font-weight: bolder;
 }
@@ -1934,6 +1940,7 @@ ul.tabbar li.active > a {
   text-align: center;
   border-radius: 50%;
   line-height: 1;
+  padding-top: 0.1em;
   color: rgba(250, 250, 250, 0.8); /* default text color #FAFAFA, gray 50 */
 }
 

src/widgets/contact.jsx

@@ -115,7 +115,7 @@ class Contact extends React.Component {
           </div>
           {this.props.showMode ?
             <span><ContactBadges badges={badges} /></span> :
-            this.props.small ? null : <div className="contact-comment">{marker}{subtitle || '\u00A0'}</div>}
+            this.props.small ? null : <div className="contact-comment">{marker}<span>{subtitle || '\u00A0'}</span></div>}
         </div>
         {this.props.showContextMenu ?
           <span className="menuTrigger">
@@ -161,7 +161,7 @@ function draftyFormatter(style, data, values, key) {
       case 'FM':
         el = React.Fragment;
         values = [<i key="fm" className="material-icons">dashboard</i>,
-          formatMessage(messages.drafty_form)].concat(values || []);
+          formatMessage(messages.drafty_form)].concat(' ', values || []);
         break;
       case 'RW':
         el = React.Fragment;

src/widgets/topic-desc-edit.jsx

@@ -91,6 +91,7 @@ export default class TopicDescEdit extends React.Component {
     this.setState({newAvatar: img, newAvatarMime: mime});
     if (!img) {
       // Deleting the avatar.
+      this.setState({avatar: null});
       this.props.onUpdateTopicDesc(this.props.topic, theCard(null, Tinode.DEL_CHAR));
     }
   }

umd/index.dev.js

@@ -7958,7 +7958,7 @@ class Contact extends (react__WEBPACK_IMPORTED_MODULE_0___default().Component) {
       badges: badges
     })) : this.props.small ? null : react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "contact-comment"
-    }, marker, subtitle || '\u00A0')), this.props.showContextMenu ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    }, marker, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", null, subtitle || '\u00A0'))), this.props.showContextMenu ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "menuTrigger"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",
@@ -8015,7 +8015,7 @@ function draftyFormatter(style, data, values, key) {
         values = [react__WEBPACK_IMPORTED_MODULE_0___default().createElement("i", {
           key: "fm",
           className: "material-icons"
-        }, "dashboard"), formatMessage(messages.drafty_form)].concat(values || []);
+        }, "dashboard"), formatMessage(messages.drafty_form)].concat(' ', values || []);
         break;
 
       case 'RW':
@@ -11687,6 +11687,9 @@ class TopicDescEdit extends (react__WEBPACK_IMPORTED_MODULE_0___default().Compon
     });
 
     if (!img) {
+      this.setState({
+        avatar: null
+      });
       this.props.onUpdateTopicDesc(this.props.topic, (0,_lib_utils_js__WEBPACK_IMPORTED_MODULE_9__.theCard)(null, (tinode_sdk__WEBPACK_IMPORTED_MODULE_2___default().DEL_CHAR)));
     }
   }