switch position of language options

static/app.js

@@ -14,6 +14,7 @@ const doneFileUploadBtn = document.getElementById('done-file-upload');
 const closeFileUploadBtn = document.getElementById('close-file-upload-btn');
 const fileListHtml = document.getElementById('file-list');
 
+const langSwitchContainer = document.getElementById('lang-switch-container');
 const enBtn = document.getElementById('btn-en');
 const frBtn = document.getElementById('btn-fr');
 
@@ -97,6 +98,16 @@ document.body.classList.add('no-scroll');
 
 let sessionFiles = [];
 
+function openModal() {
+  // Move the translation options at the top right corner of the screen
+  langSwitchContainer.classList.add('floating');
+}
+
+function closeModal() {
+  // Move the translation options in the toolbar
+  langSwitchContainer.classList.remove('floating');
+}
+
 function renderMessages() {
   chatWindow.innerHTML = '';
   const modelType = systemPresetSelect.value;
@@ -232,6 +243,8 @@ function openFileUploadOverlay(e) {
   e.preventDefault();
   // Let the stylesheet take over
   uploadFileOverlay.style.display = '';
+
+  openModal();
 }
 uploadFileBtn.addEventListener('click', openFileUploadOverlay);
 
@@ -472,9 +485,11 @@ async function deleteFile(file) {
 // Close the overlay
 closeFileUploadBtn.addEventListener('click', () => {
   uploadFileOverlay.style.display = 'none';
+  closeModal();
 });
 doneFileUploadBtn.addEventListener('click', () => {
   uploadFileOverlay.style.display = 'none';
+  closeModal();
 })
 
 // ----- Event wiring -----
@@ -558,6 +573,8 @@ profileBtn.addEventListener('click', () => {
   gender = document.getElementById('gender').value;
   roles = Array.from(document.querySelectorAll('input[name="role"]:checked')).map(input => input.value);
   participantId = participantInput.value.trim();
+
+  closeModal();
 });
 
 sendBtn.addEventListener('click', sendMessage);
@@ -591,15 +608,19 @@ function openCommentOverlay(e) {
   e.preventDefault();
   // Let the stylesheet take over
   commentOverlay.style.display = '';
+
+  openModal();
 }
 leaveCommentText.addEventListener('click', openCommentOverlay);
 
 // Cancelling or closing the comment overlay simply hides the comment popup
 closeCommentBtn.addEventListener('click', () => {
   commentOverlay.style.display = 'none';
+  closeModal();
 });
 cancelCommentBtn.addEventListener('click', () => {
   commentOverlay.style.display = 'none';
+  closeModal();
 });
 
 async function sendComment() {
@@ -723,4 +744,6 @@ renderFiles();
 // Open the details element by default on desktop only.
 if (window.innerWidth >= 460) {
   document.querySelector('details').setAttribute('open', '');
-}
+}
+
+openModal();

static/style.css

@@ -347,6 +347,14 @@ svg {
     margin: 0 0 10px 0;
     font-size: 1.4rem;
   }
+
+  /* Increase the size of the modals on mobile */
+  .comment-area {
+    width: 90%;
+  }
+  .upload-file-area {
+    width: 90%;
+  }
 }
 
 @media (min-width: 460px) {
@@ -431,18 +439,12 @@ svg {
   max-width: 400px;
 }
 
-.language-modal {
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  max-height: 300px;
-}
-
+.language-modal,
 .consent-box {
   display: flex;
   flex-direction: column;
   justify-content: space-between;
-  max-height: 300px;
+  max-height: 400px;
 }
 
 .profile {
@@ -635,10 +637,17 @@ input[type='range'].disabled {
   align-items: center;
   font-family: sans-serif;
   gap: 5px;
+
+  /* By default */
+  position: static;
+  margin-left: auto;
+}
+
+.lang-switch-container.floating {
+  /* At the top right corner, when a modal is opened */
   position: fixed;
   top: 20px;
-  right: 20px;
-
+  right: 20px; 
   z-index: 100; /* In front of the modals */
 }
 

templates/index.html

@@ -42,6 +42,12 @@
         </div>
 
         <button id="clearBtn" class="secondary-button" data-i18n="btn_clear"></button>
+
+        <div class="lang-switch-container" id="lang-switch-container">
+          <button id="btn-en" class="lang-btn">EN</button>
+          <span class="separator">|</span>
+          <button id="btn-fr" class="lang-btn">FR</button>
+        </div>
       </div>
 
       <!-- Consent/Welcome overlay -->
@@ -211,12 +217,6 @@
 
     <div id="snackbar-container"></div>
 
-    <div class="lang-switch-container">
-      <button id="btn-en" class="lang-btn">EN</button>
-      <span class="separator">|</span>
-      <button id="btn-fr" class="lang-btn">FR</button>
-    </div>
-
     <div class="font-size-container">
       <button id="increase-font-size-btn" class="font-size-btn">Aa+</button> 
       <button id="reset-font-size-btn" class="font-size-btn">Aa</button>