fix(ui): fix canvas not filling screen on first load

invokeai/frontend/web/src/app/components/App.tsx

@@ -22,6 +22,7 @@ import { APP_HEIGHT, APP_WIDTH } from 'theme/util/constants';
 import GlobalHotkeys from './GlobalHotkeys';
 import Toaster from './Toaster';
 import DeleteImageModal from 'features/gallery/components/DeleteImageModal';
+import { requestCanvasRescale } from 'features/canvas/store/thunks/requestCanvasScale';
 
 const DEFAULT_CONFIG = {};
 
@@ -66,10 +67,17 @@ const App = ({
       setIsReady(true);
     }
 
+    if (isApplicationReady) {
+      // TODO: This is a jank fix for canvas not filling the screen on first load
+      setTimeout(() => {
+        dispatch(requestCanvasRescale());
+      }, 200);
+    }
+
     return () => {
       setIsReady && setIsReady(false);
     };
-  }, [isApplicationReady, setIsReady]);
+  }, [dispatch, isApplicationReady, setIsReady]);
 
   return (
     <>

invokeai/frontend/web/src/features/canvas/store/canvasSlice.ts

@@ -30,7 +30,10 @@ import {
 } from './canvasTypes';
 import { ImageDTO } from 'services/api';
 import { sessionCanceled } from 'services/thunks/session';
-import { setShouldUseCanvasBetaLayout } from 'features/ui/store/uiSlice';
+import {
+  setActiveTab,
+  setShouldUseCanvasBetaLayout,
+} from 'features/ui/store/uiSlice';
 import { imageUrlsReceived } from 'services/thunks/image';
 
 export const initialLayerState: CanvasLayerState = {
@@ -857,6 +860,11 @@ export const canvasSlice = createSlice({
     builder.addCase(setShouldUseCanvasBetaLayout, (state, action) => {
       state.doesCanvasNeedScaling = true;
     });
+
+    builder.addCase(setActiveTab, (state, action) => {
+      state.doesCanvasNeedScaling = true;
+    });
+
     builder.addCase(imageUrlsReceived.fulfilled, (state, action) => {
       const { image_name, image_origin, image_url, thumbnail_url } =
         action.payload;

invokeai/frontend/web/src/features/ui/components/tabs/UnifiedCanvas/UnifiedCanvasContent.tsx

@@ -55,8 +55,6 @@ const UnifiedCanvasContent = () => {
   });
 
   useLayoutEffect(() => {
-    dispatch(requestCanvasRescale());
-
     const resizeCallback = () => {
       dispatch(requestCanvasRescale());
     };