Dynamically adjust the column widths

Instead of assuming each column has the width of the text `88:88:88`, we
now determine the largest string per column (based on unicode scalar
values) and adjust the column width accordingly. There is still a fixed
minimum width based on the string `88:88`, which ensures that the
columns don't switch sizes too often, especially if you start with empty
splits. We could've also chosen `8:88:88`, which would ensure there's no
column size change as you approach the hour mark. However, this would
increase the size of delta columns unnecessarily. So it's a little bit
of a trade-off.

src/ui/TimerView.tsx

@@ -91,12 +91,17 @@ export class TimerView extends React.Component<Props, State> {
                 >
                     <Layout
                         getState={() => {
-                            this.props.eventSink.updateLayoutState(
-                                this.props.layout,
-                                this.props.layoutState,
-                                this.props.layoutUrlCache.imageCache,
-                            );
-                            this.props.layoutUrlCache.collect();
+                            // The drag upload above causes the layout to be
+                            // dropped. We need to wait for it to be replaced
+                            // with the new layout.
+                            if (this.props.layout.ptr !== 0) {
+                                this.props.eventSink.updateLayoutState(
+                                    this.props.layout,
+                                    this.props.layoutState,
+                                    this.props.layoutUrlCache.imageCache,
+                                );
+                                this.props.layoutUrlCache.collect();
+                            }
                             return this.props.layoutState;
                         }}
                         layoutUrlCache={this.props.layoutUrlCache}