layout improvements

invokeai/frontend/web/src/features/ui/components/InvokeWorkarea.tsx

@@ -58,7 +58,7 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
       {...rest}
       gridTemplateAreas={{
         base: `'workarea-display' 'workarea-panel'`,
-        md: `'workarea-panel workarea-display'`,
+        xl: `'workarea-panel workarea-display'`,
       }}
       gridAutoRows={{ base: 'maxcontent auto' }}
       gridAutoColumns={{ md: 'max-content auto' }}
@@ -69,7 +69,12 @@ const InvokeWorkarea = (props: InvokeWorkareaProps) => {
     >
       <ParametersPanel>{parametersPanelContent}</ParametersPanel>
       <GridItem gridArea="workarea-display">
-        <Box pos="relative" w="100%" h="100%" onDrop={handleDrop}>
+        <Box
+          pos="relative"
+          w={{ base: '100vw', xl: 'full' }}
+          h="100%"
+          onDrop={handleDrop}
+        >
           {children}
         </Box>
       </GridItem>

invokeai/frontend/web/src/features/ui/components/ParametersPanel.tsx

@@ -94,7 +94,12 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
 
   const parametersPanelContent = () => {
     return (
-      <Flex flexDir="column" position="relative" h="full" w="full">
+      <Flex
+        flexDir="column"
+        position="relative"
+        h="full"
+        w={{ sm: 'full', lg: '100vw', xl: 'full' }}
+      >
         {!shouldPinParametersPanel && (
           <Flex
             paddingTop={1.5}
@@ -143,7 +148,7 @@ const ParametersPanel = ({ children }: ParametersPanelProps) => {
     return resizableParametersPanelContent();
   };
 
-  return resizableParametersPanelContent();
+  return renderParametersPanel();
 };
 
 export default memo(ParametersPanel);

invokeai/frontend/web/src/features/ui/components/tabs/ImageToImage/ImageToImageContent.tsx

@@ -32,7 +32,7 @@ const ImageToImageContent = () => {
       sx={{
         w: '100%',
         h: '100%',
-        gridTemplateColumns: '1fr 1fr',
+        gridTemplateColumns: { base: '1fr 4fr', xl: '1fr 1fr' },
         borderRadius: 'base',
         bg: 'base.850',
       }}