Fix the git-diff widget header details alignment

Fixes #5996

- fixes the `git-diff` widget header details but updating the css
specifically for the `git-diff` widget header. Originally the `path` and
`revision` details were not aligned properly and it has been resolved
so that they are displayed inline with their values.

Signed-off-by: Vincent Fugnitto <vincent.fugnitto@ericsson.com>

Author: vince-fugnitto

packages/git/src/browser/diff/git-diff-widget.tsx

@@ -153,6 +153,7 @@ export class GitDiffWidget extends GitNavigableListWidget<GitFileChangeNode> imp
 
     protected renderPathHeader(): React.ReactNode {
         return this.renderHeaderRow({
+            classNames: ['diff-header'],
             name: 'path',
             value: this.renderPath()
         });
@@ -171,6 +172,7 @@ export class GitDiffWidget extends GitNavigableListWidget<GitFileChangeNode> imp
 
     protected renderRevisionHeader(): React.ReactNode {
         return this.renderHeaderRow({
+            classNames: ['diff-header'],
             name: 'revision: ',
             value: this.renderRevision()
         });
@@ -193,7 +195,7 @@ export class GitDiffWidget extends GitNavigableListWidget<GitFileChangeNode> imp
     }
     protected doRenderToolbar(...children: React.ReactNode[]): React.ReactNode {
         return this.renderHeaderRow({
-            classNames: ['space-between'],
+            classNames: ['diff-nav', 'space-between'],
             name: 'Files changed',
             value: <div className='lrBtns'>{...children}</div>
         });

packages/git/src/browser/style/diff.css

@@ -44,13 +44,28 @@
     flex-direction: row;
 }
 
+.theia-git .header-row.diff-header,
+.theia-git .header-row.diff-nav {
+    margin-bottom: 10px;
+}
+
 .theia-git .header-value {
     margin: 9px 0px 5px 5px;
     overflow: hidden;
     text-overflow: ellipsis;
     white-space: nowrap;
 }
 
+.theia-git .diff-header .header-value {
+    align-self: center;
+    margin: 0px;
+}
+
+.theia-git .diff-header .theia-header {
+    align-self: center;
+    padding-right: 5px;
+}
+
 .theia-git .gitItem.diff-file {
     margin: 1px 0 !important;
     padding: 0 !important;