fix: wrap long URLs in the bibliography and tooltips

Closes #219

src/lib/css/citations.styl

@@ -1,7 +1,8 @@
-@import 'collections/colors'
+@require 'collections/variables'
+@require 'collections/colors'
 
 .abt-citation
-    {$noselect}
+    noselect()
     display: inline-block;
     white-space: nowrap
     cursor: pointer
@@ -36,11 +37,13 @@
             display: table-cell
             text-align: right
         .csl-right-inline
+            word-wrap()
             display: table-cell
     &.margin
         display: flex
         justify-content: flex-end
         .csl-right-inline
+            word-wrap()
             min-width: 100%
     .csl-left-margin
         padding: 0 8px 0 0

src/lib/css/collections/shared.styl

@@ -22,7 +22,7 @@
     animation: pulse 200ms cubic-bezier(0, 0, 0.2, 1) forwards
 
 .abt-btn
-    {$noselect} // @stylint ignore
+    noselect()
     background: white
     color: $dark-gray
     background-image: none

src/lib/css/collections/variables.styl

@@ -19,8 +19,8 @@ $animation-curve-default = $animation-curve-fast-out-slow-in
 
 $button-transition = box-shadow 0.2s $animation-curve-fast-out-linear-in, background-color 0.2s $animation-curve-default, color 0.2s $animation-curve-default
 
-// Misc
-$noselect =
+// Mixins
+noselect()
     -webkit-appearance: none
     -webkit-touch-callout: none
     -webkit-user-select: none
@@ -29,6 +29,16 @@ $noselect =
     -ms-user-select: none
     user-select: none
 
+word-wrap()
+    overflow-wrap: break-word
+    word-wrap: break-word
+    -ms-word-break: break-all
+    word-break: break-word
+    -ms-hyphens: auto
+    -moz-hyphens: auto
+    -webkit-hyphens: auto
+    hyphens: auto
+
 
 @keyframes colors
     0%

src/lib/js/tinymce/views/styles.styl

@@ -69,7 +69,7 @@ select
     transition: none
 
 label
-    {$noselect} // @stylint ignore
+    noselect()
     white-space: nowrap
     cursor: pointer
     font-size: 0.9em