diff --git a/helix-term/src/keymap.rs b/helix-term/src/keymap.rs
index 1267eca2..57bcb321 100644
--- a/helix-term/src/keymap.rs
+++ b/helix-term/src/keymap.rs
@@ -145,7 +145,7 @@ impl From<KeyTrieNode> for Info {
                 .map(|(desc, keys)| (desc.strip_prefix(&prefix).unwrap(), keys))
                 .collect();
         }
-        Info::key(node.name(), body)
+        Info::new(node.name(), body)
     }
 }
 
diff --git a/helix-term/src/ui/info.rs b/helix-term/src/ui/info.rs
index 0f14260e..0da0fe65 100644
--- a/helix-term/src/ui/info.rs
+++ b/helix-term/src/ui/info.rs
@@ -1,8 +1,8 @@
 use crate::compositor::{Component, Context};
-use helix_view::graphics::Rect;
+use helix_view::graphics::{Margin, Rect};
 use helix_view::info::Info;
 use tui::buffer::Buffer as Surface;
-use tui::widgets::{Block, Borders, Widget};
+use tui::widgets::{Block, Borders, Paragraph, Widget};
 
 impl Component for Info {
     fn render(&mut self, viewport: Rect, surface: &mut Surface, cx: &mut Context) {
@@ -11,10 +11,11 @@ impl Component for Info {
         // Calculate the area of the terminal to modify. Because we want to
         // render at the bottom right, we use the viewport's width and height
         // which evaluate to the most bottom right coordinate.
-        let (width, height) = (self.width + 2, self.height + 2);
+        let width = self.width + 2 + 2; // +2 for border, +2 for margin
+        let height = self.height + 2; // +2 for border
         let area = viewport.intersection(Rect::new(
             viewport.width.saturating_sub(width),
-            viewport.height.saturating_sub(height + 2),
+            viewport.height.saturating_sub(height + 2), // +2 for statusline
             width,
             height,
         ));
@@ -24,15 +25,14 @@ impl Component for Info {
             .title(self.title.as_str())
             .borders(Borders::ALL)
             .border_style(style);
-        let inner = block.inner(area);
+
+        let margin = Margin {
+            vertical: 0,
+            horizontal: 1,
+        };
+        let inner = block.inner(area).inner(&margin);
         block.render(area, surface);
 
-        // Only write as many lines as there are rows available.
-        for (y, line) in (inner.y..)
-            .zip(self.text.lines())
-            .take(inner.height as usize)
-        {
-            surface.set_string(inner.x, y, line, style);
-        }
+        Paragraph::new(self.text.as_str()).render(inner, surface);
     }
 }
diff --git a/helix-view/src/info.rs b/helix-view/src/info.rs
index 70e934cd..629a3112 100644
--- a/helix-view/src/info.rs
+++ b/helix-view/src/info.rs
@@ -16,45 +16,33 @@ pub struct Info {
 }
 
 impl Info {
-    // body is a BTreeMap instead of a HashMap because keymaps are represented
-    // with nested hashmaps with no ordering, and each invocation of infobox would
-    // show different orders of items
-    pub fn key(title: &str, body: Vec<(&str, Vec<KeyEvent>)>) -> Info {
-        let (lpad, mpad, rpad) = (1, 2, 1);
-        let keymaps_width: u16 = body
-            .iter()
-            .map(|r| r.1.iter().map(|e| e.width() as u16 + 2).sum::<u16>() - 2)
-            .max()
-            .unwrap();
+    pub fn new(title: &str, body: Vec<(&str, Vec<KeyEvent>)>) -> Info {
+        let body = body
+            .into_iter()
+            .map(|(desc, events)| {
+                let events = events.iter().map(ToString::to_string).collect::<Vec<_>>();
+                (desc, events.join(", "))
+            })
+            .collect::<Vec<_>>();
+
+        let keymaps_width = body.iter().map(|r| r.1.len()).max().unwrap();
         let mut text = String::new();
-        let mut width = 0;
-        let height = body.len() as u16;
-        for (desc, keyevents) in body {
-            let keyevent = keyevents[0];
-            let mut left = keymaps_width - keyevent.width() as u16;
-            for _ in 0..lpad {
-                text.push(' ');
-            }
-            write!(text, "{}", keyevent).ok();
-            for keyevent in &keyevents[1..] {
-                write!(text, ", {}", keyevent).ok();
-                left -= 2 + keyevent.width() as u16;
-            }
-            for _ in 0..left + mpad {
-                text.push(' ');
-            }
-            let desc = desc.trim();
-            let w = lpad + keymaps_width + mpad + (desc.width() as u16) + rpad;
-            if w > width {
-                width = w;
-            }
-            writeln!(text, "{}", desc).ok();
+
+        for (desc, keyevents) in &body {
+            let _ = writeln!(
+                text,
+                "{:width$}  {}",
+                keyevents,
+                desc,
+                width = keymaps_width
+            );
         }
+
         Info {
             title: title.to_string(),
+            width: text.lines().map(|l| l.width()).max().unwrap() as u16,
+            height: body.len() as u16,
             text,
-            width,
-            height,
         }
     }
 }