feat: add sticky header and footer layout for mobile viewports under 600px

Add responsive CSS media query for max-width 600px making header position sticky with block display for logo, and make chat-input footer sticky. Change chat-input container from div to footer element in web.html template for semantic HTML structure.
2025-04-01 18:08:01 +00:00
parent 0c8c77ae1d
commit f74fcc3ab3
2 changed files with 14 additions and 2 deletions
@@ -12,10 +12,10 @@
        {% endfor %}
    </div>
    <chat-window style="display:none" class="chat-area"></chat-window>
-    <div class="chat-input">
+    <footer class="chat-input">
        <textarea placeholder="Type a message..." rows="2"></textarea>
        <upload-button channel="{{ channel.uid.value }}"></upload-button>
-    </div>
+    </footer>
 </section>

 <script type="module">