From 1ef80febcb994dff1cefe418c339b8e26c1c71de Mon Sep 17 00:00:00 2001
From: Danny Coates <dannycoates@gmail.com>
Date: Mon, 5 Nov 2018 15:46:49 -0800
Subject: [PATCH] fixed filename word-break

---
 app/main.css          |  4 ++++
 app/ui/archiveTile.js | 10 +++++-----
 app/ui/copyDialog.js  |  2 +-
 app/ui/modal.js       |  2 +-
 4 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/app/main.css b/app/main.css
index 74a9eaff..1539d7a3 100644
--- a/app/main.css
+++ b/app/main.css
@@ -31,6 +31,10 @@ progress::-webkit-progress-value {
   @apply rounded-sm;
 }
 
+.word-break-all {
+  word-break: break-all;
+}
+
 .main {
   display: flex;
   max-width: 64rem;
diff --git a/app/ui/archiveTile.js b/app/ui/archiveTile.js
index 77889289..f1f37c92 100644
--- a/app/ui/archiveTile.js
+++ b/app/ui/archiveTile.js
@@ -96,7 +96,7 @@ function fileInfo(file, action) {
     <article class="flex flex-row items-center p-3">
       <img class="" src="${assets.get('blue_file.svg')}"/>
       <p class="ml-4 w-full">
-        <h1 class="text-sm font-medium">${file.name}</h1>
+        <h1 class="text-sm font-medium word-break-all">${file.name}</h1>
         <div class="text-xs font-normal opacity-75 pt-1">${bytes(
           file.size
         )}</div>
@@ -137,7 +137,7 @@ module.exports = function(state, emit, archive) {
         alt="Delete"
         src="${assets.get('close-16.svg')}"
         onclick=${del}/>
-      <h1 class="text-sm font-medium">${archive.name}</h1>
+      <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
       <div class="text-xs font-normal opacity-75 pt-1">${bytes(
         archive.size
       )}</div>
@@ -251,7 +251,7 @@ module.exports.uploading = function(state, emit) {
     class="z-20 flex flex-col items-start border border-grey-light bg-white p-4">
     <p class="w-full">
       <img class="float-left mr-3" src="${assets.get('blue_file.svg')}"/>
-      <h1 class="text-sm font-medium">${archive.name}</h1>
+      <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
       <div class="text-xs font-normal opacity-75 pt-1">${bytes(
         archive.size
       )}</div>
@@ -320,7 +320,7 @@ module.exports.preview = function(state, emit) {
     <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>
+      <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
       <div class="text-xs font-normal opacity-75 pt-1">${bytes(
         archive.size
       )}</div>
@@ -350,7 +350,7 @@ module.exports.downloading = function(state, emit) {
   <article class="flex flex-col 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>
+      <h1 class="text-sm font-medium word-break-all">${archive.name}</h1>
       <div class="text-xs font-normal opacity-75 pt-1">${bytes(
         archive.size
       )}</div>
diff --git a/app/ui/copyDialog.js b/app/ui/copyDialog.js
index 87f1456b..ebd4f368 100644
--- a/app/ui/copyDialog.js
+++ b/app/ui/copyDialog.js
@@ -6,7 +6,7 @@ module.exports = function(name, url) {
     return html`
     <div class="flex flex-col items-center text-center p-4 max-w-sm">
       <h1 class="font-bold my-4">${state.translate('notifyUploadDone')}</h1>
-      <p class="font-normal leading-normal text-grey-darker">${state.translate(
+      <p class="font-normal leading-normal text-grey-darker word-break-all">${state.translate(
         'copyUrlFormLabelWithName',
         { filename: name }
       )}</p>
diff --git a/app/ui/modal.js b/app/ui/modal.js
index 48d79862..9a0b812f 100644
--- a/app/ui/modal.js
+++ b/app/ui/modal.js
@@ -2,7 +2,7 @@ const html = require('choo/html');
 
 module.exports = function(state, emit) {
   return html`
-  <div class="absolute pin flex items-center justify-center overflow-hidden my-8 z-40 bg-cloud" onclick=${close}>
+  <div class="absolute pin flex items-center justify-center overflow-hidden z-40 bg-cloud md:my-8" onclick=${close}>
     <div class="h-full max-h-screen absolute pin-t flex items-center">
       <div class="shadow-cloud bg-white" onclick=${e => e.stopPropagation()}>
         ${state.modal(state, emit, close)}