diff --git a/src/ui/ab.tis b/src/ui/ab.tis index 3d39bac33..7363b1570 100644 --- a/src/ui/ab.tis +++ b/src/ui/ab.tis @@ -25,8 +25,8 @@ class SearchBar: Reactor.Component { function render() { var value = searchPatterns[this.type] || ""; var me = this; - self.timer(1ms, function() { me.search_id.value = value; }); - return
+ self.timer(1ms, function() { (me.search_id || {}).value = value; }); + return
{search_icon} {value && {clear_icon}} @@ -285,6 +285,7 @@ class MultipleSessions: Reactor.Component { self.timer(60ms, function() { me.hidden = false; me.update(); + self.timer(30ms, function() { me.onSize(); }); }); } @@ -297,10 +298,23 @@ class MultipleSessions: Reactor.Component { } function onSize() { - var w = this.$(.sessions-bar).box(#width) - 220; - this.$(#sessions-type span).style.set{ - "max-width": (w / (handler.is_installed() ? 2 : 3)) + "px", - }; + var w = this.$(.sessions-bar .sessions-tab).box(#width); + var len = translate('Recent Sessions').length; + var totalChars = 0; + var nEle = 0; + for (var el in this.$$(#sessions-type span)) { + nEle += 1; + var n = el.text.length; + totalChars += n; + } + for (var el in this.$$(#sessions-type span)) { + var n = el.text.length; + var maxWidth = (w - nEle * 2 * 8) * n / totalChars; + if (maxWidth < 0) maxWidth = 36; + el.style.set{ + "max-width": maxWidth + "px", + }; + } } } diff --git a/src/ui/index.css b/src/ui/index.css index 31079e963..57089c8c6 100644 --- a/src/ui/index.css +++ b/src/ui/index.css @@ -50,7 +50,7 @@ div.sessions-bar { div.sessions-tab span { display: inline-block; - padding: 6px 12px; + padding: 6px 8px; cursor: pointer; @ELLIPSIS; }