diff --git a/src/templates/app.html b/src/templates/app.html
index dd6d43ccb..9c8f55d3b 100644
--- a/src/templates/app.html
+++ b/src/templates/app.html
@@ -32,7 +32,7 @@
         </div>
       </div>
 
-      <div style="width: 750px; float: left; margin-left: 30px;">
+      <div id="noteDetailWrapper" style="width: 750px; float: left; margin-left: 30px;">
         <div style="float: right;" class="hide-toggle">
           <form action="logout" method="POST">
             <input type="submit" class="btn btn-sm" value="Logout">
diff --git a/static/js/init.js b/static/js/init.js
index 7f2312f4a..91e4bbbaf 100644
--- a/static/js/init.js
+++ b/static/js/init.js
@@ -18,11 +18,13 @@ $(function() {
 jQuery.hotkeys.options.filterInputAcceptingElements = true;
 jQuery.hotkeys.options.filterContentEditable = true;
 
-$(document).bind('keydown', 'alt+ctrl+h', function() {
+$(document).bind('keydown', 'alt+h', function() {
     const toggle = $(".hide-toggle");
+    const hidden = toggle.css('display') === 'none';
 
-    // use visibility instead of display so that content isn't moved around and stays set in place
-    toggle.css('visibility', toggle.css('visibility') === 'hidden' ? 'visible' : 'hidden');
+    toggle.css('display', hidden ? 'block' : 'none');
+
+    $("#noteDetailWrapper").css("width", hidden ? "750px" : "100%");
 });
 
 $(document).bind('keydown', 'alt+q', function() {