scroll fix wiht a mask

Author: kevzettler

app/assets/stylesheets/_base.sass

@@ -84,7 +84,6 @@ body
   width: $main-area-width
   float: left
   border-right: 1px solid #CDD1D4
+  padding-bottom: 70px
+  padding-top: 22px
 
-
-.main-area, .sidebar
-  padding-top: 15px

app/assets/stylesheets/_chat_area.sass

@@ -84,7 +84,6 @@ html body .ui-tabs .ui-tabs-nav li
   height: 88%
   background: #FFF
   padding: 10px
-  padding-bottom: 72px
   .pagination
     text-decoration: underline
     cursor: pointer
@@ -95,13 +94,14 @@ html body .ui-tabs .ui-tabs-nav li
   +border-bottom-radius(4px)
   +box-shadow(5px 0px 5px -3px #cccccc, -5px 0px 5px -3px #cccccc, 0px 5px 5px 0px #cccccc)
   float: left
-  border-top: 1px solid #EBEFF1
+  border-top: 1px solid #f5f8f9
   padding: 10px 0px 10px 10px
-  width: 77%
+  width: 77.2%
   position: fixed
   bottom: 0px
   margin-bottom: 20px
   background: #e6edef
+  z-index: 600
   textarea
     +border-top-left-radius(4px)
     +border-bottom-left-radius(4px)
@@ -124,3 +124,13 @@ html body .ui-tabs .ui-tabs-nav li
     margin: 0px
     height: 40px
     font-size: 16px
+
+#mask
+  position: fixed
+  z-index: 100
+  bottom: 0
+  display: block
+  height: 30px
+  margin-left: -16px
+  width: 81%
+  background: #E6EBEE url("/assets/page_bg.png") repeat

app/views/main/index.html.erb

@@ -27,11 +27,15 @@
   </div>
 
   <div id="app_body">
-    <div class="main-area"></div>
+    <div class="main-area"> </div>
 
     <div class="sidebar">
       <div class="widgets"></div>
     </div>
   </div>
+
+  <div id="mask">&nbsp;</div>
+
+
 </div>