long sidebar menu item fixes

2 files changed, 14 insertions, 3 deletions

diff --git a/src/mobile/MobileInterface.tsx b/src/mobile/MobileInterface.tsx
index 68fb8b28f..5acdc1dea 100644
--- a/src/mobile/MobileInterface.tsx
+++ b/src/mobile/MobileInterface.tsx
@@ -370,8 +370,9 @@ export class MobileInterface extends React.Component {
                     <div
                         className="item"
                         key={index}
-                        onClick={() => this.handleClick(doc)}>{doc.title}
-                        <div className="type">{doc.type}</div>
+                        onClick={() => this.handleClick(doc)}>
+                        <div className="item-title"> {doc.title} </div>
+                        <div className="item-type">{doc.type}</div>
                         <FontAwesomeIcon className="right" icon="angle-right" size="lg" />
                     </div>);
             }
diff --git a/src/mobile/MobileMenu.scss b/src/mobile/MobileMenu.scss
index 55c62f458..6304ff5e4 100644
--- a/src/mobile/MobileMenu.scss
+++ b/src/mobile/MobileMenu.scss
@@ -53,6 +53,8 @@ body {
     right: 50%;
     transform: translate(50%, -50%);
     font-size: 40;
+    font-weight: 700;
+    text-align: center;
     user-select: none;
     text-transform: uppercase;
     font-family: Arial, Helvetica, sans-serif;
@@ -125,6 +127,7 @@ body {
     font-style: normal;
     font-weight: normal;
     user-select: none;
+    display: inline-flex;
     font-size: 35px;
     text-transform: uppercase;
     color: black;
@@ -151,7 +154,7 @@ body {
     z-index: 200;
 }
 
-.type {
+.item-type {
     display: inline;
     text-transform: lowercase;
     margin-left: 20px;
@@ -160,6 +163,13 @@ body {
     color: rgb(28, 28, 28);
 }
 
+.item-title {
+    max-width: 70%;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
 .right {
     margin-left: 20px;
     z-index: 200;