fix: align start in issue page

Author: JuneLin2001

src/Pages/IssuePage/IssuePage.jsx

@@ -1,6 +1,6 @@
 import { useContext } from "react";
 import { IssueContext } from "../../context/issueContext";
-import { Center } from "../../style/Center.styled";
+import { NoAlignCenter, RemoveMinHeight } from "../../style/Center.styled";
 import IssueSearch from "./IssuePageSearch";
 import IssuePageHeader from "./IssuePageHeader";
 import IssuePageList from "./IssuePageList";
@@ -39,49 +39,54 @@ const IssuePage = () => {
   };
 
   return (
-    <Center>
-      <IssueSearch
-        handleSearchClick={handleSearchClick}
-        labelNum={labels.length}
-        owner={owner}
-        repoName={repoName}
-      />
-      <IssueAllContainer>
-        {!isDefaultState() && (
-          <Button
-            leadingVisual={XCircleFillIcon}
-            variant="invisible"
-            onClick={handleClearAll}
-          >
-            Clear current search query, filters, and sorts
-          </Button>
-        )}
-        <IssuePageHeader
-          openCount={allIssues.openCount}
-          closedCount={allIssues.closedCount}
-          stateOpenOrClosed={stateOpenOrClosed}
-          setStateOpenOrClosed={setStateOpenOrClosed}
-          authors={authors}
-          labels={labels}
-          handleAuthorChange={(author) => handleFilterChange("author", author)}
-          handleLabelChange={(labels) => {
-            const formattedString =
-              labels.length > 0
-                ? labels.map((label) => `label:"${label}"`).join(" ")
-                : "all";
-            handleFilterChange("label", formattedString);
-          }}
-        />
-        <IssuePageList
-          issuesToDisplay={apiResult}
-          stateOpenOrClosed={stateOpenOrClosed}
-          repoName={repoName}
-          handleCheckboxChange={handleCheckboxChange}
+    <>
+      <RemoveMinHeight />
+      <NoAlignCenter>
+        <IssueSearch
+          handleSearchClick={handleSearchClick}
+          labelNum={labels.length}
           owner={owner}
+          repoName={repoName}
         />
-        <IssuePagePagination />
-      </IssueAllContainer>
-    </Center>
+        <IssueAllContainer>
+          {!isDefaultState() && (
+            <Button
+              leadingVisual={XCircleFillIcon}
+              variant="invisible"
+              onClick={handleClearAll}
+            >
+              Clear current search query, filters, and sorts
+            </Button>
+          )}
+          <IssuePageHeader
+            openCount={allIssues.openCount}
+            closedCount={allIssues.closedCount}
+            stateOpenOrClosed={stateOpenOrClosed}
+            setStateOpenOrClosed={setStateOpenOrClosed}
+            authors={authors}
+            labels={labels}
+            handleAuthorChange={(author) =>
+              handleFilterChange("author", author)
+            }
+            handleLabelChange={(labels) => {
+              const formattedString =
+                labels.length > 0
+                  ? labels.map((label) => `label:"${label}"`).join(" ")
+                  : "all";
+              handleFilterChange("label", formattedString);
+            }}
+          />
+          <IssuePageList
+            issuesToDisplay={apiResult}
+            stateOpenOrClosed={stateOpenOrClosed}
+            repoName={repoName}
+            handleCheckboxChange={handleCheckboxChange}
+            owner={owner}
+          />
+          <IssuePagePagination />
+        </IssueAllContainer>
+      </NoAlignCenter>
+    </>
   );
 };
 

src/components/Header.jsx

@@ -0,0 +1,45 @@
+import { Header, Avatar, Octicon } from "@primer/react";
+import { MarkGithubIcon } from "@primer/octicons-react";
+import { useParams } from "react-router-dom";
+
+const PageHeader = () => {
+  const { owner, repoName } = useParams();
+  return (
+    <Header>
+      <Header.Item>
+        <Header.Link
+          href="#"
+          sx={{
+            fontSize: 2,
+          }}
+        >
+          <Octicon
+            icon={MarkGithubIcon}
+            size={32}
+            sx={{
+              mr: 2,
+            }}
+          />
+          <span>
+            {owner}/{repoName}
+          </span>
+        </Header.Link>
+      </Header.Item>
+      <Header.Item full></Header.Item>
+      <Header.Item
+        sx={{
+          mr: 0,
+        }}
+      >
+        <Avatar
+          src="https://github.com/octocat.png"
+          size={20}
+          square
+          alt="@octocat"
+        />
+      </Header.Item>
+    </Header>
+  );
+};
+
+export default PageHeader;

src/style/Center.styled.jsx

@@ -1,8 +1,16 @@
-import styled from "styled-components";
+import styled, { createGlobalStyle } from "styled-components";
 
-export const Center = styled.div`
+export const NoAlignCenter = styled.div`
   display: flex;
   width: 100vw;
   flex-wrap: wrap;
   justify-content: center;
+  align-items: flex-start;
+  margin-top: 30px;
+`;
+
+export const RemoveMinHeight = createGlobalStyle`
+  body {
+    min-height: auto !important; /* 覆蓋全局樣式 */
+  }
 `;