full commit hash on diff section, width fix

Author: liuliu-dev

src/components/CommitDetails/index.module.css

@@ -34,7 +34,7 @@
 .tooltip {
   opacity: 1;
   z-index: 10;
-  max-width: 90%;
+  max-width: 60%;
   visibility: visible;
 }
 
@@ -44,7 +44,7 @@
   border: 1px solid #e1e4e8;
   background-color: white;
   position: absolute;
-  width: 320px;
+  width: 360px;
   right: 1rem;
   top: 1rem;
   z-index: 10;

src/components/DiffSection/index.module.css

@@ -5,7 +5,8 @@
 .hashes {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+  flex-direction: column;
+  align-items: start;
   margin-bottom: 1rem;
 }
 

src/components/DiffSection/index.tsx

@@ -30,24 +30,26 @@ export default function DiffSection({ commit, getDiff }: Props) {
   }, [commit, getDiff]);
 
   const { added, modified, deleted } = getChanged(diff?.files || []);
-  const parents = commit.parents.map(parent => parent.slice(0, 7)).join(", ");
+  const parents = commit.parents.join(", ");
 
   return (
     <div>
       <div className={css.top}>
         <div className={css.hashes}>
           <div>
-            commit:
-            <span className={css.bold}>{commit.hash.slice(0, 7)}</span>
+            <div>commit:</div>
+            <div className={css.bold}>{commit.hash}</div>
           </div>
           <div>
-            parent:
-            <span className={css.bold}>{parents}</span>
+            <div>parent:</div>
+            {commit.parents.map(p => (
+              <div className={css.bold}>{p}</div>
+            ))}
           </div>
         </div>
         <div className={css.message}>{commit.message}</div>
       </div>
-      {diff && (
+      {!!diff?.files.length && (
         <>
           <div className={css.summary}>
             {!!modified && (