fix message scrolling and no-read-access display

css/base.css

@@ -922,11 +922,20 @@ table.permission-editor td.checkbox {
   background-image: url("../img/ignasi_pattern_s.png");
 }
 
+#messages-container {
+  position: relative;
+  overflow-y: hidden;
+  height: 100%;
+}
+
 #write-only-background {
+  position: absolute;
+  top: 0;
+  left: 0;
   height: 100%;
   width: 100%;
-  background-image: repeating-linear-gradient(45deg,
+  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.5), rgba(255,255,255,.5) 0.5rem,
-    transparent, transparent 0.5rem, rgba(255,255,255,.5) 0.5rem, rgba(255,255,255,.5) 1rem);
+    rgba(255,255,255,.8) 0.5rem, rgba(255,255,255,.8) 1rem);
 }
 
 #write-only-note {
@@ -941,6 +950,7 @@ table.permission-editor td.checkbox {
   left: 50%;
   transform: translate(-50%, -50%);
   padding: 0.25rem 1.5rem;
+  box-shadow: 0.1rem 0.1rem 0.1rem rgba(0,0,0,0.2);
 }
 /* Footer-panel with the input for the new message */
 #send-message-panel {

index.html

@@ -3528,16 +3528,19 @@
                   onClearError={this.props.onError} />
                 : null}
               <LoadSpinner show={this.state.fetchingMessages} />
-              <div id="messages-panel" ref={this.handleScrollReference}>
+              <div id="messages-container">
-                {this.state.writeOnly ?
+                <div id="messages-panel" ref={this.handleScrollReference}>
-                  <div id="write-only-background">
-                    <div id="write-only-note">no access to messages</div>
-                  </div>
-                  :
                   <ul id="scroller" className={chatBoxClass}>
                     {messageNodes}
                   </ul>
-                }
+                </div>
+              {this.state.writeOnly ?
+                <div id="write-only-background">
+                  <div id="write-only-note">no access to messages</div>
+                </div>
+                :
+                null
+              }
               </div>
               <MessagesView.Send
                 topic={this.props.topic}