fix(view): fix the header elements layout (#906) (#948)

Author: Jxxunnn

packages/view/src/App.scss

@@ -14,6 +14,17 @@ body {
   padding: 0 0.75rem 0 1.25rem;
 }
 
+.header-container > :is(:first-child, :last-child) {
+  flex: 1;
+}
+
+.header-container > :last-child {
+  display: flex;
+  justify-content: flex-end;
+  align-items: center;
+  gap: 0.5rem;
+}
+
 .top-container {
   height: 13.75rem;
 }

packages/view/src/App.tsx

@@ -4,7 +4,14 @@ import { useEffect, useRef, useState } from "react";
 import BounceLoader from "react-spinners/BounceLoader";
 
 import MonoLogo from "assets/monoLogo.svg";
-import { BranchSelector, Statistics, TemporalFilter, ThemeSelector, VerticalClusterList, FolderActivityFlow } from "components";
+import {
+  BranchSelector,
+  Statistics,
+  TemporalFilter,
+  ThemeSelector,
+  VerticalClusterList,
+  FolderActivityFlow,
+} from "components";
 import "./App.scss";
 import type IDEPort from "ide/IDEPort";
 import { useAnalayzedData } from "hooks";
@@ -69,14 +76,16 @@ const App = () => {
       <div className="header-container">
         <ThemeSelector />
         <BranchSelector />
-        <RefreshButton />
-        <button
-          type="button"
-          className="folder-activity-flow-button"
-          onClick={handleOpenFolderActivityFlowModal}
-        >
-          Folder Activity Flow
-        </button>
+        <div>
+          <RefreshButton />
+          <button
+            type="button"
+            className="folder-activity-flow-button"
+            onClick={handleOpenFolderActivityFlowModal}
+          >
+            Folder Activity Flow
+          </button>
+        </div>
       </div>
       <div className="top-container">
         <TemporalFilter />
@@ -103,7 +112,7 @@ const App = () => {
           className="folder-activity-flow-modal"
           onClick={handleCloseFolderActivityFlowModal}
           onKeyDown={(e) => {
-            if (e.key === 'Escape') {
+            if (e.key === "Escape") {
               handleCloseFolderActivityFlowModal();
             }
           }}