a few style tweaks

app/main.css

@@ -33,7 +33,7 @@ progress::-webkit-progress-value {
 
 .main {
   display: flex;
-  max-width: 1024px;
+  max-width: 64rem;
   width: 100%;
 }
 
@@ -83,14 +83,6 @@ progress::-webkit-progress-value {
   white-space: nowrap;
 }
 
-.bg-shades {
-  background-color: rgba(255, 255, 255, 0.8);
-}
-
-.border-modal {
-  box-shadow: 0 0 5rem 5rem white;
-}
-
 .checkbox {
   @apply leading-normal;
   @apply select-none;
@@ -148,10 +140,6 @@ progress::-webkit-progress-value {
   content: '\200b';
 }
 
-.max-h-half {
-  max-height: 50vh;
-}
-
 @screen md {
   .main {
     @apply flex-1;
@@ -159,7 +147,7 @@ progress::-webkit-progress-value {
     @apply items-center;
     @apply my-10;
 
-    width: calc(100% - 48px);
+    width: calc(100% - 3rem);
     min-height: 30rem;
     max-height: 40rem;
   }

app/ui/archiveTile.js

@@ -109,16 +109,13 @@ function fileInfo(file, action) {
 function archiveDetails(translate, archive) {
   if (archive.manifest.files.length > 1) {
     return html`
-    <details class="w-full pb-1 overflow-y-hidden" ${
+    <details class="w-full pb-1 overflow-y-scroll" ${
       archive.open ? 'open' : ''
     } ontoggle=${toggled}>
       <summary>${translate('fileCount', {
         num: archive.manifest.files.length
       })}</summary>
-      ${list(
-        archive.manifest.files.map(f => fileInfo(f)),
-        'list-reset h-full overflow-y-scroll'
-      )}
+      ${list(archive.manifest.files.map(f => fileInfo(f)), 'list-reset h-full')}
     </details>`;
   }
   function toggled(event) {
@@ -180,7 +177,7 @@ module.exports.wip = function(state, emit) {
   <article class="h-full flex flex-col bg-white z-20">
     ${list(
       state.archive.files.map(f => fileInfo(f, remove(f))),
-      'list-reset h-full overflow-y-scroll p-4 bg-blue-lightest max-h-half',
+      'list-reset h-full overflow-y-scroll p-4 bg-blue-lightest md:max-h-half-screen',
       'bg-white px-2 mb-3 border border-grey-light rounded'
     )}
     <div class="flex-grow p-4 bg-blue-lightest mb-6 font-medium">
@@ -319,7 +316,7 @@ module.exports.preview = function(state, emit) {
     archive.open = true;
   }
   return html`
-    <article class="flex flex-col bg-white border border-grey-light p-4 z-20">
+    <article class="flex flex-col max-h-full bg-white border border-grey-light p-4 z-20">
       <p class="w-full mb-4">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
       <h1 class="text-sm font-medium">${archive.name}</h1>

app/ui/download.js

@@ -107,7 +107,7 @@ module.exports = function(state, emit) {
   return html`
   <main class="main container">
     <section class="relative h-full w-full p-6 md:flex md:flex-row">
-      <div class="md:mr-6 md:w-1/2 overflow-y-scroll">${content}</div>
+      <div class="md:mr-6 md:w-1/2">${content}</div>
       <div class="md:w-1/2 mt-6 md:mt-0">${intro(state)}</div>
     </section>
   </main>`;

app/ui/modal.js

@@ -2,9 +2,9 @@ const html = require('choo/html');
 
 module.exports = function(state, emit) {
   return html`
-  <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-shades" onclick=${close}>
+  <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud" onclick=${close}>
     <div class="h-full max-h-screen absolute pin-t flex items-center">
-      <div class="border-modal bg-white" onclick=${e => e.stopPropagation()}>
+      <div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
         ${state.modal(state, emit, close)}
       </div>
     </div>

tailwind.js

@@ -604,6 +604,7 @@ module.exports = {
 
   maxHeight: {
     full: '100%',
+    'half-screen': '50vh',
     screen: '100vh'
   },