Responsive message box, finally with CSS

titanembeds/static/css/embedstyle.css

@@ -5,6 +5,7 @@ color: white;
 
 main {
 min-height: calc(100vh - 80px);
+overflow-x: hidden;
 }
 
 footer {
@@ -112,6 +113,13 @@ color: #90a4ae;
 width: 100%;
 position: relative;
 margin: 10px;
+white-space: nowrap;
+overflow: hidden;
+}
+
+#messageboxouter {
+  width: 100%;
+  overflow: hidden;
 }
 
 .currentuserchip {

titanembeds/static/js/embed.js

@@ -23,12 +23,6 @@ function element_in_view(element, fullyInView) {
     }
 }
 
-function resize_messagebox() {
-    var namebox_width = $("#nameplate").outerWidth(true);
-    var screen_width = $(document).width();
-    $("#messageboxouter").width(screen_width - namebox_width - 40);
-}
-
 function query_guild() {
     var funct = $.ajax({
         dataType: "json",
@@ -79,7 +73,6 @@ function post(channel_id, content) {
 }
 
 $(function(){
-    resize_messagebox();
     $("#loginmodal").modal({
         dismissible: false, // Modal can be dismissed by clicking outside of the modal
         opacity: .5, // Opacity of modal background
@@ -346,7 +339,6 @@ function update_embed_userchip(authenticated, avatar, username, userid) {
         $("#currentuserimage").hide();
         $("#currentusername").text(username + "#" + userid);
     }
-    resize_messagebox();
 }
 
 $("#discordlogin_btn").click(function() {
@@ -408,10 +400,6 @@ $("#messagebox").keyup(function(event){
     }
 });
 
-$(window).resize(function() {
-    resize_messagebox();
-});
-
 $('#guild-btn').sideNav({
     menuWidth: 300, // Default is 300
     edge: 'left', // Choose the horizontal origin

titanembeds/templates/embed.html.j2

@@ -88,8 +88,8 @@
         </div>
       </div>
 
-    <footer class="footer">
-      <div class="footercontainer">
+    <footer id="footer" class="footer">
+      <div id="footercontainer" class="footercontainer">
         <div class="currentuserchip left" id="nameplate">
           <div class="left"><img id="currentuserimage" src="" class="circle left currentuserimage" style="display: none;"></div>
           <div id="currentusername" class="currentusername left">Titan#0001</div>