fixed commit area styling

the TextareaAutosize component seems to always have a height of

rows*(1em + floor(1em/4px))

which can't be represented exactly in css because there is no floor

Author: telamonian

src/components/CommitBox.tsx

@@ -78,13 +78,14 @@ export class CommitBox extends React.Component<
         <TextareaAutosize
           className={classes(textInputStyle, stagedCommitMessageStyle)}
           disabled={!this.props.hasFiles}
+          minRows={3}
+          onChange={this.handleChange}
           placeholder={
             this.props.hasFiles
               ? 'Input message to commit staged changes'
               : 'Stage your changes before commit'
           }
           value={this.state.value}
-          onChange={this.handleChange}
         />
         <input
           className={this.commitButtonStyle(this.props.hasFiles)}

src/style/BranchHeaderStyle.ts

@@ -85,17 +85,20 @@ export const branchListItemStyle = style({
   color: 'var(--jp-ui-font-color1)'
 });
 
+// need to override font-size from user agent stylesheet
 export const stagedCommitButtonStyle = style({
   backgroundColor: 'var(--jp-brand-color1)',
   backgroundImage: 'var(--jp-checkmark)',
   backgroundSize: '100%',
   backgroundRepeat: 'no-repeat',
   backgroundPosition: 'center',
-  color: 'white',
-  height: '42px',
-  width: '40px',
   border: '0',
-  flex: '1 1 auto'
+  color: 'white',
+  flex: '1 1 auto',
+  fontSize: 'var(--jp-ui-font-size1)',
+  height: 'calc(3em + 9px)',
+  padding: 'calc(var(--jp-code-padding) + 1px) 7px',
+  width: '40px'
 });
 
 export const stagedCommitButtonReadyStyle = style({
@@ -117,17 +120,18 @@ export const stagedCommitStyle = style({
   margin: '8px'
 });
 
+// need to override font-size from user agent stylesheet
 export const stagedCommitMessageStyle = style({
-  width: '75%',
-  fontWeight: 300,
-  height: '35px',
-  overflowX: 'auto',
-  border: 'var(--jp-border-width) solid var(--jp-border-color2)',
-  flex: '20 1 auto',
-  resize: 'vertical',
-  padding: '4px 8px',
   backgroundColor: 'var(--jp-layout-color1)',
+  border: 'var(--jp-border-width) solid var(--jp-border-color2)',
   color: 'var(--jp-ui-font-color0)',
+  fontSize: 'var(--jp-ui-font-size1)',
+  fontWeight: 300,
+  flex: '20 1 auto',
+  overflowX: 'auto',
+  padding: 'var(--jp-code-padding)',
+  resize: 'none',
+  width: '75%',
 
   $nest: {
     '&:focus': {

src/style/GitStageStyle.ts

@@ -28,7 +28,7 @@ export const sectionAreaStyle = style({
 });
 
 export const sectionHeaderLabelStyle = style({
-  fontSize: 'var(--jp-ui-font-size)',
+  fontSize: 'var(--jp-ui-font-size1)',
   flex: '1 1 auto',
   textOverflow: 'ellipsis',
   overflow: 'hidden',

src/style/GitWidgetStyle.ts

@@ -6,5 +6,5 @@ export const gitWidgetStyle = style({
   minWidth: '300px',
   color: 'var(--jp-ui-font-color1)',
   background: 'var(--jp-layout-color1)',
-  fontSize: 'var(--jp-ui-font-size0)'
+  fontSize: 'var(--jp-ui-font-size1)'
 });