From 42184031d7102742cffd4ad04961d70c9882c52e Mon Sep 17 00:00:00 2001
From: Beatrice Olivera <beatriceolivera1999@gmail.com>
Date: Thu, 6 Sep 2018 15:39:50 +0100
Subject: [PATCH] made container in chat overflow

---
 app/assets/stylesheets/pages/_messages.scss | 14 ++++----
 app/views/chat_rooms/show.html.erb          | 36 +++++++++++----------
 2 files changed, 27 insertions(+), 23 deletions(-)

diff --git a/app/assets/stylesheets/pages/_messages.scss b/app/assets/stylesheets/pages/_messages.scss
index e169eeb..8a616a6 100644
--- a/app/assets/stylesheets/pages/_messages.scss
+++ b/app/assets/stylesheets/pages/_messages.scss
@@ -10,13 +10,11 @@
   .chat {
     position: absolute;
     bottom: 100px;
-    width: 90%;
+    width: 75%;
   }
 }
 
-#messages-container {
-  overflow: scroll;
-  overflow-x: hidden;
+.information-container {
   height: 81%;
   padding: 38px;
   width: 90%;
@@ -24,6 +22,12 @@
   background-color: $light-gray;
 }
 
+#messages-container {
+  overflow: scroll;
+  overflow-x: hidden;
+  height: 80%;
+}
+
 select:not([multiple]) {
     -webkit-appearance: none;
     -moz-appearance: none;
@@ -119,6 +123,4 @@ select:not([multiple]) {
 .guyisbadass{
     width: 85%;
 }
-#chat-input {
 
-}
diff --git a/app/views/chat_rooms/show.html.erb b/app/views/chat_rooms/show.html.erb
index 9451eaa..a9cb03f 100644
--- a/app/views/chat_rooms/show.html.erb
+++ b/app/views/chat_rooms/show.html.erb
@@ -19,7 +19,7 @@
     </div>
     <div class="col-xs-12 col-sm-6 col-lg-4 no-padding">
       <div class="messages-container-container">
-        <div id="messages-container">
+        <div class="information-container">
           <div class="chat-information">
             <!-- <p id="caller-name">name</p> -->
             <select id="language-1" class="form-control no-radius">
@@ -31,22 +31,24 @@
           <div class="hover-notice">
             <span class="text-center"><small>Hover to see the original message</small></span>
           </div>
-        </div>
-        <div class="chat">
-          <div class="input-group">
-            <form class="form-inline" id="chat-form">
-              <!-- <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span> -->
-              <div class="form-group guyisbadass">
-                <input type="text" class="form-control input-transparent input-large" name="chat-input" id="chat-input" value="" placeholder="Type something...">
-              </div>
-              <div class="form-group">
-                <span class="input-group-btn">
-                  <button class="form-control send-button" id="send-btn" type="submit" remote: true>
-                    <i class="fas fa-paper-plane"></i>
-                  </button>
-                </span>
-              </div>
-            </form>
+          <div id="messages-container">
+          </div>
+          <div class="chat">
+            <div class="input-group">
+              <form class="form-inline" id="chat-form">
+                <!-- <span class="input-group-addon" style="width:0px; padding-left:0px; padding-right:0px; border:none;"></span> -->
+                <div class="form-group guyisbadass">
+                  <input type="text" class="form-control input-transparent input-large" name="chat-input" id="chat-input" value="" placeholder="Type something...">
+                </div>
+                <div class="form-group">
+                  <span class="input-group-btn">
+                    <button class="form-control send-button" id="send-btn" type="submit" remote: true>
+                      <i class="fas fa-paper-plane"></i>
+                    </button>
+                  </span>
+                </div>
+              </form>
+            </div>
           </div>
         </div>
       </div>