Fixes

rowanhogan · Sep 8, 2018 · 813e015 · 813e015
1 parent 687e2e9
commit 813e015
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 13 deletions.
diff --git a/src/components/sections/index.js b/src/components/sections/index.js
@@ -31,10 +31,16 @@ class Sections extends Component {
                   key={index}
                   href={`#${section.anchor}`}
                   onClick={() => this.setState({ open: false })}>
-                  <span className={`section-level-${section.toclevel}`}>
+                  <span
+                    className={`section-level section-level-${
+                      section.toclevel
+                    }`}>
                     {section.number}.
                   </span>
-                  <label dangerouslySetInnerHTML={{ __html: section.line }} />
+                  <span
+                    className="section-label"
+                    dangerouslySetInnerHTML={{ __html: section.line }}
+                  />
                 </a>
               ))}
             </nav>

diff --git a/src/index.js b/src/index.js
@@ -2,12 +2,9 @@ import React from 'react'
 import ReactDOM from 'react-dom'
 import { BrowserRouter } from 'react-router-dom'
 import registerServiceWorker from './registerServiceWorker'
-import initReactFastclick from 'react-fastclick'
 import App from './routes/app'
 import './styles/styles.css'
 
-initReactFastclick()
-
 ReactDOM.render(
   <BrowserRouter>
     <App />

diff --git a/src/styles/_home.scss b/src/styles/_home.scss
@@ -52,12 +52,14 @@
     }
   }
 
-  #mp-upper {
-    tr {
-      display: flex;
+  @media (min-width: 48rem) {
+    #mp-upper {
+      tr {
+        display: flex;
 
-      td {
-        flex: 50%;
+        td {
+          flex: 50%;
+        }
       }
     }
   }

diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss
@@ -211,7 +211,6 @@ $bar-height: 0.166rem;
   top: 85%;
   right: 0.75rem;
   background-color: white;
-  width: 16rem;
   max-width: calc(100vw - 1.5rem);
   max-height: calc(95vh - #{$header-height});
   overflow: auto;
@@ -225,6 +224,10 @@ $bar-height: 0.166rem;
     color: currentColor;
     text-decoration: none;
     border-top: thin solid rgba(black, 0.1);
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    overflow: hidden;
+    max-width: 36rem;
 
     &:first-child {
       border-top-width: 0;
@@ -239,7 +242,7 @@ $bar-height: 0.166rem;
       background-color: rgba(black, 0.075);
     }
 
-    span {
+    .section-level {
       opacity: 0.5;
       font-size: 80%;
     }
@@ -254,7 +257,7 @@ $bar-height: 0.166rem;
       margin-left: 1rem;
     }
 
-    label {
+    .section-label {
       font-family: $title-stack;
       margin-left: 0.5rem;
     }