refactor: do fullscreen on body instead of container

Author: BreadGenie

frontend/package.json

@@ -16,7 +16,7 @@
 		"@timephy/rnnoise-wasm": "^1.0.0",
 		"emoji-mart": "^5.6.0",
 		"feather-icons": "^4.29.2",
-		"frappe-ui": "^0.1.269",
+		"frappe-ui": "^0.1.271",
 		"mediasoup-client": "^3.16.0",
 		"reka-ui": "^2.6.0",
 		"socket.io-client": "^4.7.2",

frontend/src/components/MeetingToolbar.vue

@@ -154,7 +154,6 @@
 					<Dropdown
 						:options="moreOptions"
 						placement="top"
-						:portal-to="dropdownPortalTarget"
 					>
 						<template #default>
 							<Button
@@ -299,9 +298,6 @@ const emit = defineEmits([
 
 const { windowWidth } = useResponsiveGrid();
 const isMobile = computed(() => windowWidth.value < 768);
-const dropdownPortalTarget = computed(() =>
-	props.isFullscreen ? "#meetingContainer" : "body",
-);
 
 const moreOptions = computed(() => [
 	{

frontend/src/pages/Meeting.vue

@@ -1,6 +1,5 @@
 <template>
 	<div
-		ref="meetingContainer"
 		class="h-[100dvh] bg-gray-900 flex flex-col"
 		data-meeting-component
 		id="meetingContainer"
@@ -363,7 +362,6 @@ const lobbyUsersForNotifications = computed(() => {
 // Refs
 const chatNotificationQueue = ref(null);
 const isReactionPickerOpen = ref(false);
-const meetingContainer = ref(null);
 const isFullscreen = ref(false);
 
 // Methods
@@ -590,7 +588,7 @@ const syncFullscreenState = () => {
 const toggleFullscreen = async () => {
 	try {
 		if (!document.fullscreenElement) {
-			const targetElement = meetingContainer.value;
+			const targetElement = document.body;
 
 			if (targetElement?.requestFullscreen) {
 				await targetElement.requestFullscreen();

frontend/yarn.lock

@@ -1428,10 +1428,10 @@ fraction.js@^4.1.2:
   resolved "https://registry.yarnpkg.com/fraction.js/-/fraction.js-4.1.2.tgz#13e420a92422b6cf244dff8690ed89401029fbe8"
   integrity sha512-o2RiJQ6DZaR/5+Si0qJUIy637QMRudSi9kU/FFzx9EZazrIdnBgpU+3sEWCxAVhH2RtxW2Oz+T4p2o8uOPVcgA==
 
-frappe-ui@^0.1.269:
-  version "0.1.269"
-  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.269.tgz#d694cd23fe6eadbd7bb898bb3f46e0414c27f829"
-  integrity sha512-1D4AW8cPoC7OIRqEzYnF169/r+v0EfVBvfCi/ovmk76FBPKY+qIVOzL+Vx/9TcYvJubc1tSU19F/jX177e3axA==
+frappe-ui@^0.1.271:
+  version "0.1.271"
+  resolved "https://registry.yarnpkg.com/frappe-ui/-/frappe-ui-0.1.271.tgz#206aa52f4faa541da0cfdb2b32ae845e622b08e1"
+  integrity sha512-H6FDKLynUCXxo3eIainJd6FjWrBtAZ3WZXVRM4tvLT3J7x7P5JjoNefB6YD8WZ+MQThKSwMC+/Kzg8vY2mc5XQ==
   dependencies:
     "@floating-ui/dom" "^1.7.4"
     "@floating-ui/vue" "^1.1.6"