Fix style

src/components/Availability/AvailabilityReservations.tsx

@@ -6,10 +6,11 @@ import {
 } from "@codex-storage/marketplace-ui-components";
 import { classnames } from "../../utils/classnames";
 import "./AvailabilityReservations.css";
-import { useQuery } from "@tanstack/react-query";
+import { useQuery, useQueryClient } from "@tanstack/react-query";
 import { CodexSdk } from "../../sdk/codex";
 import { Promises } from "../../utils/promises";
 import { CodexAvailability } from "@codex-storage/sdk-js";
+import { useEffect } from "react";
 
 type Props = {
   availability: CodexAvailability | null;
@@ -22,6 +23,8 @@ export function AvailabilityReservations({
   onClose,
   open,
 }: Props) {
+  const queryClient = useQueryClient();
+
   const { data } = useQuery({
     queryFn: () => {
       if (availability) {
@@ -35,6 +38,10 @@ export function AvailabilityReservations({
     queryKey: ["reservations"],
   });
 
+  useEffect(() => {
+    queryClient.invalidateQueries({ queryKey: ["reservations"] });
+  }, [availability]);
+
   // TODO manage error
 
   if (!availability) {

src/routes/dashboard/availabilities.css

@@ -14,6 +14,19 @@
   display: block;
 }
 
+.availabilities-content {
+  display: flex;
+  flex-direction: column;
+}
+
+.availabilities-table {
+  order: 2;
+}
+
+.availabilities-space {
+  order: 1;
+}
+
 .availabilities-space .nodeSpaceAllocation-legendRow,
 .availabilities-space .nodeSpaceAllocation-barItem {
   transition: opacity 0.35s;

src/routes/dashboard/availabilities.tsx

@@ -54,11 +54,13 @@ export const Route = createFileRoute("/dashboard/availabilities")({
               <Spinner width="3rem" />
             </div>
           ) : (
+            <div className="availabilities-table">
               <AvailabilitiesTable
                 // onEdit={onOpen}
                 availabilities={availabilities}
                 onReservationsShow={onReservationsShow}
               />
+            </div>
           )}
 
           <div className="availabilities-space">