changed header styles in mobile view

Author: koray-eren

sogs/templates/base.html

@@ -36,13 +36,16 @@
     {% endblock %}
 
     <!-- header / navbar -->
-    <div class="px-2 sm:px-5 flex-none flex justify-between items-center w-full h-32 max-h-32 
+    <div class="px-2 sm:px-5 flex-none flex justify-around sm:justify-between items-center w-full h-32 max-h-32 
     bg-white dark:bg-otherGray border-b-2 border-black dark:border-lightGray transition duration-500">
       <div class="text-black text-center">
         <button>
           <a href="/">
             <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="font-bold text-sessionGreen dark:text-sessionGreen text-lg xs:text-xl sm:text-2xl">Session Open Group Server</p>
+            <div class="flex flex-col sm:flex-row pl-3 sm:pl-0">
+              <p class=" font-bold text-sessionGreen dark:text-sessionGreen text-lg xs:text-xl sm:text-2xl">Session Open&nbsp</p>
+              <p class=" font-bold text-sessionGreen dark:text-sessionGreen text-lg xs:text-xl sm:text-2xl">Group Server</p>
+            </div>
           </a>
         </button>
       </div>

sogs/templates/view_room.html

@@ -18,7 +18,7 @@
       <pre class="text-white break-all whitespace-normal m-2">{{room.url}}</pre>
       <button onclick="handleCloseModalClick()" class="text-white bold text-center rounded px-1 m-2 font-sans"> X</button>
     </div>
-    <img class="aspect-square p-2" src="invite.png" />
+    <img class="aspect-square " src="invite.png" />
   </div>
 </div>