fix header

frontend/src/App.svelte

@@ -2,11 +2,27 @@
   import ChatApp from './lib/ChatApp.svelte';
     import BackButton from "./lib/BackButton.svelte";
   import "./assets/app.css"
+    import { onMount } from 'svelte';
+
+  let isKeyboardActive = false;
+
+  function handleResize() {
+    const isVirtualKeyboardActive = window.innerHeight < window.outerHeight;
+    isKeyboardActive = isVirtualKeyboardActive;
+  }
+
+  onMount(() => {
+    window.addEventListener('resize', handleResize);
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  });
+
 </script>
 
 <main>
   <div>
-    <header id="header"><BackButton /><span id="ramiza-ime">Ramiza</span><span id="threedotsmenu"> ⋮ </span></header>
+    <header id="header"  class={isKeyboardActive ? 'sticky-header' : ''}><BackButton /><span id="ramiza-ime">Ramiza</span><span id="threedotsmenu"> ⋮ </span></header>
 
   <div class="card">
     <ChatApp />
@@ -15,5 +31,13 @@
 </main>
 
 <style>
+  .sticky-header {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    z-index: 9999;
+    background-color: #fff;
+  }
 
 </style>

frontend/src/assets/app.css

@@ -15,6 +15,7 @@
 }
 
 #chat-container {
+    padding-top: 2.52rem;
   overflow-y: auto;
   display: flex;
   flex-direction: column;
@@ -22,6 +23,7 @@
 }
 
 #header {
+    background: white;
     /* make header fixed to top when the content bellow starts scrolling */
   position: fixed;
     top: 0;