fixed mobile viewport issue

koray-eren · Jeff · commit 09a6f100b6a1 · 2022-04-14T13:25:57.000-04:00
diff --git a/sogs/templates/base.html b/sogs/templates/base.html
@@ -30,19 +30,19 @@
     </script>
 
   </head>
-  <body class="dark:bg-otherGray transition duration-500 max-h-screen flex flex-col">
+  <body class="dark:bg-otherGray transition duration-500 h-full flex flex-col overflow-hidden">
     
     {% block modal %}
     {% endblock %}
     
     <!-- header / navbar -->
     <div class="px-2 sm:px-5 flex-none flex justify-between items-center w-full h-32 max-h-32 
     bg-sessionGreen dark:bg-otherGray border-b-2 border-black dark:border-lightGray transition duration-500">
-      <div class="text-black dark:text-white text-center">
+      <div class="text-black text-center">
         <button>
           <a href="/">
-            <h1 class="text-3xl xs:text-4xl sm:text-5xl underline decoration-black dark:decoration-sessionGreen decoration-2">{% block heading %}{% endblock %}</h1>
-            <p class="text-lg xs:text-xl sm:text-2xl">Session Open Group Server</p>
+            <h1 class="dark:text-white text-3xl xs:text-4xl sm:text-5xl decoration-black dark:decoration-white decoration-2">{% block heading %}{% endblock %}</h1>
+            <p class="dark:text-sessionGreen text-lg xs:text-xl sm:text-2xl">Session Open Group Server</p>
           </a>
         </button>
       </div>
diff --git a/sogs/templates/index.html b/sogs/templates/index.html
@@ -6,7 +6,7 @@
 
 {% block body %}
 
-<section class="overflow-y-auto text-black dark:text-white ">
+<section class="overflow-y-auto text-black dark:text-white shrink ">
   <div class="m-5 grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 2xl:grid-cols-6 justify-items-center gap-y-2 gap-x-2">
     {% for room in rooms %}
     {% for i in range(8) %}
diff --git a/sogs/templates/view_room.html b/sogs/templates/view_room.html
@@ -43,9 +43,9 @@
 {% block body %}
   <!-- <button class="bg-black text-white dark:bg-sessionGreen dark:text-black rounded px-1 py-1 my-2" > <a href="/">< Back</a></button> -->
 
-<section class="overflow-y-auto text-black dark:text-white flex flex-col-reverse ">
+<section class="overflow-y-auto text-black dark:text-white flex flex-col-reverse items-center ">
   {% if show_recent %}
-    <div id="messages-container" class="m-5  flex flex-col-reverse " >
+    <div id="messages-container" class=" m-2 flex flex-col-reverse w-[93vw] " >
       <ul id="messages" class="m-2">
         <li>loading...</li>
       </ul>
