diff --git a/packages/frontend/src/components/RemoteDesktopModal.vue b/packages/frontend/src/components/RemoteDesktopModal.vue index 5e90904..0ec5d44 100644 --- a/packages/frontend/src/components/RemoteDesktopModal.vue +++ b/packages/frontend/src/components/RemoteDesktopModal.vue @@ -29,6 +29,9 @@ const mouse = ref(null); const desiredModalWidth = ref(1064); // User sets the desired TOTAL modal width (1024 + 40 padding) const desiredModalHeight = ref(858); // User sets the desired TOTAL modal height (768 + chrome) +const MIN_MODAL_WIDTH = 1024; +const MIN_MODAL_HEIGHT = 768; + const RDP_BACKEND_API_BASE = 'http://localhost:9090'; const RDP_BACKEND_WEBSOCKET_URL = 'ws://localhost:8081'; const LOCAL_STORAGE_MODAL_WIDTH_KEY = 'rdpModalWidth'; // Reverted key name @@ -240,19 +243,39 @@ const loadDesiredModalSize = () => { const savedWidth = localStorage.getItem(LOCAL_STORAGE_MODAL_WIDTH_KEY); const savedHeight = localStorage.getItem(LOCAL_STORAGE_MODAL_HEIGHT_KEY); if (savedWidth) { - desiredModalWidth.value = parseInt(savedWidth, 10) || desiredModalWidth.value; + // Validate loaded width against minimum + desiredModalWidth.value = Math.max(MIN_MODAL_WIDTH, parseInt(savedWidth, 10) || MIN_MODAL_WIDTH); + } else { + // Ensure default is also valid if nothing is saved + desiredModalWidth.value = Math.max(MIN_MODAL_WIDTH, desiredModalWidth.value); } if (savedHeight) { - desiredModalHeight.value = parseInt(savedHeight, 10) || desiredModalHeight.value; + // Validate loaded height against minimum + desiredModalHeight.value = Math.max(MIN_MODAL_HEIGHT, parseInt(savedHeight, 10) || MIN_MODAL_HEIGHT); + } else { + // Ensure default is also valid if nothing is saved + desiredModalHeight.value = Math.max(MIN_MODAL_HEIGHT, desiredModalHeight.value); } }; // Save desired MODAL size to localStorage when changed watch(desiredModalWidth, (newWidth) => { - localStorage.setItem(LOCAL_STORAGE_MODAL_WIDTH_KEY, String(newWidth)); + // Validate new width before saving and potentially update the ref + const validatedWidth = Math.max(MIN_MODAL_WIDTH, Number(newWidth) || MIN_MODAL_WIDTH); + if (validatedWidth !== newWidth) { + // If validation changed the value, update the v-model binding + desiredModalWidth.value = validatedWidth; + } + localStorage.setItem(LOCAL_STORAGE_MODAL_WIDTH_KEY, String(validatedWidth)); }); watch(desiredModalHeight, (newHeight) => { - localStorage.setItem(LOCAL_STORAGE_MODAL_HEIGHT_KEY, String(newHeight)); + // Validate new height before saving and potentially update the ref + const validatedHeight = Math.max(MIN_MODAL_HEIGHT, Number(newHeight) || MIN_MODAL_HEIGHT); + if (validatedHeight !== newHeight) { + // If validation changed the value, update the v-model binding + desiredModalHeight.value = validatedHeight; + } + localStorage.setItem(LOCAL_STORAGE_MODAL_HEIGHT_KEY, String(validatedHeight)); });