feat: 样式完善。

src/components/app.scss

@@ -8,6 +8,6 @@
     @apply w-1/6 shadow;
   }
   main {
-    @apply flex-auto ml-px;
+    @apply flex-auto ml-px overflow-hidden;
   }
 }

src/components/branches-list/branches-list.scss

@@ -1,5 +1,5 @@
 .component {
-  @apply self-stretch;
+  @apply bg-red-200;
 }
 .item {
   @apply bg-gray-50 p-2 text-red-400 border-red-500 my-px

src/components/commit-logs/commit-log-list.scss

@@ -0,0 +1,15 @@
+.component {
+  @apply bg-white flex-auto;
+}
+.list {
+  @apply bg-gray-100 overflow-auto max-h-full;
+}
+.item {
+  @apply bg-white text-gray-700;
+  @apply py-2 px-4 my-px;
+  @apply hover:bg-gray-50;
+
+  time {
+    @apply text-sm text-gray-400;
+  }
+}

src/components/commit-logs/commit-log-list.scss.d.ts

@@ -0,0 +1,12 @@
+// This file is automatically generated from your CSS. Any edits will be overwritten.
+declare namespace CommitLogListScssNamespace {
+  export interface ICommitLogListScss {
+    component: string;
+    item: string;
+    list: string;
+  }
+}
+
+declare const CommitLogListScssModule: CommitLogListScssNamespace.ICommitLogListScss;
+
+export = CommitLogListScssModule;

src/components/commit-logs/commit-log-list.tsx

@@ -1,6 +1,7 @@
 import { LogList, Project, ListLogsArgs } from '../../generated/graphql';
 import { h } from 'preact';
 import { gql, useQuery } from '@apollo/client';
+import styles from './commit-log-list.scss';
 
 const LIST_LOGS = gql`
   query ListLogs($args: ListLogsArgs!) {
@@ -32,12 +33,20 @@ export const CommitLogList = ({ project, branch }: Props) => {
 
   const list = data?.listLogs?.all?.map(log => {
     return (
-      <li key={log.hash}>
+      <li className={styles.item} key={log.hash}>
         <h4>{log.message}</h4>
         <time dateTime={log.date}>{log.date}</time>
       </li>
     );
   });
 
-  return loading ? <span>Loading...</span> : <ol>{list}</ol>;
+  return (
+    <section className={styles.component}>
+      {loading ? (
+        <span>Loading...</span>
+      ) : (
+        <ol className={styles.list}>{list}</ol>
+      )}
+    </section>
+  );
 };

src/components/projects/project-details.scss

@@ -1,4 +1,5 @@
 .projectDetails {
+  @apply h-full flex flex-col;
   header {
     @apply bg-red-400 text-gray-50 p-2;
     @apply grid grid-cols-2 grid-rows-2;
@@ -20,5 +21,8 @@
 }
 
 .body {
-  @apply flex;
+  @apply flex items-stretch flex-auto overflow-hidden;
+  & > *:not(:first-child) {
+    @apply ml-px;
+  }
 }