Use relative font-size unit

For improved accessibility

ui/src/App.js

@@ -5,9 +5,14 @@ import Routes from './Routes'
 import Messages from './components/messages/Messages'
 
 const GlobalStyle = createGlobalStyle`
+  html {
+    font-size: 0.85rem;
+  }
+
   #root, body {
     height: 100%;
     margin: 0;
+    font-size: inherit;
   }
 
   /* Make dimmer lighter */

ui/src/components/header/Searchbar.js

@@ -21,7 +21,7 @@ const SearchField = styled.input`
   border: 1px solid #eee;
   border-radius: 4px;
   padding: 0 8px;
-  font-size: 16px;
+  font-size: 1rem;
   font-family: Lato, 'Helvetica Neue', Arial, Helvetica, sans-serif;
 
   &:focus {
@@ -120,8 +120,8 @@ const SearchBar = () => {
 }
 
 const ResultTitle = styled.h1`
-  font-size: 20px;
-  margin: 12px 0 4px;
+  font-size: 1.25rem;
+  margin: 12px 0 0.25rem;
 `
 
 const SearchResults = ({ result }) => {

ui/src/components/sidebar/PhotoSidebar.js

@@ -36,18 +36,18 @@ const photoQuery = gql`
 
 const PreviewImage = styled(ProtectedImage)`
   width: 100%;
-  height: 333px;
+  height: ${({ imageAspect }) => imageAspect * 100}%;
   object-fit: contain;
 `
 
 const Name = styled.div`
   text-align: center;
-  font-size: 16px;
-  margin-bottom: 12px;
+  font-size: 1.2rem;
+  margin: 0.75rem 0 1rem;
 `
 
 const ExifInfo = styled.div`
-  margin-bottom: 24px;
+  margin-bottom: 1.5rem;
 `
 
 const exifNameLookup = {
@@ -109,15 +109,20 @@ const SidebarContent = ({ photo, hidePreview }) => {
     ))
   }
 
-  let previewUrl = null
+  let previewImage = null
   if (photo) {
-    if (photo.highRes) previewUrl = photo.highRes.url
-    else if (photo.thumbnail) previewUrl = photo.thumbnail.url
+    if (photo.highRes) previewImage = photo.highRes
+    else if (photo.thumbnail) previewImage = photo.thumbnail
   }
 
   return (
     <div>
-      {!hidePreview && <PreviewImage src={previewUrl} />}
+      {!hidePreview && (
+        <PreviewImage
+          src={previewImage.url}
+          imageAspect={previewImage.width / previewImage.height}
+        />
+      )}
       <Name>{photo && photo.title}</Name>
       <ExifInfo>{exifItems}</ExifInfo>
       <SidebarDownload photo={photo} />

ui/src/components/sidebar/SidebarDownload.js

@@ -181,7 +181,7 @@ const SidebarDownload = ({ photo }) => {
     <div style={{ marginBottom: 24 }}>
       <h2>Download</h2>
 
-      <Table selectable singleLine>
+      <Table selectable singleLine compact>
         <Table.Header>
           <Table.Row>
             <Table.HeaderCell>Name</Table.HeaderCell>

ui/src/components/sidebar/SidebarItem.js

@@ -6,14 +6,15 @@ const ItemName = styled.div`
   display: inline-block;
   width: 100px;
   font-weight: 600;
-  font-size: 12px;
+  font-size: 0.85rem;
   color: #888;
   text-align: right;
-  margin-right: 8px;
+  margin-right: 0.5rem;
 `
 
 const ItemValue = styled.div`
   display: inline-block;
+  font-size: 1rem;
 `
 
 const SidebarItem = ({ name, value }) => (