Bug 389 (#428)

* paste inside the viewport

* Buttons in top left panel aren't horizontally centered

src/components/Stack.tsx

@@ -6,24 +6,37 @@ type StackProps = {
   children: React.ReactNode;
   gap?: number;
   align?: "start" | "center" | "end" | "baseline";
+  justifyContent?: "center" | "space-around" | "space-between";
 };
 
-function RowStack({ children, gap, align }: StackProps) {
+function RowStack({ children, gap, align, justifyContent }: StackProps) {
   return (
     <div
       className="Stack Stack_horizontal"
-      style={{ "--gap": gap, alignItems: align } as React.CSSProperties}
+      style={
+        {
+          "--gap": gap,
+          alignItems: align,
+          justifyContent
+        } as React.CSSProperties
+      }
     >
       {children}
     </div>
   );
 }
 
-function ColStack({ children, gap, align }: StackProps) {
+function ColStack({ children, gap, align, justifyContent }: StackProps) {
   return (
     <div
       className="Stack Stack_vertical"
-      style={{ "--gap": gap, justifyItems: align } as React.CSSProperties}
+      style={
+        {
+          "--gap": gap,
+          justifyItems: align,
+          justifyContent
+        } as React.CSSProperties
+      }
     >
       {children}
     </div>

src/index.tsx

@@ -460,7 +460,7 @@ export class App extends React.Component<{}, AppState> {
   private renderCanvasActions() {
     return (
       <Stack.Col gap={4}>
-        <Stack.Row gap={1}>
+        <Stack.Row justifyContent={"space-between"}>
           {this.actionManager.renderAction(
             "loadScene",
             elements,