From 57252386234e802b3a3707d32a8b74130de4a56e Mon Sep 17 00:00:00 2001
From: David Gay <david@davidgay.org>
Date: Sat, 5 Jun 2021 19:31:44 -0400
Subject: Improve UI responsiveness and scaling

---
 app/views/layouts/application.html.erb | 21 ++++++++++-----------
 1 file changed, 10 insertions(+), 11 deletions(-)

(limited to 'app/views')

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>
-- 
cgit v1.2.3