import * as React from 'react';

export interface ScoreBoxProps {
  score: number | null,
  bid: number | undefined,
  tricks: number | undefined
};

const border = '1px solid black';

export default class extends React.Component<ScoreBoxProps, {}> {
  render() {
    return (
      <div style={{display: 'flex'}}>
        <div style={{border: border, boxSizing: 'border-box', whiteSpace: 'pre-wrap', width: '50%'}}>{this.props.score !== null ? this.props.score : ' '}</div>
        <div style={{boxSizing: 'border-box', width: '50%'}}>
          <div style={{border: border, textAlign: 'center', whiteSpace: 'pre-wrap'}}>{this.props.bid !== undefined ? this.props.bid : ' '}</div>
          <div style={{border: border, textAlign: 'center', whiteSpace: 'pre-wrap'}}>{this.props.tricks !== undefined ? this.props.tricks : ' '}</div>
        </div>
      </div>
    );
  }
};

import * as React from 'react';

export interface ScoreBoxProps {
  score: number | null,
  bid: number | null,
  tricks: number | null
};

const border = '1px solid black';

export default class extends React.Component<ScoreBoxProps, {}> {
  render() {
    return (
      <div style={{display: 'flex'}}>
        <div style={{border: border, boxSizing: 'border-box', width: '50%'}}>{this.props.score}</div>
        <div style={{boxSizing: 'border-box', width: '50%'}}>
          <div style={{border: border}}>{this.props.bid}</div>
          <div style={{border: border}}>{this.props.tricks}</div>
        </div>
      </div>
    );
  }
};

--- 
+++ 
@@ -2,8 +2,8 @@
 
 export interface ScoreBoxProps {
   score: number | null,
-  bid: number | null,
-  tricks: number | null
+  bid: number | undefined,
+  tricks: number | undefined
 };
 
 const border = '1px solid black';
@@ -12,10 +12,10 @@
   render() {
     return (
       <div style={{display: 'flex'}}>
-        <div style={{border: border, boxSizing: 'border-box', width: '50%'}}>{this.props.score}</div>
+        <div style={{border: border, boxSizing: 'border-box', whiteSpace: 'pre-wrap', width: '50%'}}>{this.props.score !== null ? this.props.score : ' '}</div>
         <div style={{boxSizing: 'border-box', width: '50%'}}>
-          <div style={{border: border}}>{this.props.bid}</div>
-          <div style={{border: border}}>{this.props.tricks}</div>
+          <div style={{border: border, textAlign: 'center', whiteSpace: 'pre-wrap'}}>{this.props.bid !== undefined ? this.props.bid : ' '}</div>
+          <div style={{border: border, textAlign: 'center', whiteSpace: 'pre-wrap'}}>{this.props.tricks !== undefined ? this.props.tricks : ' '}</div>
         </div>
       </div>
     );
Fix styling with score box
