fix: request fullscreen for the whole page

- header should be hidden, and app-content stretched to the whole viewport, so apply custom styles

Signed-off-by: Maksim Sukharev <[email protected]>

src/App.vue

@@ -783,6 +783,20 @@ body .modal-wrapper * {
 	overflow-wrap: break-word;
 	margin-block: 0 12px;
 }
+
+// Styles for the app content at fullscreen mode
+body.talk-in-fullscreen {
+	#header {
+		// TODO: is there any drawback of hiding it from the page for a11y?
+		display: none !important;
+	}
+	#content-vue {
+		margin: 0;
+		height: 100%;
+		width: 100%;
+		border-radius: 0;
+	}
+}
 </style>
 
 <style lang="scss" scoped>

src/composables/useDocumentFullscreen.ts

@@ -16,6 +16,12 @@ function useDocumentFullscreenComposable() {
 
 	const changeIsFullscreen = () => {
 		isFullscreen.value = document.fullscreenElement !== null
+
+		if (isFullscreen.value) {
+			document.body.classList.add('talk-in-fullscreen')
+		} else {
+			document.body.classList.remove('talk-in-fullscreen')
+		}
 	}
 
 	document.addEventListener('fullscreenchange', changeIsFullscreen)
@@ -33,15 +39,10 @@ function useDocumentFullscreenComposable() {
  * Enable a fullscreen with Fullscreen API
  */
 export async function enableFullscreen() {
-	const element = document.getElementById('content-vue')
-	if (!element) {
-		return
-	}
-
-	if (element.requestFullscreen) {
-		await element.requestFullscreen()
-	} else if (element.webkitRequestFullscreen) {
-		await element.webkitRequestFullscreen()
+	if (document.body.requestFullscreen) {
+		await document.body.requestFullscreen()
+	} else if (document.body.webkitRequestFullscreen) {
+		await document.body.webkitRequestFullscreen()
 	}
 }