Fix account route alignment

moneymgr_web/src/routes/AccountRoute.tsx

@@ -73,7 +73,7 @@ export function AccountRoute(): React.ReactElement {
       }
     >
       <div style={{ display: "flex", flexDirection: "column", flex: 1 }}>
-        <div style={{ flex: 1 }}>
+        <div style={{ flex: 1, display: "flex", flexDirection: "column" }}>
           <AsyncWidget
             loadKey={`${account.id}-${loadKey.current}`}
             load={load}
@@ -273,7 +273,7 @@ function MovementsTable(p: {
 
   return (
     <>
-      <div>
+      <div style={{ display: "flex", justifyContent: "end" }}>
         <Tooltip title="Delete all the selected entries">
           <IconButton
             disabled={
@@ -286,37 +286,39 @@ function MovementsTable(p: {
           </IconButton>
         </Tooltip>
       </div>
-      <DataGrid<Movement>
-        columns={columns}
-        rows={p.movements}
-        autoPageSize
-        checkboxSelection
-        initialState={{
-          sorting: {
-            sortModel: [{ field: "time", sort: "desc" }],
-          },
-          columns: {
-            columnVisibilityModel: {
-              checked: false,
+      <div style={{ flex: 1 }}>
+        <DataGrid<Movement>
+          columns={columns}
+          rows={p.movements}
+          autoPageSize
+          checkboxSelection
+          initialState={{
+            sorting: {
+              sortModel: [{ field: "time", sort: "desc" }],
             },
-          },
-        }}
-        onRowSelectionModelChange={(newRowSelectionModel) => {
-          setRowSelectionModel(newRowSelectionModel);
-        }}
-        rowSelectionModel={rowSelectionModel}
-        processRowUpdate={async (n) => {
-          try {
-            return await MovementApi.Update(n);
-          } catch (e) {
-            console.error("Failed to update movement information!", e);
-            alert(`Failed to update row! ${e}`);
-            throw e;
-          } finally {
-            p.needReload(true);
-          }
-        }}
-      />
+            columns: {
+              columnVisibilityModel: {
+                checked: false,
+              },
+            },
+          }}
+          onRowSelectionModelChange={(newRowSelectionModel) => {
+            setRowSelectionModel(newRowSelectionModel);
+          }}
+          rowSelectionModel={rowSelectionModel}
+          processRowUpdate={async (n) => {
+            try {
+              return await MovementApi.Update(n);
+            } catch (e) {
+              console.error("Failed to update movement information!", e);
+              alert(`Failed to update row! ${e}`);
+              throw e;
+            } finally {
+              p.needReload(true);
+            }
+          }}
+        />
+      </div>
     </>
   );
 }