[Query Copilot] Pin panel footer to the bottom, remove gap between panel and console (#1511)

* Move footer when save button is enabled to the bottom, remove gap between notification console and right panel

* Change the way panel height is calculated

* Remove unnecessary operator

* Change condition

* Fix snapshot

* Update panel height after animation ends and use different css for showing save button to the bottom of the page

* Fix ts compile

src/hooks/useNotificationConsole.ts

@@ -5,21 +5,26 @@ export interface NotificationConsoleState {
   isExpanded: boolean;
   inProgressConsoleDataIdToBeDeleted: string;
   consoleData: ConsoleData | undefined;
+  consoleAnimationFinished: boolean;
   expandConsole: () => void;
   // TODO Remove this method. Add a `closeConsole` method instead
   setIsExpanded: (isExpanded: boolean) => void;
   // TODO These two methods badly need a refactor. Not very react friendly.
   setNotificationConsoleData: (consoleData: ConsoleData) => void;
   setInProgressConsoleDataIdToBeDeleted: (id: string) => void;
+  setConsoleAnimationFinished: (consoleAnimationFinished: boolean) => void;
 }
 
 export const useNotificationConsole: UseStore<NotificationConsoleState> = create((set) => ({
   isExpanded: false,
   consoleData: undefined,
   inProgressConsoleDataIdToBeDeleted: "",
+  consoleAnimationFinished: false,
   expandConsole: () => set((state) => ({ ...state, isExpanded: true })),
   setIsExpanded: (isExpanded) => set((state) => ({ ...state, isExpanded })),
   setNotificationConsoleData: (consoleData: ConsoleData) => set((state) => ({ ...state, consoleData })),
   setInProgressConsoleDataIdToBeDeleted: (id: string) =>
     set((state) => ({ ...state, inProgressConsoleDataIdToBeDeleted: id })),
+  setConsoleAnimationFinished: (consoleAnimationFinished: boolean) =>
+    set({ consoleAnimationFinished: consoleAnimationFinished }),
 }));