Order management UI

src/frontend/src/components/views/ParticipantSubmissionSummary.tsx

@@ -58,33 +58,11 @@ export default function ParticipantSubmissionSummary({
   ];
 
   return (
-    <Flex vertical gap={8}>
+    <Flex justify="space-between" align="stretch" wrap="wrap" gap={8}>
-      <Flex justify="space-between" align="center" wrap="wrap" gap={8}>
+      <Flex vertical gap={8} align="flex-start">
         <Text strong>
           <CheckCircleFilled style={{ color: token.colorSuccess }} /> Order submitted
         </Text>
-        <Flex vertical gap={8} align="flex-end">
-          <Flex gap={4} wrap="wrap" justify="flex-end">
-            {statuses.map(({ label, done, hint, pending }) => (
-              <Tooltip key={label} title={done ? hint : pending}>
-                <Tag
-                  bordered={false}
-                  color={done ? "success" : "default"}
-                  icon={done ? <CheckOutlined /> : <ClockCircleOutlined />}
-                  style={{ marginInlineEnd: 0 }}
-                >
-                  {label}
-                </Tag>
-              </Tooltip>
-            ))}
-          </Flex>
-          {onEdit && !isClosed && (
-            <Button type="primary" icon={<EditOutlined />} onClick={onEdit}>
-              Edit order
-            </Button>
-          )}
-        </Flex>
-      </Flex>
         <Tooltip title="Your submitted order">
           <Text code copyable>
             {savedOrderString}
@@ -111,5 +89,27 @@ export default function ParticipantSubmissionSummary({
           </Text>
         </Space>
       </Flex>
+      <Flex vertical justify="space-between" align="flex-end" gap={8}>
+        <Flex gap={4} wrap="wrap" justify="flex-end">
+          {statuses.map(({ label, done, hint, pending }) => (
+            <Tooltip key={label} title={done ? hint : pending}>
+              <Tag
+                bordered={false}
+                color={done ? "success" : "default"}
+                icon={done ? <CheckOutlined /> : <ClockCircleOutlined />}
+                style={{ marginInlineEnd: 0 }}
+              >
+                {label}
+              </Tag>
+            </Tooltip>
+          ))}
+        </Flex>
+        {onEdit && !isClosed && (
+          <Button type="primary" icon={<EditOutlined />} onClick={onEdit}>
+            Edit order
+          </Button>
+        )}
+      </Flex>
+    </Flex>
   );
 }