Improve UI responsiveness and scaling

2 files changed, 14 insertions, 16 deletions

diff --git a/app/javascript/stylesheets/core.css b/app/javascript/stylesheets/core.css
index 9bfb19b..f002580 100644
--- a/app/javascript/stylesheets/core.css
+++ b/app/javascript/stylesheets/core.css
@@ -14,11 +14,10 @@
   @apply p-2 border-2 border-gray-800 rounded;
 }
 
-.header-title {
-  font-family: "Montaga", "Open Sans", sans-serif;
+.game-container-column {
+  max-height: calc(100vh - 9rem);
 }
 
-#look_output {
-  @apply min-w-full my-2 overflow-auto border-2 border-gray-800 rounded;
-  height: 75px;
+.header-title {
+  font-family: "Montaga", "Open Sans", sans-serif;
 }
diff --git a/app/views/layouts/application.html.erb b/app/views/layouts/application.html.erb
index 513fcdd..577debc 100644
--- a/app/views/layouts/application.html.erb
+++ b/app/views/layouts/application.html.erb
@@ -15,35 +15,34 @@
     <%= render "header" %>
 
     <div class="flex-1 bg-gray-900 rounded flex-grow">
-      <div class="mx-auto p-2 grid gap-2 grid-cols-12 px-2"
-           style="max-width: 1800px;">
+      <div class="mx-auto p-2 grid gap-2 grid-cols-12 px-2">
         <% if user_signed_in? %>
           <%= render "navbar" %>
         <% end %>
-        <div class="flex flex-col col-span-12 sm:col-span-8">
-          <div class="game-container-box mb-2 overflow-y-auto" style="height: 20rem;">
+        <div class="flex flex-col game-container-column col-span-12 sm:col-span-8 xl:col-span-9">
+          <div class="game-container-box mb-2 overflow-y-auto flex-grow">
             <%= render "flash_messages" %>
             <%= yield %>
           </div>
           <% if user_signed_in? %>
-            <div class="game-container-box overflow-auto text-sm p-2" style="height: 15rem;" id="result_output"
-                 data-turbolinks-permanent>
+            <div class="game-container-box overflow-auto text-sm p-2" id="result_output"
+                 style="min-height: 30%; max-height: 50%" data-turbolinks-permanent>
             </div>
           <% end %>
         </div>
         <% if user_signed_in? %>
-          <div class="flex flex-col col-span-12 sm:col-span-4">
-            <div class="game-container-box mb-2 overflow-y-auto" style="height: 15rem;" id="activity_controls"
-                 data-turbolinks-permanent>
+          <div class="flex flex-col game-container-column col-span-12 sm:col-span-4 xl:col-span-3">
+            <div class="game-container-box mb-2 overflow-y-auto" id="activity_controls"
+                 style="min-height: 50%" data-turbolinks-permanent>
               <%= render "timer" %>
             </div>
-            <div id="chat" class="game-container-box col-span-12 sm:col-span-4" style="height: 20rem;"
+            <div id="chat" class="game-container-box overflow-y-auto"
                  data-turbolinks-permanent>
               <%= render "chat" %>
             </div>
           </div>
         <% else %>
-          <div id="game_info" class="game-container-box col-span-12 sm:col-span-4"
+          <div id="game_info" class="game-container-box game-container-column col-span-12 sm:col-span-4 xl:col-span-3"
                data-turbolinks-permanent>
             <%= render "game_info" %>
           </div>