diff --git a/packages/xod-client-electron/src/app/main.js b/packages/xod-client-electron/src/app/main.js
index ff2b3016..e736e186 100644
--- a/packages/xod-client-electron/src/app/main.js
+++ b/packages/xod-client-electron/src/app/main.js
@@ -82,7 +82,9 @@ function createWindow() {
     y: winState.y,
     width: winState.width,
     height: winState.height,
-    minWidth: 800,
+    // 700px is the content width on xod.io and Medium. Resizing down to it
+    // lets make 1-to-1 screencasts and snapshots
+    minWidth: 700,
     minHeight: 600,
     title: DEFAULT_APP_TITLE,
     show: false,
diff --git a/packages/xod-client/src/core/styles/components/Suggester.scss b/packages/xod-client/src/core/styles/components/Suggester.scss
index 76597594..e5052846 100644
--- a/packages/xod-client/src/core/styles/components/Suggester.scss
+++ b/packages/xod-client/src/core/styles/components/Suggester.scss
@@ -11,15 +11,24 @@
 }
 
 .Suggester {
+  $width: 400px;
+
   position: absolute;
   left: 50%;
   top: 5%;
   z-index: 10;
 
-  width: 400px;
-  margin: 0 0 0 -400px;
+  width: $width;
+  margin-left: (-$width);
   box-sizing: border-box;
 
+  @media(max-width: 2 * $width) {
+    /* In cases when the window is to narrow to host the whole suggester on the
+       right half, use the full width of the half we have */
+    width: 50vw;
+    margin-left: -50vw;
+  }
+
   padding: 4px;
 
   display: block;
@@ -112,14 +121,26 @@
   }
 
   &-item {
-    padding: 6px 4px;
-    height: 40px;
+    // Keeping a height of every line of the item the same is cruicial
+    // because at most times content will overflow (description is too
+    // long). To be sure the content is clipped accurately between lines
+    // the line height is fixed and inner elements should not add any
+    // non-complementary vertical margins and paddings
+    $line-height: 15px;
+    $padding-vert: 6px;
+    $title-margin: 3px;
+
+    padding: ($padding-vert + $title-margin) 4px 0 4px;
+    // The border is an artificial bottom-padding hiding overflown content
+    border-bottom: $padding-vert solid transparent;
+    height: 3 * $line-height;
+    position: relative;
     overflow: hidden;
 
     border-radius: 2px;
 
     &--library {
-      height: 52px;
+      height: 4 * $line-height;
 
       .add {
         display: block;
@@ -141,9 +162,9 @@
       display: block;
       font-size: $font-size-l;
       color: $sidebar-color-text-hover;
-      margin-bottom: 2px;
-      margin-top: -2px;
-      line-height: 1.2;
+      margin-bottom: $title-margin;
+      margin-top: -$title-margin;
+      line-height: $line-height;
 
       .version {
         font-size: $font-size-m;
@@ -151,17 +172,17 @@
       }
     }
     .description {
+      color: $sidebar-color-subtitle;
       display: block;
       font-size: $font-size-m;
-      height: 28px;
-      padding-top: 2px;
+      line-height: $line-height;
       overflow: hidden;
     }
   }
 
   mark {
-    background: rgba(255,255,0,.25);
-    box-shadow: 0 0 2px rgba(255,255,0,.25);
+    background: rgba($olive, 0.5);
+    box-shadow: 0 0 2px rgba($olive, 0.5);
     color: #fff;
     text-shadow: 0 1px 2px rgba(0,0,0,.6);
   }
diff --git a/packages/xod-client/src/editor/containers/Helpbox.jsx b/packages/xod-client/src/editor/containers/Helpbox.jsx
index d30f9207..0c72bf15 100644
--- a/packages/xod-client/src/editor/containers/Helpbox.jsx
+++ b/packages/xod-client/src/editor/containers/Helpbox.jsx
@@ -64,20 +64,27 @@ class Helpbox extends React.Component {
     window.removeEventListener(UPDATE_HELPBOX_POSITION, this.onUpdatePosition);
   }
   onUpdatePosition(event) {
+    // If helpbox refers to an element that is too close to the right side and
+    // helpbox could not fit window, it will be switched to the "rightSide"
+    // mode. That also means the pointer will be translated to the right side
+    // and helpbox will be positioned at the left side of referred element E.g.
+    //
+    // ProjectBrowser at the left side — Helpbox is not "rightSided" helpbox;
+    // ProjectBrowser at the right side — Helpbox "rightSided".
+    //
+    // Also if the helpbox is too wide to fit either side, a jut would be
+    // applied so that it will be completely visible at the expense of
+    // overlaping the referred element.
     const windowWidth = window.innerWidth;
     const elWidth = this.helpboxRef.clientWidth;
-
-    const rightSided = event.detail.right + elWidth >= windowWidth;
+    const overflow = Math.max(0, event.detail.right + elWidth - windowWidth);
+    const underflow = Math.max(0, elWidth - event.detail.left);
+    const rightSided = overflow > underflow;
+    const jut = rightSided ? underflow : -overflow;
+    const left =
+      jut + (rightSided ? event.detail.left - elWidth : event.detail.right);
 
     const top = event.detail.top;
-    // if helpbox refers to element that closer to the right side and
-    // helpbox could not fit window — it will be switched to "rightSide"
-    // mode, that means that pointer will be translated to the right side
-    // and helpbox will be positioned at the left side of referred element
-    // E.G. ProjectBrowser at the left side — Helpbox is not "rightSided" helpbox
-    //      ProjectBrowser at the right side — Helpbox "rightSided"
-    const left = rightSided ? event.detail.left - elWidth : event.detail.right;
-
     const windowHeight = window.innerHeight;
     const elHeight = this.helpboxRef.clientHeight;
     const isFitWindow = top + elHeight < windowHeight;