diff --git a/invokeai/frontend/web/public/assets/images/popoverImages/image-2.png b/invokeai/frontend/web/public/assets/images/popoverImages/image-2.png
new file mode 100644
index 0000000000..8db14cde13
Binary files /dev/null and b/invokeai/frontend/web/public/assets/images/popoverImages/image-2.png differ
diff --git a/invokeai/frontend/web/public/assets/images/popoverImages/image.png b/invokeai/frontend/web/public/assets/images/popoverImages/image.png
new file mode 100644
index 0000000000..3c882aec48
Binary files /dev/null and b/invokeai/frontend/web/public/assets/images/popoverImages/image.png differ
diff --git a/invokeai/frontend/web/public/locales/en.json b/invokeai/frontend/web/public/locales/en.json
index 0fe833db39..40e43eb73e 100644
--- a/invokeai/frontend/web/public/locales/en.json
+++ b/invokeai/frontend/web/public/locales/en.json
@@ -997,6 +997,7 @@
"problemSettingTitle": "Problem Setting Title",
"reloadNodeTemplates": "Reload Node Templates",
"removeLinearView": "Remove from Linear View",
+ "reorderLinearView": "Reorder Linear View",
"newWorkflow": "New Workflow",
"newWorkflowDesc": "Create a new workflow?",
"newWorkflowDesc2": "Your current workflow has unsaved changes.",
diff --git a/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx b/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx
index de82af796f..b04980f6cf 100644
--- a/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx
+++ b/invokeai/frontend/web/src/features/dnd/components/DndSortable.tsx
@@ -1,6 +1,6 @@
import type { DragEndEvent } from '@dnd-kit/core';
import { MouseSensor, TouchSensor, useSensor, useSensors } from '@dnd-kit/core';
-import { SortableContext } from '@dnd-kit/sortable';
+import { SortableContext, verticalListSortingStrategy } from '@dnd-kit/sortable';
import type { PropsWithChildren } from 'react';
import { memo } from 'react';
@@ -24,7 +24,9 @@ const DndSortable = (props: Props) => {
return (
- {props.children}
+
+ {props.children}
+
);
};
diff --git a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
index 106e307889..b6187aa532 100644
--- a/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
+++ b/invokeai/frontend/web/src/features/nodes/components/flow/nodes/Invocation/fields/LinearViewField.tsx
@@ -8,7 +8,7 @@ import { workflowExposedFieldRemoved } from 'features/nodes/store/workflowSlice'
import { HANDLE_TOOLTIP_OPEN_DELAY } from 'features/nodes/types/constants';
import { memo, useCallback } from 'react';
import { useTranslation } from 'react-i18next';
-import { PiInfoBold, PiTrashSimpleBold } from 'react-icons/pi';
+import { PiInfoBold, PiTrashSimpleBold, PiDotsSixVerticalBold } from 'react-icons/pi';
import EditableFieldTitle from './EditableFieldTitle';
import FieldTooltipContent from './FieldTooltipContent';
@@ -23,7 +23,7 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
const dispatch = useAppDispatch();
const { isMouseOverNode, handleMouseOut, handleMouseOver } = useMouseOverNode(nodeId);
const { t } = useTranslation();
-
+
const handleRemoveField = useCallback(() => {
dispatch(workflowExposedFieldRemoved({ nodeId, fieldName }));
}, [dispatch, fieldName, nodeId]);
@@ -40,39 +40,49 @@ const LinearViewField = ({ nodeId, fieldName }: Props) => {
onMouseEnter={handleMouseOver}
onMouseLeave={handleMouseOut}
layerStyle="second"
+ alignItems="center"
position="relative"
borderRadius="base"
w="full"
p={4}
- flexDir="column"
+ paddingLeft={0}
ref={setNodeRef}
style={style}
- {...attributes}
- {...listeners}
>
-
-
-
- }
- openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
- placement="top"
- >
-
-
-
-
- }
- />
+ }
+ {...listeners}
+ {...attributes}
+ mx={2}
+ height="full"
+ />
+
+
+
+
+ }
+ openDelay={HANDLE_TOOLTIP_OPEN_DELAY}
+ placement="top"
+ >
+
+
+
+
+ }
+ />
+
+
+
-
-
);
};