title: Fixing Gmail's layout with a custom style
body: <p>I'm trying to make Gmail's new look usable on my small 1024x768 screen - the default layout leaves only a small window for the messages, surrounded by unmoving elements. Scrolling that small window around is massively annoying.</p>
  
  <p>I've managed to make the entire page scrollable using a <a href="https://addons.mozilla.org/en-US/firefox/addon/stylish/" rel="noreferrer">Stylish</a> user style (a modified version of <a href="http://userstyles.org/styles/56331/new-style-gmail-get-rid-of-internal-scrollbars" rel="noreferrer">this one</a>):</p>
  
  <pre class="lang-css prettyprint-override"><code>@-moz-document domain('mail.google.com'), 
   url-prefix('https://mail.google.com/mail') {
  
  .akc.lKgBkb,
  .oLaOvc.aeJ,
  .lKgBkb.nH.oy8Mbf,
  .lKgBkb.ajl.aib
  {
    height: auto !important;
    overflow: hidden !important;
  }
  
  #canvas_frame { overflow-y: scroll; }
  
  .l2 { padding-bottom: 20px !important; }
  
  }
  </code></pre>
  
  <p>The elements that were supposed to have scrollbars now have <code>height: auto</code>, and what is scrolled is the whole outer page (in <code>#canvas-frame</code>) that was supposed to remain static.</p>
  
  <p>I'm mostly satisfied with the effect -- it works almost like the old Gmail did. There is, however, a problem - <strong>scrolling with keyboard (arrow keys, PgUp/PgDn, Home/End) stopped working</strong>. Any ideas on how to fix that?</p>