fix display of pinned messages

css/base.css

@@ -3043,17 +3043,20 @@ ul.tabbar li.active > a {
   padding: 0.15rem 0.5rem 0.25rem 0.5rem;
   background-color: #fafafa;
   background-position: center;
-  line-height: 1.5em;
   font-weight: lighter;
   border-radius: 0 0.25rem 0.25rem 0;
   color: #666;
   height: 100%;
-  width: 100%;
-  min-width: 24rem;
+  width: 24rem;
+  min-width: 0;
   cursor: pointer;
   transition: background 0.4s;
+}
+
+.pinned > p {
   overflow-x: hidden;
   text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .pinned:hover {
@@ -3194,7 +3197,7 @@ ul.phone-country-selector span.country {
   }
 
   .pinned {
-    min-width: 12rem;
+    width: 16rem;
   }
 }
 
@@ -3236,6 +3239,6 @@ ul.phone-country-selector span.country {
   }
 
   .pinned {
-    min-width: unset;
+    width: unset;
   }
 }

src/widgets/pinned-messages.jsx

@@ -72,7 +72,7 @@ class PinnedMessages extends React.PureComponent {
           <div><i className="material-icons gray">push_pin</i></div>
         }
         <div className="pinned-scroll">{dots}</div>
-        <div className="pinned" onClick={this.handleSelected}>{shown}</div>
+        <div className="pinned" onClick={this.handleSelected}><p>{shown}</p></div>
         {selected > 0 ?
           <span className="menuTrigger upper">
             <a href="#" onClick={this.handleMovePrev}>

umd/index.dev.js

@@ -14932,7 +14932,7 @@ class PinnedMessages extends (react__WEBPACK_IMPORTED_MODULE_0___default().PureC
     }, dots), react__WEBPACK_IMPORTED_MODULE_0___default().createElement("div", {
       className: "pinned",
       onClick: this.handleSelected
-    }, shown), selected > 0 ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
+    }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("p", null, shown)), selected > 0 ? react__WEBPACK_IMPORTED_MODULE_0___default().createElement("span", {
       className: "menuTrigger upper"
     }, react__WEBPACK_IMPORTED_MODULE_0___default().createElement("a", {
       href: "#",

umd/tinode.dev.js

@@ -4170,12 +4170,18 @@ class Topic {
         this._maxDel = Math.max(ctrl.params.del, this._maxDel);
         this.clear = Math.max(ctrl.params.del, this.clear);
       }
-      ranges.forEach(r => {
-        if (r.hi) {
-          this.flushMessageRange(r.low, r.hi);
+      ranges.forEach(rec => {
+        if (rec.hi) {
+          this.flushMessageRange(rec.low, rec.hi);
         } else {
-          this.flushMessage(r.low);
+          this.flushMessage(rec.low);
         }
+        this._messages.put({
+          seq: rec.low,
+          low: rec.low,
+          hi: rec.hi,
+          _deleted: true
+        });
       });
       this._tinode._db.addDelLog(this.name, ctrl.params.del, ranges);
       if (this.onData) {
@@ -4845,14 +4851,20 @@ class Topic {
     this.clear = Math.max(clear, this.clear);
     let count = 0;
     if (Array.isArray(delseq)) {
-      delseq.forEach(range => {
-        if (!range.hi) {
+      delseq.forEach(rec => {
+        if (!rec.hi) {
           count++;
-          this.flushMessage(range.low);
+          this.flushMessage(rec.low);
         } else {
-          count += range.hi - range.low;
-          this.flushMessageRange(range.low, range.hi);
+          count += rec.hi - rec.low;
+          this.flushMessageRange(rec.low, rec.hi);
         }
+        this._messages.put({
+          seq: rec.low,
+          low: rec.low,
+          hi: rec.hi,
+          _deleted: true
+        });
       });
       this._tinode._db.addDelLog(this.name, clear, delseq);
     }