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>
+      <div style={{ flex: 1 }}>
-        columns={columns}
+        <DataGrid<Movement>
-        rows={p.movements}
+          columns={columns}
-        autoPageSize
+          rows={p.movements}
-        checkboxSelection
+          autoPageSize
-        initialState={{
+          checkboxSelection
-          sorting: {
+          initialState={{
-            sortModel: [{ field: "time", sort: "desc" }],
+            sorting: {
-          },
+              sortModel: [{ field: "time", sort: "desc" }],
-          columns: {
-            columnVisibilityModel: {
-              checked: false,
             },
-          },
+            columns: {
-        }}
+              columnVisibilityModel: {
-        onRowSelectionModelChange={(newRowSelectionModel) => {
+                checked: false,
-          setRowSelectionModel(newRowSelectionModel);
+              },
-        }}
+            },
-        rowSelectionModel={rowSelectionModel}
+          }}
-        processRowUpdate={async (n) => {
+          onRowSelectionModelChange={(newRowSelectionModel) => {
-          try {
+            setRowSelectionModel(newRowSelectionModel);
-            return await MovementApi.Update(n);
+          }}
-          } catch (e) {
+          rowSelectionModel={rowSelectionModel}
-            console.error("Failed to update movement information!", e);
+          processRowUpdate={async (n) => {
-            alert(`Failed to update row! ${e}`);
+            try {
-            throw e;
+              return await MovementApi.Update(n);
-          } finally {
+            } catch (e) {
-            p.needReload(true);
+              console.error("Failed to update movement information!", e);
-          }
+              alert(`Failed to update row! ${e}`);
-        }}
+              throw e;
-      />
+            } finally {
+              p.needReload(true);
+            }
+          }}
+        />
+      </div>
     </>
   );
 }