fix(ui): next/prev image buttons layout

invokeai/frontend/web/src/features/gallery/components/ImageViewer/CurrentImagePreview.tsx

@@ -88,8 +88,9 @@ const CurrentImagePreview = () => {
             exit={exit}
             position="absolute"
             top={0}
-            width="full"
-            height="full"
+            right={0}
+            bottom={0}
+            left={0}
             pointerEvents="none"
           >
             <NextPrevImageButtons />

invokeai/frontend/web/src/features/gallery/components/NextPrevImageButtons.tsx

@@ -7,12 +7,7 @@ import { memo, useCallback, useMemo } from 'react';
 import { useTranslation } from 'react-i18next';
 import { PiCaretLeftBold, PiCaretRightBold } from 'react-icons/pi';
 
-const nextPrevButtonStyles: ChakraProps['sx'] = {
-  color: 'base.100',
-  pointerEvents: 'auto',
-};
-
-const NextPrevImageButtons = () => {
+const NextPrevImageButtons = ({ inset = 8 }: { inset?: ChakraProps['insetInlineStart' | 'insetInlineEnd'] }) => {
   const { t } = useTranslation();
   const { prevImage, nextImage, isOnFirstImageOfView, isOnLastImageOfView } = useGalleryNavigation();
 
@@ -61,32 +56,36 @@ const NextPrevImageButtons = () => {
 
   return (
     <Box pos="relative" h="full" w="full">
-      <Box pos="absolute" top="50%" transform="translate(0, -50%)" insetInlineStart={1}>
-        {shouldShowLeftArrow && (
-          <IconButton
-            aria-label={t('accessibility.previousImage')}
-            icon={<PiCaretLeftBold size={64} />}
-            variant="unstyled"
-            onClick={onClickLeftArrow}
-            boxSize={16}
-            sx={nextPrevButtonStyles}
-            isDisabled={isFetching}
-          />
-        )}
-      </Box>
-      <Box pos="absolute" top="50%" transform="translate(0, -50%)" insetInlineEnd={6}>
-        {shouldShowRightArrow && (
-          <IconButton
-            aria-label={t('accessibility.nextImage')}
-            icon={<PiCaretRightBold size={64} />}
-            variant="unstyled"
-            onClick={onClickRightArrow}
-            boxSize={16}
-            sx={nextPrevButtonStyles}
-            isDisabled={isFetching}
-          />
-        )}
-      </Box>
+      {shouldShowLeftArrow && (
+        <IconButton
+          position="absolute"
+          top="50%"
+          transform="translate(0, -50%)"
+          aria-label={t('accessibility.previousImage')}
+          icon={<PiCaretLeftBold size={64} />}
+          variant="unstyled"
+          onClick={onClickLeftArrow}
+          isDisabled={isFetching}
+          color="base.100"
+          pointerEvents="auto"
+          insetInlineStart={inset}
+        />
+      )}
+      {shouldShowRightArrow && (
+        <IconButton
+          position="absolute"
+          top="50%"
+          transform="translate(0, -50%)"
+          aria-label={t('accessibility.nextImage')}
+          icon={<PiCaretRightBold size={64} />}
+          variant="unstyled"
+          onClick={onClickRightArrow}
+          isDisabled={isFetching}
+          color="base.100"
+          pointerEvents="auto"
+          insetInlineEnd={inset}
+        />
+      )}
     </Box>
   );
 };

invokeai/frontend/web/src/features/nodes/components/flow/nodes/CurrentImage/CurrentImageNode.tsx

@@ -73,7 +73,7 @@ const Wrapper = (props: PropsWithChildren<{ nodeProps: NodeProps }>) => {
           {props.children}
           {isHovering && (
             <motion.div key="nextPrevButtons" initial={initial} animate={animate} exit={exit} style={styles}>
-              <NextPrevImageButtons />
+              <NextPrevImageButtons inset={2} />
             </motion.div>
           )}
         </Flex>

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

@@ -12,7 +12,7 @@ const FloatingGalleryButton = (props: Props) => {
   const { t } = useTranslation();
 
   return (
-    <Flex pos="absolute" transform="translate(0, -50%)" minW={8} top="50%" insetInlineEnd={2} zIndex={11}>
+    <Flex pos="absolute" transform="translate(0, -50%)" minW={8} top="50%" insetInlineEnd={2}>
       <Tooltip label={t('accessibility.showGalleryPanel')} placement="start">
         <IconButton
           aria-label={t('accessibility.showGalleryPanel')}

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

@@ -45,15 +45,7 @@ const FloatingSidePanelButtons = (props: Props) => {
   }, [queue.isDisabled, queueStatus?.queue.in_progress, shift]);
 
   return (
-    <Flex
-      pos="absolute"
-      transform="translate(0, -50%)"
-      top="50%"
-      insetInlineStart={2}
-      direction="column"
-      gap={2}
-      zIndex={11}
-    >
+    <Flex pos="absolute" transform="translate(0, -50%)" top="50%" insetInlineStart={2} direction="column" gap={2}>
       {tab === 'canvas' && !imageViewer.isOpen && (
         <CanvasManagerProviderGate>
           <ToolChooser />