tagshow: make the layout slightly cleaner

clients/tagshow/root.js

@@ -8,17 +8,12 @@ var React = require('react');
 var SlideShow = require('./slideshow.js');
 var TagCloud = require('./tagcloud.js');
 
-var tagCloudStyle = {
-  position: 'absolute',
-  left: 0,
-  top: 0,
+var containerStyle = {
+  display: 'flex',
 };
 
 var slideShowStyle = {
-  position: 'absolute',
-  top: 0,
-  left: 300,
-  width: 500,
+  flex: 1,
 };
 
 var Root = React.createClass({
@@ -76,8 +71,8 @@ var Root = React.createClass({
         selected={this.state.selectedDs}
         onChange={this.handleDataSetPicked}/>
       <br/>
-      <div style={{position:"relative"}}>
-        <div style={tagCloudStyle}>
+      <div style={containerStyle}>
+        <div>
           <TagCloud tags={this.state.tags} selected={this.state.selected}
             onChoose={this.handleTagChoose}/>
         </div>

clients/tagshow/slideshow.js

@@ -5,9 +5,12 @@ var ImmutableRenderMixin = require('react-immutable-render-mixin');
 var noms = require('noms')
 var React = require('react');
 
+var containerStyle = {
+};
+
 var imageStyle = {
-  display: 'block',
-  width: '100%',
+  maxHeight: 300,
+  marginRight: 7,
 };
 
 var SlideShow = React.createClass({
@@ -18,7 +21,7 @@ var SlideShow = React.createClass({
   },
 
   render: function() {
-    return <div>{
+    return <div style={containerStyle}>{
       this.props.photos
         .sort(
           // This sorts the photos deterministically, by the ref of their image
@@ -52,7 +55,7 @@ var Item = React.createClass({
       b => this.setState({blob: b}));
 
     if (this.state.blob == null) {
-      return <span>loading...</span>;
+      return null;
     }
 
     return <img style={imageStyle} src={URL.createObjectURL(this.state.blob)}/>